CODEWITHSUNDEEP
flutterfirebase
SqueezeOJ
SqueezeOJ

Reputation: 527

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!

Upvotes: 0

Views: 164

Answers (2)

Karolina Hageg&#229;rd
Karolina Hageg&#229;rd

Reputation: 1387

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! 🙂

Upvotes: 1

Shah Raza
Shah Raza

Reputation: 128

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]}");
       },
    );
}

Upvotes: 1

Related Questions