Introduction 🎉
BLoC stands for Business Logic Controller. It was created by Google and introduced at Google I/O 2018. It is made based on Streams and Reactive Programming.
I can assure you that every intermediate-level Flutter developer in their development lifetime heard about Bloc or maybe tried to learn bloc. Bloc is one of the most popular state management choices among developers because it has rich documentation and is well maintained. But yes, there are some downsides as well, for example, a lot of boilerplate codes.
We will implement API integration at first, then persist the state so that when the user closes the app, it can maintain the state or load the data from the local device saved from the last API call to put it simply.
Note that after we kill the app, it starts right back where it left off. In addition, after it has loaded the previous (cached) state, the app requests the latest API data and updates seamlessly. Let’s get started!
Steps đź‘Ł
1. Configuring the Flutter Project
2. Add the datamodel
3. Creating the bloc
4. Creating the bloc state and event
5. Creating the Bloc Repository
6. Implementing the bloc
1. Configuring the Flutter project ⚙️
Let’s add the necessary packages that we’re going to use throughout the application.
Copy the dependencies to your Pubspec.yaml file. I am using the latest version available now at this moment.
Then we need to install it with:
flutter packages get
You will get to understand everything as we go ahead.
2. Add the datamodel đź“ł
We will implement the “FREETOGAME API”. For this, we have to make a datamodel of the API’s response. I have used the following website to make the datamodel class. It’s pretty easy, copy the JSON response and paste it on the website. The website will generate a class for you.
Website Link: https://ashamp.github.io/jsonToDartModel/
Don’t forget to tick the Null Safety checkbox!
Another datamodel that will contain the list of the games refers to the code below.
The above code will show you some errors, as you can see that the 5th line contains a code that indicates that this file is part of another file that needs to be generated. Another thing, look at the 7th line, it is indicating that we will serialize so that we can save the response for later use.
Open a terminal and run the below code.
flutter packages pub run build_runner build
3. Creating the bloc
It contains the logic behind the main bloc. Now we have to make the event and state as well.
4. Creating the bloc state and event
There can be three(3) states.
- Game list is loading -> GamelistLoading
- Game list loaded -> GamelistLoaded
- Game list cannot be loaded -> GamelistError
5. Creating the Bloc Repositoryđź‘ľ
We are calling the API using the HTTP package form from this file or class.
6. Implementing the blocđź›
This portion contains the UI and the Bloc implementation. You can check the main function. It is instantiating the hydrated bloc in the temporary directory.
Note that after we kill the app it starts right back where it left off. In addition, after it has loaded the previous (cached) state, the app requests the latest API data and updates seamlessly.
Congratulations! 🎊
You just integrated an API with HydratedBloc that has Caching.
Contact Me🌎
YouTube Channel: Coding with Imran
Twitter: @ImranSefat
LinkedIn: MD. Al Imran Sefat
Facebook Page: Coding with Imran
Top comments (2)
Interesting, I quite enjoyed this post. I have not used the bloc pattern much in flutter so I'm a bit of a newby.
I have a question though, where exactly is the cache implemented or what part handles the caching? does "HydratedBloc" cache stuff for you automatically? Or have I missed something?
I also see you setup HydrateBlock.storage, am I correct in asuming that the the state/data is also persistent in disk? Or is the storage just to store the cache?
hydrated_bloc exports a Storage interface which means it can work with any storage provider. Out of the box, it comes with its own implementation: HydratedStorage.
HydratedStorage is built on top of hive for a platform-agnostic, performant storage layer. See the complete example for more details.
Copied from pub.dev
See the details here: pub.dev/packages/hydrated_bloc