Question 119963 in Firebase Question posted in
An extensive official documentation can be found here.

How do I put simple FireBase data into a ListView?

How do I get some FireBase data into a ListView?

The following code successfully returns a list of products from FireBase:

final CollectionReference _products = FirebaseFirestore.instance.collection('products');
Future<List> getList() async {
  QuerySnapshot querySnapshot = await _products.get();
  final temp = querySnapshot.docs.map((doc) => doc.data()).toList();
  return temp;
}

The returned data looks like this:

[{quantity: 1.0, name: Greek Yogurt 🇬🇷, category: Dairy, priority: 0}, {quantity: 1.0, name: Watermelon 🍉, category: Produce, priority: 0}, {quantity: 1.0, name: Cinnamon 🍂, category: Spices, priority: 0}, {quantity: 4.0, name: Banana 🍌, priority: 0, category: Produce}, {quantity: 1.0, name: Heavy Cream 🐄, priority: 0, category: Dairy}]

I can get these Column & Text widgets to display the returned data:

return Column(
  children: <Widget>[
    const Text("FireBase Data"),
    Text("${snapshot.data}"),
    Text(snapshot.data?.length.toString() ?? '0'),
  ]
);

But whenever I try to use a ListView, I get stumped.

Can anyone help me get the returned data into a ListView?

I’m sure it’s relatively simple, I’m just Flutter dense…

Thanks!

Tags:

2

Answers


  1. 0

    I don’t know exactly what you want to show in the ListView but I hope the following code helps you achieve what you want:

    if (snapshot.hasData) {
    return ListView.builder(
       itemCount: snapshot.data!.length,
       itemBuilder: (context, index) {
         return Text("${snapshot.data[index]}");
       },
    );
}
    Login or Signup to reply.
  2. 0

    You’re very vague about what you want to do with your ListView, but just looking at your code and trying to guess your intentions, I felt that this would make a lot of sense to me:

    void main() async {
  // I didn't know what to do with the below... so I commented it out.
  // Widget listChild (snapshot){
  //   return Column(children: <Widget>[
  //     const Text("FireBase Data"),
  //     Text("${snapshot.data}"),
  //     Text(snapshot.data?.length.toString() ?? '0'),
  //   ]);
  // }

  final CollectionReference _products = FirebaseFirestore.instance.collection('products');

  Future<List> getList() async {
    QuerySnapshot querySnapshot = await _products.get();
    final temp = querySnapshot.docs.map((doc) => doc.data()).toList();
    return temp;
  }

  List list = await getList();
  // [{quantity: 1.0, name: Greek Yogurt 🇬🇷, category: Dairy, priority: 0}, {quantity: 1.0, name: Watermelon 🍉, category: Produce, priority: 0}, {quantity: 1.0, name: Cinnamon 🍂, category: Spices, priority: 0}, {quantity: 4.0, name: Banana 🍌, priority: 0, category: Produce}, {quantity: 1.0, name: Heavy Cream 🐄, priority: 0, category: Dairy}]

  runApp(
    MaterialApp(
      home: Scaffold(
        body: ListView.builder(
            itemCount: list.length,
            itemBuilder: (context, index) {
              return Column(
                children: [
                  Text(list[index]['quantity'].toString()),
                  Text(list[index]['name']),
                  Text(list[index]['category']),
                  Text(list[index]['priority'].toString()),
                  Divider(),
                ],
              // This will give you a scrollable ListView of Columns,
              // displaying all the data you got from Firebase.
              );
            }
        ),
      ),
    ),
  );
}

    If this is not what you want, plz tell us what is! 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search