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.
- 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 the
src 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:
repositories package under the
src package. Now create two files in the repositories package i.e
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
getImageFromUrl(String url) : As the method name suggests this will download the image from the URL and return it in bytes.
repository.dart file and paste below code in it:
This will expose the
image_provider methods to the upper layers i.e the
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
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
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
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
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 the
ui 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
Before you run the project make sure to add these two images to your
assets folder. Rename these as
Running the app 🏃
A small demo of the app we just created:
Find the complete here
We have reached the end of this article. Hope you learnt a use case of RxDart which will help you add such a feature in your app as well. If you run into issues or have any sort of doubt, leave a comment. You can also follow me on Twitter or connect with me on LinkedIn.