Currently struggling to make a ListView data retrieved from Firestore. I am trying to get "kids name" saved under in the firestore as linked photo. Firestore

No error message is shown up but the data is not retrieved correctly and shown blank screen...hope anyone can correct my code! and here is my code:

class kidsNamePick extends StatefulWidget {

  @override
  _kidsNamePickState createState() => _kidsNamePickState();
}

class _kidsNamePickState extends State<kidsNamePick> {
  List<Memo> kidsnamelist = [];
  Future<void>fetchMemo()async{
    final kidsnames = await FirebaseFirestore.instance.collection('useraccount').doc(FirebaseAuth.instance.currentUser!.uid)
        .collection('kidsname').get();
    final docs = kidsnames.docs;for (var doc in docs){
  Memo fetchMemo = Memo(kidsname: doc.data()['kids name'],
  );
  kidsnamelist.add(fetchMemo);}
    setState(() {

    });}
  @override
  void initState(){
  super.initState();
  fetchMemo();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Add/Select Kids'),
        ),
        body: ListView.builder(
          itemCount: kidsnamelist.length,
          itemBuilder: (context, index){
            return ListTile(
              title: Text(kidsnamelist[index].kidsname),
            );
          },
        )

    );
  }


} 

CodePudding user response：

The best way to call future method is using FutureBuilder, first change your fetchMemo to this:

Future<List<Memo>> fetchMemo() async {
    try {
      final kidsnames = await FirebaseFirestore.instance
          .collection('useraccount')
          .doc(FirebaseAuth.instance.currentUser!.uid)
          .collection('kidsname')
          .get();
      final docs = kidsnames.docs;
      return docs
          .map((doc) => Memo(
                kidsname: doc.data()['kids name'],
              ))
          .toList();
    } catch (e) {
      return [];
    }
  }

then change your build method to this:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add/Select Kids'),
      ),
      body: FutureBuilder<List<Memo>>(
        future: fetchMemo(),
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return Text('Loading....');
            default:
              if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                List<Memo> data = snapshot.data ?? [];
                return ListView.builder(
                  itemCount: data.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(data[index].kidsname),
                    );
                  },
                );
              }
          }
        },
      ),
    );
  }