How can I filter my StreamBuilder-list with a textfield?

Question

I'm making an app about Crete, Greece, with all the things to see on the island. On my bottomNavigation I have a tab that goes to a new screen with a TextField in the appbar and in the body I have my complete list (Firestore > Streambuilder > ListViewBuilder). When I click one of the items it redirects to a detail page.

To make it easier to search I would like to be able to filter the list when the user starts to type in the textfield.

I can't seem to wrap my head around it because of the fact that I'm using a detail page also... here's what I have so far:

StreamBuilder(
                stream: FirebaseFirestore.instance.collection('Crete').orderBy('name', descending: false).snapshots(),
                builder: (context, snapshot) {
                  if (!snapshot.hasData) return const Center(child: CircularProgressIndicator(),);
                  return Container(
                    child: ListView.builder(
                      shrinkWrap: true,
                      clipBehavior: Clip.none,
                      physics: NeverScrollableScrollPhysics(),
                      scrollDirection: Axis.vertical,
                      itemCount: snapshot.data.docs.length,
                      itemBuilder: (BuildContext context, index) => _buildListItemCrete(context, snapshot.data.docs[index]),
                    ),
                  );
                },
              ),

Then the TextField:

TextField(
            onChanged: (String value) {
              setState(() {
                searchResult = value;
              });
            },),

And this:

TextEditingController _searchController = TextEditingController();

  String searchResult = '';

  @override
  void initState(){
    super.initState();
    _searchController.addListener(_onSearchChanged);
  }

  @override
  void dispose(){
    _searchController.removeListener(_onSearchChanged);
    _searchController.dispose();
    super.dispose();
  }

  _onSearchChanged(){
    print(_searchController.text);
  }

How can I filter the list by typing in the textfield?

Answer 1

I found the solution in this fantastic tutorial at last.

The trick was to change the streambuilder to a listview.builder and to create a list from my snapshot collection.