Flutter : Cannot display image from image url firestore

Question

I try display data from firestore using image url. i use FutureBuilder for get my image url value from firestore. but i have problem because my image cannot display and show red screen. i got messages in my debug console like :

Another exception was thrown: A build function returned null.

I/flutter (13506): Another exception was thrown: NoSuchMethodError: The method '[]' was called on null.

I/flutter (13506): Another exception was thrown: NoSuchMethodError: Class 'QuerySnapshot' has no instance method '[]'

and this my code :

ListTile(
  leading: new FutureBuilder(
    future: Firestore.instance.collection('users').where('uid', isEqualTo: _post['imgurl']).getDocuments(),
    builder: (BuildContext context, AsyncSnapshot snapshot){
      if(snapshot.hasData){
        if(snapshot.data != null){
          print(snapshot.data['imgurl']);
          return CircleAvatar(
            backgroundImage: NetworkImage(snapshot.data['imgurl']),
          );
        }
      }
    },
  ),
  title: Text('Richard');
)

can you tell me where is my fault?

Answer 1

Your Future returns a list of documents, not just one. You're trying to get a document's imageUrl from a list of document and not from one.

Your snapshot.data is a list of documents, you can find them in snapshot.data.documents.

If you're interested in just one document, I suggest you to change your Future to something that returns only one document (e.g. getting the first).

If you want to keep your Future as it is, just get the first document from your snapshot.data and do your work on it.

At this moment I can't provide further examples, since I'm not able to do it logistically (I'm not at home), but could provide you some if my suggestions do not help you resolve!