Search Method Implementation In Flutter
By: Anubhav Gupta
Tags: Flutter App Development, API, Flutter, Implementation, Search

Introduction

While developing an app you must have fetched a list of data and you want your users to get access to the content easily and efficiently. A basic solution for that is the Search Method where you iterate through the list of data.

Prerequisites

List of Data from API.

HTTP Package.

Fetching the data from API.

I won't be explaining this part much keeping in mind that you already know how to fetch data remotely.

What we are doing is calling the function fetchUsers() in our initState which basically just makes an HTTP request decodes the JSON and converts to a list of UserModel and the Last line above adds totalUsers to the stream.

sink is where you add data, stream is where it is fetched out.

Showing the Fetched data

Here we are going to use Stream Builder and

if you see the code above that's where you receive your list(List<UserModel> totalUsers) in the snapshot. we pass that snapshot to List View builder Widget to build the list of Card which have List Tile as a child with that data.

So that’s how the data is being loaded using streams now let’s move to the actual work.

Let's Implement the Search method

Let's break it into steps to get this smooth

I need a List<UserModel> to store our searched List so let's create one, Note that I will be creating the list inside the method because we want our list to show only the current search result as this function is getting called every time we have an empty list.

void search(String searchQuery) {

List<UserModel> searchResult = [];

Next, I am adding null to the stream that is because while the search is going on meanwhile I want to show some loading indicator if you see above in stream builder we have said when the snapshot is null show loading,

userBloc.userController.sink.add(null);

Also, remember that we want to handle a condition when the text field is empty and when it is not, we want to show the complete list to the user when it is empty, remember that we have a list called totalUsers where all our data from network resides we can simply add it to stream and show the complete list and we don’t want to process further.

if (searchQuery.isEmpty) {

userBloc.userController.sink.add(totalUsers);

return;

}

Now when the search field is not empty and has some text in that case we will apply the search logic believe me it's very simple, dart is super friendly to apply even the complex logic with built-in functions and loops, the main task is to

search in totalUsers[] ==> store in searchResult[]

I want to apply search on users name (first name and last name) and if the search query contains that simply store the model in search results we can achieve that by below logic.

totalUsers.forEach((user) {

if (user.first.toLowerCase().contains(searchQuery.toLowerCase()) ||user.last.toLowerCase().contains(searchQuery.toLowerCase())) {

searchResult.add(user);

}

});

Note: I am converting both searchQuery and user firstName or LastName to lowercase in case the user searches for a user using Uppercase, it wouldn’t match.

That was it once our searchResult array is ready just add it to the stream to show the result.

userBloc.userController.sink.add(searchResult);

Here's the Complete Code :

Voila 🥂 !! You have created your App and learned how to implement search query.

Thank you for reading. If you found this article helpful. Then Do clap 👏 the post as much as you can to show your support and motivate me to write more. And if I missed something do let me know.

And yeah you can clap more than one time…. 👏👏👏👏👏👏