Integration of a search by Firestore field in a listview builder

Question

I have been looking for several days to integrate a data search in a listview builder. So far, I have succeeded in a listview but I would like to integrate the indexing system in listview builder to use indexes.

I would like not to display all the documents, but only the ones I would have searched from a search bar. Thank you for your help.

return ListView.builder(
  itemCount: snapshot.data!.docs.length,
  itemBuilder: (context, index) {
    var doc = snapshot.data!.docs[index];
    var data = doc.data() as Map<String, dynamic>;
    return Column(
      children: [
        SizedBox(
          height: MediaQuery.of(context).size.height * 0.0237,
        ),
        FadeIn(
          child: GestureDetector(
            onTap: () {
              Get.toNamed("Route", arguments: RecupDataDocuments(docID: doc.id.toString()));
            },
            child: Container(
              height: MediaQuery.of(context).size.height * 0.102,
              width: double.maxFinite,
              padding: EdgeInsets.symmetric(
                horizontal: MediaQuery.of(context).size.width * 0.096
              ),
              decoration: BoxDecoration(
                color: Theme.of(context).shadowColor,
                borderRadius: BorderRadius.circular(MediaQuery.of(context).devicePixelRatio / 0.16),
                boxShadow: [
                  BoxShadow(
                    offset: Offset(
                      0,
                      MediaQuery.of(context).size.height * 0.006
                    ),
                    color: Colors.black.withOpacity(0.15),
                    blurRadius: 4,
                    blurStyle: BlurStyle.normal
                  ),
                ]
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    data["nom_categorie"],
                    style: TextStyle(
                      fontSize: MediaQuery.of(context).size.height * 0.0237,
                      color: Theme.of(context).primaryColor
                    ),
                  ),
                  Icon(
                    FontAwesomeIcons.chevronRight,
                    color: Theme.of(context).primaryColor,
                    size: MediaQuery.of(context).size.height * 0.026
                  )
                ],
              ),
            ),
          ),
        )
      ],
    );
  },
);

score 0 · Answer 1 · answered Nov 21 '22 at 08:55

I'm not sure what you mean by integrate the indexing system but there are a few ways to go about it.

You need to keep in mind that Firestore is not meant to be used a full text search platform. Google recommends using dedicated search services such as Algolia, Meilisearch or Typesense; The later two being open source. There are some project where people have tried to do this on firebase but personally not seeing much support as Full Text search is a different animal all together.
On the flip side, if you simply want to search based on Firestore queries, you should be fine. You could also use the flutter autocomplete class. I would also recommend looking into FutureBuilder as that is the recommended way of dealing with Futures.

As for the code in your question, it's hard to help with specific Firestore query strings if you have not included the code where you actually retrieve data.

Integration of a search by Firestore field in a listview builder

1 Answers1