How to Design an Effective Bloc State Management in Flutter Development

The comparison between different approaches in designing the bloc state management for flutter app development and speeding up bloc creation by utilizing the freezed package.

Flutter is closely related to state management. Many types and approaches of state management can be used out there. In this article, I will talk about the bloc state management.

As an introduction, a bloc consists of three main parts to manage the state of an application built with Flutter. There are State, Event, and Bloc itself. I’m going to talk about the State part specifically. There are two common ways to create or design the State of a bloc. Also, I’ll provide some tips on how to create a bloc effectively in terms of time that will speed up the development process.

Single-State Design

The first approach is by creating a single state class that holds all data or payload to be shared with the pages or widgets later. Here’s an example of what this approach looks like:

Optimization

The above code can be simplified using freezed package that is responsible for generating the boilerplate like so:

Pros

• It’s easier to access data or payload inside the state from either BlocConsumer, BlocListener, or BlocBuilder like so:

• This approach is better to implement when we want some data or payload inside the state to be persistent while the pages or widgets that consume the state are loaded.

Cons

• There must be an extra enum class, in this case, MovieListStatus that is used to distinguish one state from another when dealing with getting data from the internet.
• Because all data or payloads in the state can be accessed or exposed in any state. As an example from the above code, you can access the movieList data even when the state is not equal to success yet.

Multi-State Design

The second approach is by creating a state class that has several derived classes, each of which is responsible for a specific state in the lifecycle of a page or a feature in the application and has specific data or payload needed in that particular state. Here’s an example of what this approach looks like:

To access the state from either BlocConsumer, BlocListener, or BlocBuilder, it can be done in this way:

Optimization

The above code can be simplified using freezed package that is responsible for generating the boilerplate like so:

To access the state from either BlocConsumer, BlocListener, or BlocProvider, it can be done in this way:

Pros

• It’s resulting in more secure state management because each state has its data or payload which can only be accessed when that state is emitted.
• This approach is better to implement when dealing with the process of getting data from the internet.

Cons

• This approach is less effective if we want some data to be persistent as long as other data is changed in a certain state. Because when the state changes, the current data or payload inside the current state will be gone.

Summaries

Those are some approaches that can be taken to design state management with Bloc in flutter development. Both approaches are valid and of course, have their advantages and disadvantages. You can make use of both in different cases.

I preferred to use the second approach while dealing with getting data from the internet and the first approach when dealing with some interactive state such as form validation.

I hope this article will be helpful. Thank you! 🙌🏼