ListView.seperated displaying Only after a Hot Reload

Question

I have called the getRecords function in initState . The listview only displays after I hot reload. I tried putting it under setState , but it didn't help.

void getRecords() async {
final records =
    await Firestore.instance.collection('records').getDocuments();
for (var record in records.documents) {
  if (record.data['email'] == newEmail) {
    int len = record.data['requestEmail'].length;
    for (int i = 0; i < len; i++) {
      if(record.data['requestEmail'][i] != newEmail){
        names.add(record.data['requestName'][i]);
        emails.add(record.data['requestEmail'][i]);
      }
      else
        continue;
    }
  }
}
print(names);

body: ListView.separated(
    padding: const EdgeInsets.all(8),
    itemCount: names.length,
    itemBuilder: (BuildContext context, int index) {
      return Card(
        color: Colors.white,
        child: ListTile(
          onTap: () {},
          title: Text('${names[index]}'),
        ),
      );
    },
    separatorBuilder: (BuildContext context, int index) => const Divider(),
  ),

Answer 1

This is happening because getting data from firebase is async task, so it takes time. Meanwhile build method build the widget without data, so when you get data you have to call setState to build listview with actual data.

Moreover, i also like to suggest that you can use futurebuilder or streambuilder when you are working with async.

void getRecords() async {
final records =
    await Firestore.instance.collection('records').getDocuments();
for (var record in records.documents) {
  if (record.data['email'] == newEmail) {
    int len = record.data['requestEmail'].length;
    for (int i = 0; i < len; i++) {
      if(record.data['requestEmail'][i] != newEmail){
        names.add(record.data['requestName'][i]);
        emails.add(record.data['requestEmail'][i]);
      }
      else
        continue;
    }
  }
  setState(() {});  // added line
}