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: