Cubit + Freezed combination to manage the state powerfully in Flutter (2022 version)

In the previous part (BloC Pattern For Login: cubit_login in Flutter), we created a login application with Flutter using cubit which is a subclass of the BLoC (I called like this actually, since it has some of the BLoC properties). When we create the previous version of the login app, we did not use the “Freezed” package. In this part, we will use it, and we’ll see how does the Freezed package powerful for our state management.

What will we build?

We are going to recreate our cubits actually with the Freezed package. We will use the same UI, which was used in the previous part since we are going to focus on state management in this Medium article. Briefly, we can say, we will update the router and state management of the previous project, and it will be better.

If we do not use the Freezed package, we MUST write all of the boilerplate codes in our main state file. In this scenario, let’s compare the codes with the Freezed and without the Freezed package.

auth_state.dart (without Freezed)

auth_state.dart (with Freezed)

Here you can say what is the difference? Is it just 7 (13–6) lines? Of course not! Let’s see what does Freezed package does for us (227 Lines, sorry for this).

So, we do not have to do all of them, and also we do not should modify this code by hand as it says. Let’s see another example (of course without 200 lines codes).

login_state.dart (without Freezed)

login_state.dart (with Freezed)

With Freezed, we create a constructor, and If we wish, we give initial values to them with the “@Default()” tag (We do not have to write them If you import the freezed to the pubspec.yaml file and create cubit with bloc extension, then it will create default cubit with freezed package), and that’s it!

Since we glanced at the basic freezed package in cubits, let’s see now how can we create it properly.

Freezed Package with cubit

After creating cubits, we will have such codes:

So do not panic If you see (you will, I am sure) red lines/errors in the code. We will run the magical code with build runner to do the magic of the freezed package.

Magical code: flutter pub run build_runner watch — delete-conflicting-outputs

Paste this code to the terminal, after that you will get 1 (or more) output(s). If you do not want the open build runner all the time, you can change the watch to build.

What If I want to create special methods in the state?

So, you need to use dot with underscore with the constructor, like:

const SignUpState._();

After that, you can create special methods like SignUpState.loading(), etc.

What about Cubits, not the state?

For cubits, we can use SignUpState.initial() for the constructor. Apart from that, when we update the states, we know we need to use emit for this. When we use emit, we can easily reach the copywith method via state.copywith. Let’s see an example for the cubit usage with the Freezed.

auth_cubit.dart

Since we did not give a default value to the isSignedIn variable, we wrote with the required keyword. So we can give value to the constructor. In this example, If the user is null, we say update the state (isSignedIn) to false, but If the user is not null, then update with true value. It is pretty easy, right?

It’s time to use flow_builder to route users according to the “state”

flow_builder package provides routing the screen according to our state. For example, If our user has logged in, then the user should stay on the home page, or vice versa If the user has not logged in, then the user should stay on the sign-in page. So, how can we use the flow_builder package easily?

Here updated landing page. When the app starts, then It works firstly after bloc provider. We have FlowBuilder<ourState>, pages and state again. For the pages, we create static final methods to call them to route according to the state.

static Page page() => const MaterialPage<void>(child: HomePage());

Conclusion

I have already created an app on Google Play Store, whose name is İYTE Cepte, for my university (Izmir Institute of Technology), and when I create this app, I did not use the freezed package, and also flow_builder. After some time, I realized that they provide power for us. You can find all of the codes here. I hope that this tutorial helps you understand how you should use cubit_login with the freezed and flow_builder packages. Feel free to ask any questions in the comments section.

Thank you for reading, stay tuned!

Cheers.