Creating a card and a title underneath in flutter

Question

Please how do i achieve the above picture using flutter. A cardview with a text under it and put it in a horizontal listview.builder so as to populate it with data.

  ListView homeList(){
var listView = ListView(
  shrinkWrap: true,
  children: <Widget>[
    _imageSlider(),

    Padding(
      padding: EdgeInsets.only(top: 15.0, bottom: 15.0, left: 15.0),
      child: Text("Trending", style: TextStyle(color: Colors.white, fontSize: 15.0),),
    ),

   Container(
     child: FutureBuilder(
       future: _trendingListImages(),
         builder: (BuildContext context, AsyncSnapshot async){
           if(async.data == null){
           return ColorLoader3(
          radius: 20.0,
          dotRadius: 5.0,
           );
          }else{
            return ListView.builder(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
                itemCount: async.data.length,
                itemBuilder: (BuildContext context, int position){
                      return Card(
                        child: ListTile(
                          title:Image.network(
                                "http://image.tmdb.org/t/p/w500/"+async.data[position].backdropPath,),


                          subtitle: Text(async.data[position].title),
                        )
                      );
                }
            );
           }
         }
     ),
   )
  ],
);

return listView;

}

This is what i have tried and well it doesn't seem to be working i have tried for hours can't seem to get it right. Help will be greatly appreciated thank you.

Answer 1

You need to modify your ListView.builder, same can be achieved using - Column

example code - you can edit it to match your fields

return ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: 25,
        itemBuilder: (BuildContext context, int position) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Card(
                elevation: 18.0,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0))),
                child: Image.network(
                  'https://placeimg.com/640/480/any',
                  fit: BoxFit.cover,
                  height: 200.0,
                  width: 130.0,
                ),
                clipBehavior: Clip.antiAlias,
                margin: EdgeInsets.all(8.0),
              ),
              Text(
                'Film Title',
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              )
            ],
          );
        });

OutPut: