Having trouble implementing search in Cloud Firestore?

For Flutter apps Firebase is mostly used

Flutter + Firebase = FlutterFire.

Almost Every app need a search box…

As Firebase is used as backend the search must be implemented with firestore…

After initializing firebase with your flutter app,

add the following dependency

firestore_search: ^0.1.9

Lets create the search bar,

FirestoreSearchBar(
                tag: 'tag',
              )

Use this where you want your search bar , its a widget.

Just name the tag what you and remember it,

Building the search list,

We will use FirestoreSearchResults.builder

lets give its properties

tag will be the same what we used in FirestoreSearchBar

tag: 'tag',

firestoreCollectionNamewill be the name of collection of firestore you want tosearch

searchBywill be the name of field you want to seach

In the initialBody should be the widget that will be shown before the search

so, lets add

Text(‘Please search’)

and wrap it with center

and in dataListFromSnapshot we will add the list that we get from the query snapshot of firestore.

For example here I have defined it in the data model class itself

class DataModel {
  final String? name;
  final String? developer;
  final String? framework;
  final String? tool;

  DataModel({this.name, this.developer, this.framework, this.tool});
  List<DataModel> dataListFromSnapshot(QuerySnapshot querySnapshot) {
    return querySnapshot.docs.map((snapshot) {
      final Map<String, dynamic> dataMap =
          snapshot.data() as Map<String, dynamic>;

      return DataModel(
          name: dataMap['name'],
          developer: dataMap['developer'],
          framework: dataMap['framework'],
          tool: dataMap['tool']);
    }).toList();
  }
}

You have to make data classes according to your data,

You can define snapshot function elsewhere also ,but use it here

Now in the builder the add the Builder widget as we need, I will be using ListView.builder use as you want…

And don't forget to add checks if snapshot has data or not

Yu can use snapshot.connectionState to show the CircularProgressIndicator

The Full code is here

FirestoreSearchResults.builder(
              tag: 'tag',
              firestoreCollectionName: 'collection',
              searchBy: 'field',
              initialBody: const Center(child: Text('Please search'),),
              dataListFromSnapshot: DataModel().dataListFromSnapshot,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  final List<DataModel>? dataList = snapshot.data;
                  if (dataList!.isEmpty) {
                    return const Center(
                      child: Text('No Results Returned'),
                    );
                  }
                  return ListView.builder(
                      itemCount: dataList.length,
                      itemBuilder: (context, index) {
                        final DataModel data = dataList[index];

                        return Column(
                          mainAxisSize: MainAxisSize.min,
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(
                                '${data.name}',
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(
                                  bottom: 8.0, left: 8.0, right: 8.0),
                              child: Text('${data.developer}',
                              ),
                            )
                          ],
                        );
                      });
                }

                if (snapshot.connectionState == ConnectionState.done) {
                  if (!snapshot.hasData) {
                    return const Center(
                      child: Text('No Results Returned'),
                    );
                  }
                }
                return const Center(
                  child: CircularProgressIndicator(),
                );
              },
            )

Lets meet again for FirestoreSearchScaffold