Bloc State Management in Flutter

Published in

Bina Nusantara IT Division

4 min readDec 19, 2022

Image From https://glints.com/id/lowongan/flutter-adalah/

In Flutter it’s okay to rebuild parts of your UI from scratch instead of modifying it. Flutter is fast enough to do that, even on every frame if needed.

Flutter is declarative. This means that Flutter builds its user interface to reflect the current state of your app

When the state of your app changes (for example, the user flips a switch in the settings screen), you change the state, and that triggers a redraw of the user interface. There is no imperative change to the UI itself. You change the state, and the UI rebuilds from scratch.

State Management is important to manage which states will be rebuilt when there is an event going on the page. State management can be done with the Stateful widget. In this tutorial, we will use bloc state management for better state management.

State

In the broadest possible sense, the state of an app is everything that exists in memory when the app is running. This includes the app’s assets, all the variables that the Flutter framework keeps about the UI, animation state, textures, fonts, and so on. While this broadest possible definition of a state is valid, it’s not very useful for architecting an app.

First, you don’t even manage some states (like textures). The framework handles those for you. So a more useful definition of a state is “whatever data you need in order to rebuild your UI at any moment in time”. Second, the state that you do manage yourself can be separated into two conceptual types: ephemeral state and app state.

How To Implement Bloc State Management In Flutter

Create New Empty Flutter Project

Import bloc package from pub dev using :

flutter pub add flutter_bloc

Create New Folder inside lib and name it bloc
Create a new dart file inside the bloc and name it example_bloc.dart

Define your Bloc, Bloc Event, and Bloc State.

For example, I want to implement the default flutter auto increment project with bloc state management.

First I will change the MyHomePage page to a stateless widget

In example_bloc.dart we will create ExampleBloc

In the MyHomePage app when we press the “+” button in the bottom right corner then the counter in the center of the page will increase. From Here we can define that pressing the “+” button is the bloc event that triggers variable change and the state that is changing is the number of buttons pressed. we create a countPressed variable to save the current number of buttons pressed then we set the initial state as 0.

In main.dart we will register Bloc in the page then create a BlocBuilder widget and set the widget that will be rebuilt when Bloc Event is triggered inside BlocBuilder which in this case is the scaffold.
Now we set the Bloc Event that triggers state change inside the button on pressed function with BlocProvider and we sent the event which in this case is (“+”) event.