Cache API Integration with HydratedBLoC in Flutter (Source Codes Included)

Imran Sefat — Wed, 27 Oct 2021 19:25:15 +0000

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

Firebase Authentication with GetX in Flutter

Imran Sefat — Sat, 16 Oct 2021 15:53:21 +0000

Introduction 🎉

You know about GetX. It is an extra-light and robust solution for Flutter. It combines high-performance state management, intelligent dependency injection, and route management quickly and practically.

I’m going to be honest; I’m not that pro at using GetX. So one day, I wanted to use GetX to make a flutter app with firebase authentication to understand better, but I was confused. Then it took me some time to figure out how it was working, and eventually, I succeeded and fell in love with the world of GetX.

Let’s Get Started 🎯

I will assume that you have a starter template setup to enter email, password, or a button to login with Gmail. Let’s list the steps necessary to make the authentication process.

Steps 👣

1. Configuring the Flutter Project

2. Connect App to Firebase

3. Creating the Auth Controller

4. Inject the auth controller

5. Login or Signing up Users

6. Success

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.latest version available now at this moment.

2. Connect App to Firebase 🤝

Now we have to connect our app to firebase. First, go to the firebase console and create your project if you haven’t already. You will see an option to add an app to firebase. Depending on your preference and requirement, do that. The steps are pretty straightforward, and firebase will show you what to do and how.

Don’t forget to enable the Email/Password Sign in and Google Sign In methods.

3. Creating the Auth Controller 🎮

First, let’s make a constant file for the sake of simplicity and not to get confused or code duplications. Copy the below codes and paste them into your dart file inside the lib folder.

Suggestion: Make a folder inside of the lib folder titled Constants.

Now let’s create the Auth Controller where all of our business login related to Firebase Authentication will work. Just copy the below codes and paste them into your dart file inside of your lib folder.

Suggestion: Make a folder for titled Controller.

4. Inject the Auth Controller 💉

We have created the Auth Controller, but how are we going to use it? Let’s hop into the main.dart file and make some changes to our code.

Here, we are initializing the firebase and injecting the AuthController instance in the 4th line.

Our dependencies are completed and initialized. Now let’s sign up some users.

5. Login or Signing up Users 🙋‍♂️🙋‍♀️

I assume you have a basic or super beautiful Signup or login screen ready. If not, you can copy my code for the screen, but note that it’s a super simple screen.

The above code is pretty self-explanatory. There are just two (2) text fields for email and password, one button to login and one to Register / Signup. The last elevated button is for the google authentication popup.

6. Success 🎉

You just implemented Firebase Authentication in Flutter with GetX.

I have a Youtube Channel Named “Coding with Imran”

Do subscribe to my channel if you want to get future updates!

DEV Community: Imran Sefat

Cache API Integration with HydratedBLoC in Flutter (Source Codes Included)

Introduction 🎉

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 ⚙️

2. Add the datamodel 📳

3. Creating the bloc

4. Creating the bloc state and event

5. Creating the Bloc Repository👾

6. Implementing the bloc🛠

Congratulations! 🎊

Contact Me🌎

Firebase Authentication with GetX in Flutter

Introduction 🎉

Let’s Get Started 🎯

Steps 👣

1. Configuring the Flutter Project

2. Connect App to Firebase

3. Creating the Auth Controller

4. Inject the auth controller

5. Login or Signing up Users

6. Success

1. Configuring the Flutter project ⚙️

2. Connect App to Firebase 🤝

3. Creating the Auth Controller 🎮

4. Inject the Auth Controller 💉

5. Login or Signing up Users 🙋‍♂️🙋‍♀️

6. Success 🎉