Implementing Search in Flutter with Hive Db

So you have decided to use the blazing fast, local, no-sql database for flutter called Hive. And you want to implement search, fetching data from it. Then this is the article will help you do just that. So without further ado lets get started !

NOTE: This article is written keeping in mind that you already know how to make use of Hive and already have a functional app. Also if you are stuck anywhere, I’ll be including the Github* repo which you can refer.

*The app linked is a Simple Contacts App which will let the user add contacts and save them locally, on which we will perform the search operation.

So, there are few ways you could make a Search bar, like using the text editing controller , but why do the extra effort when we already have just the thing — the Search Delegate. So as a first step we will make a search icon inside the appBar’s actions list and then put — showSearch(); in the onPressed().

You will then reminded of that it needs some necessary elements. Those are context & delegate . In context, you can just pass in the context, so it knows where it is at or in which widget specifically.

For the delegate , we will make a custom widget and call it — SearchWidget which will extend the SearchDelegateand of the type Contacts , which is Hive generated file based on the model class ‘Contact’ .

class Contacts {
String name;
String imageURL;
String number;
Contacts({this.name, this.imageURL, this.number});}

By doing that, the IDE will prompt you that there is an error, it is trying to tell you to Create 4 missing Overrides, after you quick fix those errors your newly made widget will look like the code below.

Now you can pass this SearchWidget() in the delegate.

Now, these words — action& leading , might seem familiar to you. These are also there in the appBar. And yes, they mean the same here too, the buildLeading part is for adding something at the start, and buildActionsis for adding something at the end. We will add an IconButton at the end of the search bar to clear our query entered. And also another IconButtonat the start to go back to our main Screen.

Note: One cool about SearchDelegate is that the query (a setter, which is of type String) is available everywhere in SearchDelegate, which basically mean, anything you type in the Search bar you can be accessed with this. So we can easily clear everything by simply putting — query = ‘ ’ ;

So these were the easy part, now lets dive into the main crux of this whole article.

The part buildSuggestions and buildResults are basically the same, the only difference is that as the name suggests with buildSuggestions, we can show users the suggestions to choose from, andbuildResults to show the results after searching for the desired query. In our case we will show a single widget which will do both the filtering as well as showing results.

So, lets get started by making the Widget, it would be a StatelessWidget. Lets call it SearchFinder, which will take in thequeryas a parameter and which will return a ValueListenableBuilder(). It’s a listener which will update the widget build, when a value we are listening to changes. In this, the value we will be listening will come from our Hive box and we will save it in the variable contactsBox like this —

final contactsBox = Hive.box<Contacts>(‘contacts’);

(Note : It’s important that you define the type of the Box you have made. Here we made it based on our Model class — ‘Contacts’, so make sure to add that as a type)

The other part is the builder, in which we will return a ListView.builder . But before that we will write our filtering logic. So the logic should check, if the query entered is empty or not. If it isn’t, then filter the results that matches the query.

var results = query.isEmpty ? contactsBox.values.toList() // whole list
: contactsBox.values.where((c) => c.name.toLowerCase().contains(query)).toList();

After our filtering logic is set. Then we can use it like this —

final Contacts contactListItem = results[index];

This will help us to show the name, image and number of the matched contact. And that’s it we are done. Here’s the whole code of SearchWidget. And also adding the Repo link for you to check the whole project.

Here’s how it looks -

Search in Flutter with Hive

That’s all for this article, I hope it helps! If it did then please consider 👏👏 (also did you know, you can do it 50 times in a row) or you can also buy me a coffee. Your simple gesture motivates me and gives feedback for my work. Thanks!

singlesoup/contacts_app

Himanshu is making fun mobile open source app