how to insert a text in a container and padding for an image

Question

I want to insert a text to my container I tried this code segment. but it is not displaying. first image showing how it display now. image two showing how I need it to be implement. also the image icon need to have padding from the corner. how can I do this.

 child: Text(
             "Activity",
          style: TextStyle(color: textWhite, fontSize: 2)),

  ///////////////// //////////////////////////////////////////////////////////

 Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Container(
                        padding: const EdgeInsets.all(20),
                        height: 45,
                        width: 180,
                        decoration: BoxDecoration(
                          color: Colors.grey.withOpacity(0.4),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(10),
                            bottomLeft: Radius.circular(10),
                          ),
                          image: DecorationImage(
                            alignment: Alignment.centerLeft,
                            image: AssetImage(
                              'assets/images/running.png',
                            ),
                          ),
                        ),
                        child: Text(
                          "Activity",
                          style: TextStyle(color: textWhite, fontSize: 20),
                        ),
                      ),
                      Container(
                        height: 45,
                        width: 180,
                        decoration: BoxDecoration(
                          color: Colors.grey.withOpacity(0.4),
                          borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(10),
                            topRight: Radius.circular(10),
                          ),
                          image: DecorationImage(
                            alignment: Alignment.centerLeft,
                            image: AssetImage('assets/images/medal.png'),
                          ),
                        ),
                      )
                    ],
                  ),
                )

Answer 1

Use Following Code But You need to edit the style according to you

Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: 50,
                width: 200,
                // You can set width of container here
                decoration: BoxDecoration(
                  border: Border.all(),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(15),
                    bottomLeft: Radius.circular(15),
                  ),
                ),
                child: Padding(
                  // Following padding to give space around the icon and text
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset(
                        'assets/running.png',
                      ),
                      SizedBox(
                        width: 15,
                      ),
                      Text(
                        "Activity",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 15,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                height: 50,
                width: 200,
                decoration: BoxDecoration(
                  border: Border.all(),
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(15),
                    bottomRight: Radius.circular(15),
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset(
                        'assets/medal.png',
                      ),
                      SizedBox(
                        width: 15,
                      ),
                      Text(
                        "Achievement",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 15,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),

You will get following response

Answer 2

This image is similar to your goal. run on DartPad. You can change Image.network to Image.asset

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      // backgroundColor: Colors.blue[700],
      body: Container(
        height: 45,
        decoration: BoxDecoration(
          color: Colors.grey.withOpacity(0.4),
          borderRadius: BorderRadius.circular(10),
        ),
        margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 15),
        child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            iconRowText('https://picsum.photos/45', 'Activity'),
           Container(
             height: 45,
             width: 0.4,
             color: Colors.black,
           ),
            iconRowText('https://picsum.photos/45', 'Achievements'),
          ],
        ),
      ),
    );
  }

  Row iconRowText(String image, String text) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.network(image, height: 45, width: 45, fit: BoxFit.cover),
        ),
        Text(text),
      ],
    );
  }
}