fetch Firebase data to as Listview builder in flutter

Question

Can some help me i have list of name books with images in real-time Firebase and each books has an integer ID so when i tried to fetch the data from firebase it give me white screen with out any data. but when i printout the result of the fetch in the terminal i saw the result i check all the Tutorials but all of them using the random id in the firebase. this is my CODE:

class DetailsList extends StatefulWidget {
  final List<DetailScreen> listSection;
  final String bName;

  const DetailsList({ this.listSection,@required this.bName}) ;
  @override
  _DetailsListState createState() => _DetailsListState();
}

class _DetailsListState extends State<DetailsList> {
  @override
  Widget build(BuildContext context) {
    //var controller = IndexedScrollController();
    Size size = MediaQuery.of(context).size;
    return Expanded(
        //flex: 4,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: [
            FutureBuilder(
              future:snapvalue(widget.bName),
                builder: (context,snapshot){
              if(snapshot.hasData)
              {print(snapshot.connectionState);
              print(snapshot.hasData);
                return CircularProgressIndicator();
              }else return ListView.builder(
                itemCount: 10,
                  itemBuilder: (context,index){
                    print(snapshot.data[index].title);
                //return SectionCard(snapshot: snapshot.data[index]);
                //     return Flexible(
                //       child: Card(child: ListTile(
                //         leading: ImageCard(imageSource: snapshot.data.image.toString(),),
                //         title: snapshot.data[index].title,
                //         subtitle: snapshot.data[index].pdf,
                //       ),),
                //     );
              });
            })
          ],
        ),
      );
  }

and the fetching data from Firebase code:

Future snapvalue(String child2) {
  List<String>detailslist;
  DatabaseReference data = dbRef.child(child2);
  data.once().then((DataSnapshot snap) {
    var key= snap.key.toString();
    var value= snap.value;
    if (value != null) {
      print("key"+key);
      print("value"+snap.value.toString());

      return value;
}else print("No Data");
  });
}

Solution

Your problem is a UI problem, because you are using listview inside a column, and both of them exchange vertically. Use shrinkwrap: true in listview.

Also even listtiles expand horizontally to infinity inside a listview.

Wrap your listtiles with SizedBox and give the box a width of size.width * 0.8

Because you already have a Size size variable.

This should work.

Card(child: SizedBox(width: size.width* 0.8, 
                      child: ListTile(
                       leading: ImageCard(imageSource: snapshot.data.image.toString(),),
                        title: snapshot.data[index].title,
                        subtitle: snapshot.data[index].pdf,
                      ),),)