The getter 'documents' was called on null shown for a while - firebase

Question

Im trying to retrieve name of user from firebase on appBar. It successfully retrieves it. But it displays an error on screen for few seconds before showing name of user successfully. The error os
I/flutter (24143): The following NoSuchMethodError was thrown building
StreamBuilder(dirty, state:
I/flutter (24143): _StreamBuilderBaseState<QuerySnapshot,
AsyncSnapshot>#c10cf):
I/flutter (24143): The getter 'documents' was called on null.
I/flutter (24143): Receiver: null
I/flutter (24143): Tried calling: documents
Class Data{
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
CurrentUser _currentUser = Provider.of<CurrentUser>(context, listen: false);
return Scaffold(
backgroundColor: Colors.grey[600],
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('Property Host'),
centerTitle: true,
actions: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
margin: new EdgeInsets.only(left: 50),
child: Text('Property Host',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 19),)),
StreamBuilder(stream: Firestore.instance.collection('users').where("uid", isEqualTo: userid).snapshots(),
// ignore: missing_return
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.data == null)
CircularProgressIndicator();
//final userDocument = snapshot.data;
//final title= snapshot.data.userocument['displayName']);
//CircularProgressIndicator();
return Expanded(
child: ListView.builder(
itemCount: snapshot.data.documents.length,
// ignore: missing_return
itemBuilder: (BuildContext context, int index) {
print(user.uid);
return user != null
? Container(
margin: EdgeInsets.only(top: 17, left: 40),
child: Text(
snapshot.data.documents.elementAt(index)['displayName']),
)
: IconButton(
icon: Icon(Icons.person),
// ignore: missing_return
onPressed: () {
Navigator.pushNamed(context, '/LoginScreen');
},
);
}
),
);
}

Answer 1

Use snapshot.hasData to ensure that you build the main widget (Expanded) after the data has been retrieved and use CircularProgessIndicator to hold its position before the data is returned
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasData){
return Expanded(
child: ListView.builder(
itemCount: snapshot.data.documents.length,
// ignore: missing_return
itemBuilder: (BuildContext context, int index) {
print(user.uid);
return user != null
? Container(
margin: EdgeInsets.only(top: 17, left: 40),
child: Text(
snapshot.data.documents.elementAt(index)['displayName']),
)
: IconButton(
icon: Icon(Icons.person),
// ignore: missing_return
onPressed: () {
Navigator.pushNamed(context, '/LoginScreen');
},
);
}
),
);
}
else {
return CircularProgressIndicator();
}
}