Instant Image search using RxDart in Flutter
Making a network call while you type in the search bar
Hey Folks! I am back with another brand new article on Flutter. This time I will be talking about a use case of RxDart in Flutter. In today’s world, every app has a search bar at the top of the screen as you type you would like to see the results instantaneously instead of typing and then pressing a Search button to fetch the results. So in this article, I will show you how we can retrieve results from the network as we type something in the search bar.
Content
- Setting up the project
- Converting search query to result using RxDart
- Sharing the image
- Creating the UI
- Running the app 🏃
Setting up the project
For this project, we will be using the Unsplash API to retrieve a list of images based on a query. Below is the screenshot of the endpoint we will hit to get the results:
After getting the API key it’s time to set up our Flutter project. Create a new Flutter project and update your pubspec.yaml file with the following dependencies:
It’s time to create the model class for the response we get from the Unsplash search photos API. Go to Quicktype site and paste the JSON response there to generate the model class in Dart. You will get the following output:
Now create thesrc package under the libs package in your project. Under src package create the models package. Now create a dart file under the models package and paste below code in it:
Create the repositories package under the src package. Now create two files in the repositories package i.e repository.dart and image_provider.dart . Let’s start with image_provider.dart . Paste below code in it:
This class consist of simple network calls logic. Let’s go through the code step by step:
getImagesByName(String query) : This will return a list of photos based on the query provided. It will either return a success or error state.
getImageFromUrl(String url) : As the method name suggests this will download the image from the URL and return it in bytes.
Open repository.dart file and paste below code in it:
This will expose the image_provider methods to the upper layers i.e the blocs layer.
Now create a state.dart file under repositories package and paste below code in it:
This is a generic class which will help to manage the current state i.e success or error based on the network response.
Now create the blocs package under the src package. Now create two files in the blocs package i.e bloc_base.dart and home_screen_bloc.dart . Let’s start with bloc_base.dart . Paste below code in it:
This abstract class will hold all the common methods that every bloc needs to override. We need dispose method in every bloc where we will dispose of all the open streams to avoid memory leaks.
Converting search query to result using RxDart
Now open home_screen_bloc.dart file and paste below code in it:
Let’s under the above code step by step:
init() : This is the method where we will initialize all the required objects. We will initialize the query object which will hold the search string entered by the user.
photosList() : This is the core logic of the whole app i.e converting the query into a Photos object. This object will hold all the image URLs.
In the above code, we are using a set of RxDart operators to perform the network request based on the query. Let’s discuss each operator in little detail:
debounceTime(Duration duration) : This will make sure that we are not making a network for each character entered by the user in the search field. We want to make the network call after some delay so that the user gets the time to enter a query.
where() : This will filter the items based on the condition provided. We only want non-empty queries to perform a network request. If a user just enters whitespace even that is considered a character and if not checked will lead to a network call.
distinct() : This operator ignores duplicate consecutive items. This means that it will ignore repetitions of an item until they change: if the same item is being emitted multiple times repeatedly, the duplicates will be ignored, until a new item is emitted e.g: if you input cameeera then the distinct() operator will emit camera as the output.
transform() : This will transform our query to Photos object. Let’s see how it does that:
In the above code, we are getting the query as String and making a network call to get the results based on the query. Once we have received the result either success or error, we will be adding it to the stream.
Sharing the image
The below code will be responsible to download the selected image from the URL and show a sharing dialog to the user to select the specific app they want to share the image:
Creating the UI
Now create theui package under the src package. Since we have only one screen which is our home screen so let’s create the screen-specific package homescreen under the ui package. Create a file home_screen.dart inside the homescreen package and paste below code in it:
In the above code, we are just taking input from the user, getting the list of images as per the input and displaying them in a ListView .
Before you run the project make sure to add these two images to your assets folder. Rename these as search_image.png and user.png:
Running the app 🏃
A small demo of the app we just created:
📝 Read this story later in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.