L M
L M

Reputation: 71

Cannot display data downloaded from Firestore using Listview.Builder and ListTile

I want to display a list from downloading the data from firestore. The download is successful (the full list can be printed) but somehow it cannot be displayed. Simply nothing is shown when I use the ListView.builder and ListTile. Pls help what is the problem of my code. Great thanks.


class DownloadDataScreen extends StatefulWidget {

  @override
  List<DocumentSnapshot> carparkList = []; //List for storing carparks

  _DownloadDataScreen createState() => _DownloadDataScreen();
}

class _DownloadDataScreen extends State<DownloadDataScreen> {
  void initState() {
    super.initState();
    readFromFirebase();
  }

  void readFromFirebase() async {
    await FirebaseFirestore.instance
        .collection('carpark')
        .get()
        .then((QuerySnapshot snapshot) {
      snapshot.docs.forEach((DocumentSnapshot cp) {
        widget.carparkList.add(cp);

        //to prove data are successfully downloaded
        print('printing cp');
        print(cp.data());
        print(cp.get('name'));
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(
          'Car Park',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              flex: 9,
              child: Container(
                child: ListView.builder(
                  itemCount: widget.carparkList.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(widget.carparkList[index].get('name')),
                      subtitle: Text(
                      widget.carparkList[index].get('district')),
                      onTap: () {
                      },
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 1

Views: 49

Answers (1)

sedatg
sedatg

Reputation: 51

create the list in state add it to the top line of the initState method List carparkList = [];

class DownloadDataScreen extends StatefulWidget {


  _DownloadDataScreen createState() => _DownloadDataScreen();
}

class _DownloadDataScreen extends State<DownloadDataScreen> {

 List<DocumentSnapshot> carparkList = []; //List for storing carparks

  void initState() {
    super.initState();
    readFromFirebase();
  }

  void readFromFirebase() async {
    await FirebaseFirestore.instance
        .collection('carpark')
        .get()
        .then((QuerySnapshot snapshot) {
      snapshot.docs.forEach((DocumentSnapshot cp) {
        widget.carparkList.add(cp);

        //to prove data are successfully downloaded
        print('printing cp');
        print(cp.data());
        print(cp.get('name'));
      });
    });
  }

Upvotes: 1

Related Questions