how to add text in a list view container

Question

how to add text below the each container like the image showing below. appreciate your help on this. ...... ....................................... ....................... ................................................ ................. .............. ........... ...............

final List<String> containerImages = [
    'asset/images/canada3.jpg',
    'asset/images/canada1.jpg',
    'asset/images/canada2.jpg',
    'asset/images/canada2.jpg',
  ];

 Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 150,
                  child: ListView.separated(
                    separatorBuilder: (context, index) {
                      return SizedBox(width: 20,);
                    },
                    scrollDirection: Axis.horizontal,
                    itemCount: 4,
                    itemBuilder: (context, index) {
                      return Container(
                        width: 120,
                        child: Image.asset(containerImages[index],fit: BoxFit.cover),
                      );

                    },
                  ),

                ),
              )

Ravindra S. Patil · Accepted Answer · 2022-06-16 08:59:47Z

Try below code, I have used NetworkImages so you used your images and also used your Texts, you will manage width and height of container on your need

your image lists:

final List listImages = [
    'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
    'https://cdn.pixabay.com/photo/2022/03/27/11/23/cat-7094808__340.jpg',
    'https://static.scientificamerican.com/sciam/cache/file/5C51E427-1715-44E6-9B14D9487D7B7F2D_source.jpg',
    'https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg',
  ];

Your Widget:

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Container(
    height: 200,
    child: ListView.separated(
      separatorBuilder: (context, index) {
        return SizedBox(
          width: 20,
        );
      },
      scrollDirection: Axis.horizontal,
      itemCount: listImages.length,
      shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          elevation: 5,
          shadowColor: Colors.grey,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(
              20,
            ),
          ),
          margin: EdgeInsets.all(5),
          child: Container(
            height: 200,
            width: 150,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(
                          10,
                        ),
                        topRight: Radius.circular(
                          10,
                        ),
                      ),
                      image: DecorationImage(
                        fit: BoxFit.fill,
                        image: NetworkImage(
                          listImages[index],
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 50,
                  padding: const EdgeInsets.all(8.0),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(20.0),
                      bottomRight: Radius.circular(20.0),
                    ),
                  ),
                  child: Text(
                    'Awesome Product From Person ${index.toString()}',
                  ),
                ),
              ],
            ),
          ),
        );
      },
    ),
  ),
),

Your result screen->

Kaushik Chandru · Accepted Answer · 2022-06-16 08:30:30Z

1

Instead of returning a container, return a column widget and add text below the image container

final List<String> containerImages = [
    'asset/images/canada3.jpg',
    'asset/images/canada1.jpg',
    'asset/images/canada2.jpg',
    'asset/images/canada2.jpg',
  ];
final List<String> imageTitles = [
"content1", "content2", "content3", "content4"

 Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 250,
                  child: ListView.separated(
                    separatorBuilder: (context, index) {
                      return SizedBox(width: 20,);
                    },
                    scrollDirection: Axis.horizontal,
                    itemCount: 4,
                    itemBuilder: (context, index) {
                      return Column(
                    mainAxisSize: MainAxisSize.min,
                       children: [
               Container(
                        width: 120,
                        child: Image.asset(containerImages[index],fit:BoxFit.cover),
                      ),
              Text("${imageTitles[index]}")
                       ]
                      );

                    },
                  ),

                ),
              )

edited Jun 16, 2022 at 8:30

answered Jun 16, 2022 at 8:24

Kaushik Chandru

18k4 gold badges24 silver badges44 bronze badges

2 Comments

Nidew Over a year ago

I got >> A RenderFlex overflowed by 95 pixels on the bottom.

Kaushik Chandru Over a year ago

Increase the height from 150 to 250 for the container. Giving a fixed height may cause issues in some devices. My suggestion is to keep the image size constant and restrict the text to a specific number of characters so all cards remain same.

Collectives™ on Stack Overflow

how to add text in a list view container

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related