---
title: "Flutter BLoC Tutorial For Absolute Beginners"
description: "Read the Flutter BLoC tutorial for beginners, learn the basic Concepts of BLoC for state management in Flutter using this BLoC beginner’s guide."
author: "Palak"
category: "Engineering"
published: "2022-11-15"
reading_time: "10 Min read"
canonical: "https://www.solutelabs.com/blog/flutter-bloc-tutorial"
---

# Flutter BLoC Tutorial For Absolute Beginners

| Bloc  | Core bloc library |
| --- | --- |
| Flutter_bloc | Fast, responsive Flutter Widgets built to work with bloc in mobile applications. |
| angular_bloc | Rich, fast, and reactive Angular Components built to work with bloc to build lightning-fast applications. |
| Hydrated_bloc | Added support for persisting and restoring bloc states to the state management library. |
| Replay_bloc | Includes undo and redo functionality for the bloc state management library. |

## What Is Flutter Bloc?

In Flutter applications, the Flutter BLoC is used to manage the state. The [flutter state management](https://www.solutelabs.com/blog/flutter-state-management-everything-you-need-to-know) feature allows handling all possible states of the application easily. It is easy to grasp the concept of the Flutter bloc. This library has excellent [documentation](https://bloclibrary.dev/#/) with a lot of examples. It's also one of the most commonly used libraries in the Flutter community.

It is powerful since it allows the creation of all kinds of applications. For instance, the Flutter bloc is appropriate in both production and learning environments.

## Flutter Bloc: An Overview

There are several pub packages included in the Bloc:

It is necessary to install the [Dart SDK](https://dart.dev/get-dart) on the computer before one can use bloc.

## Installation

First, our pubspec.yaml needs to include the bloc package as a dependency for a [Dart](https://dart.dev/) application.

![image](https://cdn.sanity.io/images/0mnqm898/production/ab3107d26342efe8d8178974e5aba2ab3a69ec4d-587x75.png?w=1200)

As a dependency, the flutter_bloc package needs to be added to pubspec.yaml for a Flutter application.

![image](https://cdn.sanity.io/images/0mnqm898/production/1ac840b14b8ee044d1d282817c3c1f85b8a80fbe-718x67.png?w=1200)

Similarly, as a dependency, the angular_bloc package needs to be added to pubspec.yaml for an AngularDart application.

![image](https://cdn.sanity.io/images/0mnqm898/production/f65efcb499e8346244f712f49b4b815ca88f1cc4-753x58.png?w=1200)

The next step is to [install](https://bloclibrary.dev/#/gettingstarted?id=installation) Bloc.

If it does not have a pubspec.yaml file, make sure to run this command from the same directory as pubspec.yaml.

- If using Dart or AngularDart, run **pub get**
- If using Flutter, then run **flutter packages get**

## Import

We can now import bloc into main.dart after successfully installing bloc.

![image](https://cdn.sanity.io/images/0mnqm898/production/656fc02d4bbd6932ac01ff32530dcb96d99245a4-1677x349.png?w=1200)

## Bloc

A [Bloc](https://bloclibrary.dev/#/coreconcepts?id=bloc) is a more advanced class that incorporates events rather than functions to trigger state changes. Unlike Cubit, Bloc also extends BlocBase, which means its API is similar. A Bloc receives an event, which then changes the incoming event into an outgoing state rather than directly calling a function on the Bloc and emitting a new state.

### Creating A Bloc

A Bloc can be created to specify what events it will process. Blocs receive events as input. They are often added when users interact with a page, such as by pressing buttons. As with Blocs, Cubits also define the state they will manage.

![image](https://cdn.sanity.io/images/0mnqm898/production/20dd1d4515078f51320148fca6ac1ed33ed15b96-1663x340.png?w=1200)

The superclass must also be passed an initial state, just as when creating the CounterCubit.

### State Changes

In Bloc, event handlers are registered using the on<Event> API. Any incoming event is converted into one or more outgoing states by an event handler.

![image](https://cdn.sanity.io/images/0mnqm898/production/7ebd27bdbd8c242c1816c7b8af3f58b939327563-1676x347.png?w=1200)

The EventHandler can then be updated to handle CounterIncrementPressed

![image](https://cdn.sanity.io/images/0mnqm898/production/1a5ce916f9eb15116d2f22b8c5c5e8c671e7d120-1672x460.png?w=1200)

In the above snippet, we are registering an EventHandler to handle CounterIncrementPressed events. A state getter and emit(state + 1) are available to access the current bloc state for an incoming CounterIncrementPressed event.

### Using a Bloc

Let's create a CounterBloc instance and use it!

#### Basic Usage

![image](https://cdn.sanity.io/images/0mnqm898/production/c355d401159e40d27b1ebfda132e76c020fe6ea1-1671x515.png?w=1200)

As shown in the above code snippet, we create a CounterBloc instance. This is the initial state of the Bloc, since no new states have yet been emitted. After that, we add the CounterIncrementPressed event to signal a change in state. Lastly, we close the internal state stream on the Bloc by printing the state of the Bloc, which has changed from 0 to 1.

#### Stream Usage

Just like with Cubit, a Bloc is a special type of Stream, which means we can also subscribe to a Bloc for real-time updates to its state:

![image](https://cdn.sanity.io/images/0mnqm898/production/83132b0885c5c7872e208c0d6230b18e8f5a6d75-1689x521.png?w=1200)

Using the above snippet, we're subscribing to the **CounterBloc** and calling print on every change in state. We then add a **CounterIncrementPressed** event which triggers an **on<CounterIncrementPressed>event handler** and emits a new state. In the end, we call to **cancel** the subscription and close the bloc when we no longer require updates.

## Observing A Bloc

Bloc is an extension of BlocBase, which means we can observe all changes to a Bloc's state using onChange.

![image](https://cdn.sanity.io/images/0mnqm898/production/1db713b6439316fc6f90ac5a97cebe2e470c2f31-1675x639.png?w=1200)

Using main.dart, we can update it to:

![image](https://cdn.sanity.io/images/0mnqm898/production/a125f3bef0d71c276e250af2e107e571b363d8f5-1680x352.png?w=1200)

Running the above snippet will produce the following output:

**Change { currentState: 0, nextState: 1 }**

We are able to capture information about what triggered a state change in Bloc because it is event-driven, which makes it unique from Cubit.

By overriding onTransition, we can accomplish this.

It is called a transition when one state changes to another. There are three types of transitions: the current state, the event, and the next state.

![image](https://cdn.sanity.io/images/0mnqm898/production/de4868b0d34c7e3b99627c8f6b1a4bd1f274bcd4-1327x827.png?w=1200)

We should now see the following output if we run the same main.dart snippet again:

**Transition { currentState: 0, event: Increment, nextState: 1 } Change { currentState: 0, nextState: 1 }**

### BlocObserver

In the same way as before, a custom [BlocObserver](https://bloclibrary.dev/#/coreconcepts?id=blocobserver-1) can override onTransition to watch all transitions in one place.

![image](https://cdn.sanity.io/images/0mnqm898/production/89b659f224c3e5965b3abefec37a715b93c88a00-1203x815.png?w=1200)

As before, we can initialize the SimpleBlocObserver as follows:

![image](https://cdn.sanity.io/images/0mnqm898/production/209e92cfaf48bdae6228d59dde4e47a434b00e39-1179x286.png?w=1200)

Upon running the above snippet, we should see the following output:

**Transition { currentState: 0, event: Increment, nextState: 1 } CounterBloc Transition { currentState: 0, event: Increment, nextState: 1 } Change { currentState: 0, nextState: 1 } CounterBloc Change { currentState: 0, nextState: 1 }**

The Bloc instance also provides us with the ability to override onEvent, which is called whenever a new event is added to the Bloc. The same goes for onChange and onTransition.

![image](https://cdn.sanity.io/images/0mnqm898/production/1bcacada8f8883bf97f4762dcd8f73a62edd27fb-1447x793.png?w=1200)

![image](https://cdn.sanity.io/images/0mnqm898/production/2632023711a2761bc70cfc0a332083b66350c3e0-1455x735.png?w=1200)

![image](https://cdn.sanity.io/images/0mnqm898/production/ae1d19bcd7c36f40e7d322806cccfd4554cfabd1-1422x420.png?w=1200)

![image](https://cdn.sanity.io/images/0mnqm898/production/4bffcee90b3aadc3e60db8cd6139fae963dfe3c3-1445x291.png?w=1200)

Running main.dart again should produce the following result:

**Increment CounterBloc Increment Transition { currentState: 0, event: Increment, nextState: 1 } CounterBloc Transition { currentState: 0, event: Increment, nextState: 1 } Change { currentState: 0, nextState: 1 } CounterBloc Change { currentState: 0, nextState: 1 }**

## Flutter Bloc Tutorial For Timer

The following tutorials provide detailed instructions on how to build time, counter, login, weather, and a lot more apps using Flutter's Bloc library. These tutorials are worth checking out:

- [Counters](https://bloclibrary.dev/#/fluttercountertutorial)​
- [Timer](https://bloclibrary.dev/#/fluttertimertutorial)​
- [Infinite List](https://bloclibrary.dev/#/flutterinfinitelisttutorial)​
- [Login](https://bloclibrary.dev/#/flutterlogintutorial)​
- [Weather](https://bloclibrary.dev/#/flutterweathertutorial)​
- [Todos](https://bloclibrary.dev/#/fluttertodostutorial)​
- [Firebase Login](https://bloclibrary.dev/#/flutterfirebaselogintutorial)​

***Also, Read:*** [Flutter Tutorial for Beginners](https://www.solutelabs.com/blog/flutter-tutorial-for-beginners-step-by-step-guide  )​

## Conclusion

For further learning, we suggest reading the detailed documentation. In addition, don't forget to check out the example tutorials given in the blog. Using good state management is essential when [building flutter applications](https://www.solutelabs.com/flutter-app-development-services).

To summarize, Flutter is great because it's understandable and not complicated to use. It also has a lot of management options for views or [widgets](https://www.solutelabs.com/blog/flutter-widgets-a-brief-guide).

## Frequently asked questions

### What is Flutter BLoC library?

Felix Angelo created and maintained a state management library called Bloc. Developers can use it to implement the Bloc design pattern in their Flutter applications.

### Is 8 GB RAM enough for Flutter?

RAM should be at least 4 GB. However, 8 GB is recommended. A 1280 x 800 minimum screen resolution is required, and a minimum of 2GB of available disk space (500MB for IDE and 1.5GB for Android SDK and emulator system image) is recommended.

### Which IDE is better for Flutter?

Flutter is best developed with Android Studio, one of the most popular IDEs supporting the development of Flutter applications. Afterward, IntelliJ Idea and Visual Studio both offer good results.

### Does Flutter support 120 fps?

In Flutter, the rendering engine is Skia, which consistently delivers 60 frames per second - and can reach 120 frames per second on some devices. Animations are especially noticeable for their high refresh rate.