Adding Algolia Search to your Flutter Application 🕵🏾‍♂️

A very important component in mobile applications is the search bar, and how it conducts search activity throughout your application. If an application is connected to a database and operates on its own backend system, developers are required to program their own search logic. Search results are then consumed by the mobile client through an API, and although this can work on SQL based databases, searching NoSQL documents efficiently, is near impossible. For example, if a user searches for their friend on a social media platform, applications are expected to provide a quick suggestion or hint at a possible autocomplete result for users that exist in the registry. The prefixes of the search query are used to predict possible results using enormous Trie data structures shown below but when the database has no strict schema, a read will be performed on every single document.

Thankfully we have Algolia to help us facilitate search through NoSQL databases such as Google’s Firestore. This tutorial will showcase how one could make a social media platform where users can search for other users.

First step: Setting up Algolia

The first step is to set up your account on Algolia and retrieve your Application ID and Admin API key from the API Keys panel on the left.

Keep note of these API keys and now we can move onto coding our Firebase typescript trigger functions. As the name suggests, when a new user document is created, updated or deleted in the Firebase database, the respective function will be triggered. This file is located in the project directory under:

APP_NAME/cloud_functions/functions/src/algolia/users.f.ts

First we will need to download the algoliasearch npm module by running the following command in your terminal:

npm install algoliasearch

You will now need to enter your application ID, and admin ID in the variables at the top named “ALGOLIA_APP_ID” & “ALGOLIA_ADMIN_ID”. The index name can be set to anything and will be name shown on the Algolia dashboard. In this case, we will name it ‘users’.

It is important to note that with the creation of each User model in Algolia, we will need to populate the objectID property and we will do this by assigning the document ID to it.

All we need to do now is deploy our firebase trigger function to the cloud! Run the following in the terminal:

sudo firebase deploy --only functions

Now every time a new user is created on Firebase, we can log into our Algolia dashboard, navigate to the ‘users’ index and see something similar to the following:

We also need to configure our data so it can be searched by certain properties which is done under the configuration tab in the index dashboard.

That’s all we need to do on Algolia!

Trust me, we’re almost there!

Showing our search results on our client

The latter part of this tutorial will go into how we can showcase our Algolia search results on our client application. In this case, I will be showing how to do it on a mobile Flutter application!

The first thing we need to do is add the Algolia Flutter package to our pubspec.yaml file, save the file and run “flutter packages get” in the terminal.

With the Algolia dependency installed, the next thing we will need to do is setup our Algolia application on our client, and create our search methods that will return snapshots of our data.

Tip: I will show you how to add a timer to reduce unnecessary requests to Algolia that will run up your bill. We will only search after there is an input in the textfield and when the user has stopped typing after a 0.5 second pause.

Final code + product

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Solving “invalid byte sequence in UTF-8” errors in Ruby

Gladius Smart Contracts Security Audit

SubDAO Toda Moon Roadmap

FindPeaks() of a 1024 x 116 Matrix

CS731p Fall 2020 Week 5: Nathan Eisenberg

Plan for the time after Magento 1 eol — Magento-LTS

Why does my IIR filter become unstable when I change

A data platform engineer’s very bad day and what they learned from it

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jasdip Chauhan

Jasdip Chauhan

More from Medium

Flutter : How to write flutter plugin

Flutter Auth Flow | Firebase_auth mail auth

Stream Location in Flutter

Flutter checkbox without setState()