Flutter — Bloc Stacked Search

In this article, we will see how we can write a Bloc architecture for the search module. Our goal is to create an app with a search field that can have stacked search pages with the results.

• First things first, let’s implement a basic Bloc named Search that is creating a bloc file, an event file, states, and a repository to fetch data either locally or remotely.
• This is the event file that you would’ve created in the first go after having a basic knowledge of flutter.

search.event.dart

• Now what we want you to do is add list of strings which will store all the earlier searched phrases or strings. To save your results to save user’s time you can also create a list of your result model to store them in your bloc. Let’s call it ResultModel. Also, create one more class extending SearchEvent which will be invoked when a particular Result Page will be popped.

• Since now we have created variables to store our previous searched items, it’s time to implement the states. Here, the basic concept is to expose the whole list of data to the viewmodel and render the last element of the list because we are using stack and the last pushed data was the recent search.
• After that, it’s time to add a bloc file layer to combine these components. We have created a SearchRepo class which will fetch the data from API.

search.state.dart

search.repo.dart