Building future from firebase result

Question

I'm using a future to search firebase for users based on user input. The future then returns the results as a list but the future builder is not working to show the data in the UI. How can I build this data in the UI? Also is using future builder the correct way of doing this?

FutureBuilder(
                future: userSearch(_userSearchController.text),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.hasData) {
                    return Text(snapshot.data);
                  } else {
                    return new CircularProgressIndicator();
                  }
                },
              )    


Future userSearch(String userSearch) async {    
      QuerySnapshot result = await Firestore.instance
          .collection("users")
          .where("name", isEqualTo: userSearch)
          .getDocuments();
    
      final List<DocumentSnapshot> docs = result.documents;
    
      return docs;
    }

Edit using Stream

StreamBuilder(
            stream: userSearch(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {

              if (snapshot.hasData) {
                print(snapshot.data.length);
                return ListView.builder(
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: snapshot.data.length,
                    itemBuilder: (context, index) {
                      return userWidget(snapshot.data[index].data);
                    });
              } else {
                return new CircularProgressIndicator();
              }
            },
          )

Stream<dynamic> userSearch() async* {
    print("User Search");
    QuerySnapshot result = await Firestore.instance
        .collection("users")
        .where("name", isEqualTo: _userSearchController.text.toLowerCase())
        .getDocuments();
    
    yield result.documents;
  }

Answer 1

Due to you have catered for search based on userInput, you should be using Streambuilder. Future only return once, but streambuilder will always rebuild your widget whenever the return value is changed.

To build your UI, you can use ListView.builder:

if (snapshot.hasData) {
   return ListView.builder(
                          itemCount: snapshot.data.length,
                          itemBuilder: (context, index) {
                            return BuildYourWidget(snapshot.data[index]);
                          });
} else {
  return CircularProgressionIndicator();
}

BuilYourWidget(dynamic yoursnapshotdata) {
  return ListTile(trailing: Text('hello'), title: Text(yoursnapshotdata));
}