Cubit, a simple solution for app state management in Flutter.

Kelven Galvão
Jul 6 · 3 min read
Image for post
Image for post
https://github.com/felangel/cubit

The Cubit is a subset of the famous implementation of BLoC Pattern: bloclibrary.dev, it abandons the concept of Events and simplifies the way of emitting states.

What’s a Cubit?

It’s a class that stores an observable state, the observation is powered by Streams but in such a friendly way that it is not necessary to know reactive programming

Use super() to override the initial state.

How to connect a Cubit to the UI?

Use a Builder similar to StreamBuilder or FutureBuilder.

The difference is the possibility of rescuing a Cubit direct from Widget Tree by Providers.

At every state change — using the emit() as said before — , an updated widget is built.

If necessary only listen to the state changes without building a widget, use CubitListener. It’s useful to call side-effects based on the current state, like alerts and navigations.

It’s possible to control when to listen or to build(buildWhen and listenWhen).

BlocConsumer is a mix of builder and listener.

How to inject a Cubit in the Widget Tree?

Cubit uses the package provider for dependency injection, that’s familiar to most developers.

The level of accessibility of a Cubit is based on Provider depth.

Example: A cubit injected at MaterialApp it’s available throughout the App.

For more information, click here.

Concrete example.

An application shows the weekly trending movies, these movies come from an external API.

Let’s solve it with Cubit.

Write an abstract class called MoviesState that extends Equatable.

Equatable is a package used to help the Cubit compare States, very useful to distinguish equal states with slightly different content.

There will be states for InitialList, Loading, Loaded Movies, and Error.

Equatable it’s just a tip.

Is used a repository in this example but the choice of external data consult approach is free.

The function will be called directly in the constructor to load the movies at class instantiation.

The function can be called from a different place too.

There will be a widget for every state, so it’s necessary to handle the type of each emitted state.

Complete example: https://github.com/irvine5k/cubit_movies_app/

WRITE TESTS!

The Cubit tests are similar to Stream or Bloc tests, so there’s no secret.

The difference of syntax between Cubit and Bloc

Image for post
Image for post

Cubit, it’s the perfect fit for simple states.

Final considerations

Cubit greatly reduced the complexity of using the Bloc package and its boilerplate.

Its strengths are simplicity, immutability, and interoperability with BLoC.

The Bloc will be built on top of Cubit in version 5, so you can use Cubit for simple states and as needed you can use the Bloc.

Want to contact me? My LinkedIN.

Flutterando

Flutterando, a maior comunidade de Dart do Brasil!

Kelven Galvão

Written by

Mobile Software Engineer at https://blubybs2.com/ and Co-organizer at https://flutterando.com.br/.

Flutterando

Flutterando, a maior comunidade de Dart do Brasil!

Kelven Galvão

Written by

Mobile Software Engineer at https://blubybs2.com/ and Co-organizer at https://flutterando.com.br/.

Flutterando

Flutterando, a maior comunidade de Dart do Brasil!

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store