Flutter — Bloc

How to use Bloc in Flutter to Manage State

Learn to manage global state in a Flutter application

Mahmud Ahsan
Aug 26, 2019 · 2 min read
Image for post
Image for post

Bloc is another state management library for flutter applications. B.Lo.C stands for Business Logic Component. Which takes ‘Event’ as input and produces ‘State’ as output. Bloc is built on top of RxDart. To understand some concepts, how to install, and how to use it in an application please check the video tutorial.

We can divide our flutter application architecture into 3 layers:

  1. Presentation or View Layer
  2. Bloc
  3. Data Layer

So basically Bloc stands between View and Data layers.

1. Data Layer

Its responsibility is to provide data from any source. Data Provider provides raw data and the repository is a wrapper of one or more data providers.

2. Bloc or Business Logic

Its responsibility is to receive events from the presentation layer and respond with a new state. It works as a bridge between the data layer and the presentation layer.

3. Presentation Layer

Its responsibility is to render itself based on one or more bloc states. It also handles user input and application lifecycle events.

Some Concepts for Bloc

1. Events

Events are input to a Bloc. It’s a similar concept of like action in Redux. In the presentation, layer events are generated by user interaction like a button click and passed to Bloc. An event may contain some additional data.

2. States

The state is part of the application’s state. It is the output of a Bloc. When a state changed, UI components will get the notification, and based on the current state it can re-render itself.

3. Transition

The change from one state to another is called transition. It holds the current state, event, and the next state.

In Short:

  • A Bloc must extend the base Bloc class from the core bloc package.
  • EachBloc must define an initial state
  • It must implement a function called mapEventToState. This function takes incoming event as the argument. It also returns a stream of new state as output.
  • To access the current bloc state we can use currentState property
  • A bloc has a dispatch method. Dispatch takes an event and triggers mapEventToState. Dispatch can be called in the presentation layer or from within a bloc
  • onTransition is called before a bloc state is updated
  • onError can override to know bloc exception.

Here is the part of Bloc codes in the demo:

Step 1: Create Events

Step 2: Create a State

Step 3: Create Bloc

Step 4: Create BlocProvider in main.dart

Step 5: Use Bloc state and dispatch events

Level Up Programming

Enhance your programming skills

Mahmud Ahsan

Written by

I write about programming, technology, and mobile apps development. 🚀 https://thinkdiff.net

Level Up Programming

Enhance your programming skills. Learn, build, and deploy.

Mahmud Ahsan

Written by

I write about programming, technology, and mobile apps development. 🚀 https://thinkdiff.net

Level Up Programming

Enhance your programming skills. Learn, build, and deploy.

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