how to add text inside a container flutter

Question

I'm new to flutter and trying to implement a dashboard screen. below first image showing my implementation so far with code. I want to enter the text below the icon as the second picture. I tried but I still struggling to find a way. how can I do that? appreciate your help on this. .... … ...............

Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.lightBlue,
                ),

              child: Padding(
                padding: const EdgeInsets.only(right: 10, top: 10),
                child: Align(
                    alignment: Alignment.topRight,
                    child: Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          color: Colors.white24,
                        ),
                        child: Icon(Icons.message, color: Colors.white,size: 18, ),


                    ),

                ),

              ),

              ),
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.deepPurple,
                ),

                child: Padding(
                  padding: const EdgeInsets.only(right: 10, top: 10),
                  child: Align(
                      alignment: Alignment.topRight,
                      child: Container(
                          width: 30,
                          height: 30,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            color: Colors.white24,
                          ),
                          child: Icon(Icons.notifications_active, color: Colors.white,size: 18,  ))),
                ),
              ),
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.teal,
                ),
                child: Padding(
                  padding: const EdgeInsets.only(right: 10, top: 10),
                  child: Align(
                      alignment: Alignment.topRight,
                      child: Container(
                          width: 30,
                          height: 30,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            color: Colors.white24,
                          ),
                          child: Icon(Icons.star, color: Colors.white,size: 18,  ))),
                ),
              ),
            ],
          ),

Ravindra S. Patil · Accepted Answer · 2024-08-13 04:51:53Z

3

Try below code hope its help to you. I have try one Container you try others same as below.

Container(
  padding: EdgeInsets.all(8.0),
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.lightBlue,
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            '0',
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
            ),
          ),
          Container(
            width: 30,
            height: 30,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.white24,
            ),
            child: Icon(
              Icons.message,
              color: Colors.white,
              size: 18,
            ),
          ),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Text(
        'Total Leads',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    ],
  ),
),

Result Screen->

edited Aug 13, 2024 at 4:51

answered May 6, 2022 at 6:24

Ravindra S. Patil

15.3k5 gold badges22 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ravindra S. Patil Over a year ago

@nayo, happy to help you

Collectives™ on Stack Overflow

how to add text inside a container flutter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related