Firebase Data & ListView

Here we will see how to load data from Firebase Firestore and show the data in a ListView. We will use ListView.builder to do.

We will have a list name items and a temporary list tempList.

items would be accessed from the UI. Once we load the data then we will assign data from tempList to items list.

Here is the core part of the work

 var collection = FirebaseFirestore.instance.collection("people");
  late List<Map<String, dynamic>> items ;
  bool isLoaded = false;

  _displayData() async {
    List<Map<String, dynamic>> tempList =[];
    var data = await collection.get();
    data.docs.forEach((element) {
      tempList.add(element.data());
    });

    setState(() {
      items = tempList;
      isLoaded = true;
    });
  }

Here we first get collection and using collection(“people”) and then we did await collection.get() to get the documents from firestore.

First we save the data in tempList using forEach() loop. Using setState we let the UI know we have data ready and assign it to items list.

Then we use the items for ListView.builder and inside ListView.builder we used ListTile().

import 'dart:math';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

import 'firebase_options.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});



  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var collection = FirebaseFirestore.instance.collection("people");
  late List<Map<String, dynamic>> items ;
  bool isLoaded = false;

  _displayData() async {
    List<Map<String, dynamic>> tempList =[];
    var data = await collection.get();
    data.docs.forEach((element) {
      tempList.add(element.data());
    });

    setState(() {
      items = tempList;
      isLoaded = true;
    });
  }



  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(

        child: isLoaded?ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index){
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: ListTile(
                  shape: RoundedRectangleBorder(
                      side : const BorderSide(width: 2),
                      borderRadius: BorderRadius.circular(20)
                  ),
                  leading: const CircleAvatar(
                      backgroundColor: Color(0xff6ae792),
                      child:Icon(Icons.person)
                  ),
                  title: Row(
                    children: [
                      Text(items[index]["name"]??"Not given"),
                      SizedBox(width: 10,),
                      Text(items[index]["age"].toString())
                    ],
                  ),
                  subtitle: Text(items[index]["job"]??"unemployed"),
                  trailing: Icon(Icons.more_vert),
                ),
              );
            }
        ):Container(child:Text("no data"))
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _displayData,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}