Cubit State Management Flutter
In flutter, state management is like a life support system where the whole App depends on, there are different state management techniques like Redux, MobX, bloc, flutter bloc, provider, and cubit. Actually Cubit is a cocktail of Flutter Bloc and Provider where we use some features of both techniques and In this article, we are going to learn how to use and implement Cubit, So before we go for its implementation firstly let’s have some cursory knowledge of it.
About Cubit :
Cubit is a lightweight state management solution. It is a subset of the bloc package that does not rely on events and instead uses methods to emit new states.
Every cubit requires an initial state which will be the state of the cubit before emit has been called. The current state of a cubit can be accessed via the state getter.
The cubit package is a collection of different packages for cubit such as cubit, flutter cubit, hydrated cubit, replay cubit, cubit test, and a cubit angular and all these have their own functionalities that they bring in the scenario.
In all these packages the main package cubit used if you have plain old dart project and want to use functionalities of cubit state management.
Flutter cubit
flutter cubit consists of all the functionalities of the main cubit package and also provides other different functionalities for different kinds of widgets and one important thing it also uses the functionalities of provider package.
Hydrated cubit
It persists and restores data in the hive database and you can get the data and read it out after you have restarted your application.
Replay cubit
It allows you to redo and undo certain states, for example, you if want to delete your data or want to retrieve it again.
Remaining two packages cubit test is used for testing the framework and cubit angular is used in the angular framework
“ However, All the packages are divided into different parts for the sake of Simplicity and Easiness but all are in the single Repository which makes it better in use for different purposes “
Implementation
- First, we add the dependencies in pubspec.yaml file
flutter_cubit:
replay_cubit:
cubit_test:
you can add cubit packages(explained above) according to your need.
then we need to create a class that would extend cubit, as here in the given example we are creating a class CounterCubit which is extending the cubit package and it will notify the function when the state will be changed.
It works like provider class for changing state where emit() function notifies to the widget where we are changing states, same like changenotifier() does in provider
https://gist.github.com/shivanchalaeologic/b8abfbcf69a2f9c2195816b43296286e#file-counter_cubit-dart
In the next step, we create CubitObserverClass() (optional) where we can observe transitions in our app or changes in states. We only need to extend the CubitObserver package, Here in this above code snippet, there are two methods increment and decrement, In which we have used that emit function which will increase and decrease the count of the value which we have defined in super().
https://gist.github.com/shivanchalaeologic/caf120fd1189cdacaa8e7287f229699a#file-cubit_observer-dart
and in onTransition() method we can see responses of states as you can see in the given picture below
But you need to initialize cubit observer first, we initialize it in the main() function
Now you need to route class with CubitProvider() and then you need to mention your cubit class,
if you have multiple classes then you can also use Multipovider, it is same as we use in provider package so if you are already acquainted with provider then you must not face any issue here
https://gist.github.com/shivanchalaeologic/527dd71afb9ad25756c14f67aea0cc45#file-material-dart
so till now, we have created classes form where we can change states and observe them but till now we have not accessed states so for accessing states in cubit we need to use CubitBuilder(), it is like StreamBuilder() and FutureBuilder() and also consists same implementation technique.
https://gist.github.com/shivanchalaeologic/0526295bfff85fd114862cd70804f873#file-home_screen-dart
Here in the above example, you can see we have wrapped our ListViewBuilder() by CubitBuilder() which will emit states when we will change it, as you can see states are being changed in FloatingActionButton() by calling increment and decrement functions mentioned in CounterCubit class.
Now are ready with Cubit State Management Technique, and you can see in the video how states of the list are changed
Conclusion
Cubit is a combination of the bloc and provider packages where you get riddance from events and rely on methods while you get ease in managing it as it helps to implement it with ease without any boilerplate code so till now it is one of the best combinations of the two state management techniques.
You can find the source code from here.
flutter-devs/cubit_state_management
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙
If this article has helped you a bit and found interesting please clap!👏
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
