In Flutter applications, the Flutter BLoC (Business Logic Component) is used to manage the state. It helps separate business logic from UI. It ensures that the user interface is not strongly liaison with the business logic, making the app more versatile. 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.
Key Concepts of BLoC
- Streams: Streams help in managing user actions and data, and how it flows through your app. In simple words, streams are like rivers that carry messages(messages can be anything, such as user actions or data updates).
- Sink: It's where you input data that you want to process. Data is poured into the sink, which then travels through it. A sink is like a place where you pour water into a stream.
- Stream Controller: A Stream Controller helps manage the streams, sinks and data, ensuring that data flows correctly through the system. In other words, it is a controller that controls the flow of water in the streams.
- Stream Builder: It updates the UI on the based of latest data in the stream. It updates the part of the app it's watching whenever new data comes down the stream through the sink. It's like a watchman that keeps an eye on the stream.
Installation of Flutter BLoC package
Step 1: Create a new Flutter Application
Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.
flutter create app_name
To know more about it refer this article: Creating a Simple Application in Flutter
Step 2: Add Dependencies
To add the dependency to the pubspec.yaml file, add flutter_bloc as a dependency in the dependencies part of the pubspec.yaml file, as shown below:
pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_bloc: ^8.1.6
cupertino_icons: ^1.0.6
Now, run the below command in the terminal.
flutter pub get
Or
Run the below command in the terminal.
flutter pub add flutter_bloc
Import the BLoC Package in the Dart Code
To use the BLoC in your Flutter application, follow the given steps.
Step 1: Install the Bloc Extension
Install the following bloc extension in VSCode.
Note: If You are not using Vs Code or Don't want to automate the folder structure then, Skip this step and do it manually by creating every file.
It will helps you to generate the boilerplate code and folder structure automatically, for that follow the steps to below.
- Create a folder
After installing the VSCode extension, create a new folder inside the lib folder and name it Home.
- Select New Bloc
Now, Right click on Home folder, it will display a option named 'Bloc: New Bloc' select that option.
- Enter Bloc Name
After selecting New Bloc, it will ask for the name of the Bloc. Enter the New Bloc name as 'Home' and click on Enter!.
Then, it will create a new folder in your Home folder named bloc with all required files as image below.
Step 2: Working with home_event.dart.
Note: If you are not following step1 create a folder structure manually as the image located above the Step 2.
Here we only have one event, CounterIncrementPressed to code, and that contains a parameter count because we need to pass the previous state before updating the state.
home_event.dart:
home_event.dart
part of 'home_bloc.dart';
/// Base class for all events related to the Home feature.
/// This class is immutable and sealed, meaning no other classes
/// can extend it outside of this file.
@immutable
sealed class HomeEvent {}
/// Event triggered when the counter increment button is pressed.
/// This extends the base `HomeEvent` class.
class CounterIncrementPressed extends HomeEvent {
final int counter;
CounterIncrementPressed({required this.counter});
}
Step 3: Working with home_state.dart
Here, also we only have one state to code and it also have one parameter counter because it is used to update state and emit to UI.
home_state.dart
part of 'home_bloc.dart';
/// Base class for all states in the Home feature.
/// This class is immutable and sealed, meaning no other classes
/// outside this file can extend it.
@immutable
sealed class HomeState {}
/// Initial state of the Home feature.
/// Represents the default state when no specific state is set.
final class HomeInitial extends HomeState {}
/// State representing the counter value.
/// Extends [HomeInitial] and holds the current counter value.
final class CounterState extends HomeInitial {
/// The current value of the counter.
final int counter;
/// Constructor for [CounterState].
/// Requires the [counter] value to be provided.
CounterState({required this.counter});
}
Step 4: Working with home_bloc.dart
This class (HomeBloc) catches the triggered event (CounterIncrementPressed) with some previous state (event parameter in CounterIncrementPressed ) and updates it and emits through the state (CounterState(counter: event.counter + 1)) to UI.
home_bloc.dart:
home_bloc.dart
import 'package:bloc/bloc.dart';
import 'package:meta/meta.dart';
// Importing the parts for event and state definitions
part 'home_event.dart';
part 'home_state.dart';
// The HomeBloc class extends Bloc and manages the state of the application
class HomeBloc extends Bloc<HomeEvent, CounterState> {
// Constructor initializes the bloc with an initial state
HomeBloc() : super(CounterState( counter: 0)) {
// Specific event handler for CounterIncrementPressed
on<CounterIncrementPressed>((event, emit) {
// Emits a new CounterState with the incremented counter value
emit(CounterState(counter: event.counter + 1));
});
}
}
Step 5: Working with UI
We develop a simple counter app UI with a FloatingActionButton and Text widget wrapped with Center to display the count.
-BlocProvider: Wrap the home class CounterPage() with BlocProvider, it is used initialize the state i.e, here the counter value '0' in home_bloc.dart.
Dart
// Providing the HomeBloc to the widget tree
home: BlocProvider(
create: (context) => HomeBloc(),
child: CounterPage(),
),
- Initialize the instance: Used to access events in home_event.dart to perform the trigger.
Dart
// Accessing the HomeBloc instance from the context
final HomeBloc counterBloc = BlocProvider.of<HomeBloc>(context);
- BlocBuilder: Wrap the Scaffold with BlocBuilder that contains builder as a parameter with (context, state), and here 'state' is used to get the updated state to UI throw "." operation, for example (state.count).
Dart
BlocBuilder<HomeBloc, CounterState>(
// Rebuilding the UI based on the current state of HomeBloc
builder: (context, state) {
return Scaffold(
body: Center(
// Displaying the current counter value
child: Text('Counter: ${state.counter}',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue.shade800,
foregroundColor: Colors.white,
onPressed: () {
// Dispatching an event to increment the counter
counterBloc.add(CounterIncrementPressed(counter: state.counter));
},
child: Icon(Icons.add),
),
);
},
);
Full UI Code
main.dart:
main.dart
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_geeks/Home/bloc/home_bloc.dart';
void main() {
// Entry point of the Flutter application
runApp(MyApp());
}
// Root widget of the application
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
// Providing the HomeBloc to the widget tree
home: BlocProvider(
create: (context) => HomeBloc(),
child: CounterPage(),
),
);
}
}
// Widget representing the Counter Page
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Accessing the HomeBloc instance from the context
final HomeBloc counterBloc = BlocProvider.of<HomeBloc>(context);
return BlocBuilder<HomeBloc, CounterState>(
// Rebuilding the UI based on the current state of HomeBloc
builder: (context, state) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter BLoC Example'),
backgroundColor: Colors.blue.shade800,
foregroundColor: Colors.white,
),
body: Center(
// Displaying the current counter value
child: Text('Counter: ${state.counter}',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue.shade800,
foregroundColor: Colors.white,
onPressed: () {
// Dispatching an event to increment the counter
counterBloc.add(CounterIncrementPressed(counter: state.counter));
},
child: Icon(Icons.add),
),
);
},
);
}
}
Program Flow:
When the App started with the help of BlocProvider, the counter value was '0'.
BlocProvider(
create: (context) => HomeBloc(),
.....
)
As we are calling HomeBloc() class in home_bloc.dart and that calling CounterState( counter: 0) with '0' as counter value as below:
HomeBloc() : super(CounterState( counter: 0)) {
...
}When it come to UI after that, BlocBuilder catching that state i.e, counter value '0' and it will display Zero at starting of the app.
BlocBuilder<HomeBloc, CounterState>(
// Rebuilding the UI based on the current state of HomeBloc
builder: (context, state) {
return Scaffold(
....
body: Text('Counter: ${state.counter}',
.....
When the user taps on the FloatingActionButton, it triggers the event.
FloatingActionButton(
onPressed: () {
// Dispatching an event to increment the counter
counterBloc.add(CounterIncrementPressed(counter: state.counter));
},
child: Icon(Icons.add),
),
Then it is taking current counter value and going to home_bloc.dart and searches for right on catch(on<CounterIncrementPressed>), if it finds then it will emit the state like CounterState(counter: event.counter +1 ), here with the event parameter we can easily access the previous state(event.counter) i.e, counter value and it implicitly updating the counter value and after that it is emitting that to UI.
on<CounterIncrementPressed>((event, emit) {
emit(CounterState(counter: event.counter + 1));
});Then, BlocBuilder in the main.dart catching that updated state and displaying it in the UI.
BlocBuilder<HomeBloc, CounterState>(
// Rebuilding the UI based on the current state of HomeBloc
builder: (context, state) {
return Scaffold(
....
body: Text('Counter: ${state.counter}',
.....
This is what is happening in the whole code.
Complete Source Code
home_event.dart
part of 'home_bloc.dart';
/// Base class for all events related to the Home feature.
/// This class is immutable and sealed, meaning no other classes
/// can extend it outside of this file.
@immutable
sealed class HomeEvent {}
/// Event triggered when the counter increment button is pressed.
/// This extends the base `HomeEvent` class.
class CounterIncrementPressed extends HomeEvent {
final int counter;
CounterIncrementPressed({required this.counter});
}
part of 'home_bloc.dart';
/// Base class for all states in the Home feature.
/// This class is immutable and sealed, meaning no other classes
/// outside this file can extend it.
@immutable
sealed class HomeState {}
/// Initial state of the Home feature.
/// Represents the default state when no specific state is set.
final class HomeInitial extends HomeState {}
/// State representing the counter value.
/// Extends [HomeInitial] and holds the current counter value.
final class CounterState extends HomeInitial {
/// The current value of the counter.
final int counter;
/// Constructor for [CounterState].
/// Requires the [counter] value to be provided.
CounterState({required this.counter});
}
import 'package:bloc/bloc.dart';
import 'package:meta/meta.dart';
// Importing the parts for event and state definitions
part 'home_event.dart';
part 'home_state.dart';
// The HomeBloc class extends Bloc and manages the state of the application
class HomeBloc extends Bloc<HomeEvent, CounterState> {
// Constructor initializes the bloc with an initial state
HomeBloc() : super(CounterState( counter: 0)) {
// Specific event handler for CounterIncrementPressed
on<CounterIncrementPressed>((event, emit) {
// Emits a new CounterState with the incremented counter value
emit(CounterState(counter: event.counter + 1));
});
}
}
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_geeks/Home/bloc/home_bloc.dart';
void main() {
// Entry point of the Flutter application
runApp(MyApp());
}
// Root widget of the application
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
// Providing the HomeBloc to the widget tree
home: BlocProvider(
create: (context) => HomeBloc(),
child: CounterPage(),
),
);
}
}
// Widget representing the Counter Page
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Accessing the HomeBloc instance from the context
final HomeBloc counterBloc = BlocProvider.of<HomeBloc>(context);
return BlocBuilder<HomeBloc, CounterState>(
// Rebuilding the UI based on the current state of HomeBloc
builder: (context, state) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter BLoC Example'),
backgroundColor: Colors.blue.shade800,
foregroundColor: Colors.white,
),
body: Center(
// Displaying the current counter value
child: Text('Counter: ${state.counter}',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue.shade800,
foregroundColor: Colors.white,
onPressed: () {
// Dispatching an event to increment the counter
counterBloc.add(CounterIncrementPressed(counter: state.counter));
},
child: Icon(Icons.add),
),
);
},
);
}
}
Output:
Similar Reads
Basics
Flutter TutorialThis Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
Flutter | An introduction to the open source SDK by GoogleFlutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with a bunch
5 min read
Flutter - Architecture ApplicationFlutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of
3 min read
Android Studio Setup for Flutter DevelopmentThis article will show how to set up Android Studio to run Flutter Applications. Android Studio is one of the popular IDE( integrated development environment  ) developed by Google itself to create cross-platform Android applications. First, you have to install Android Studio version 3.0 or later, a
3 min read
Getting Started with Cross-Platform Mobile Application using FlutterFlutter is an open-source mobile application development SDK created by Google to develop cross-platform mobile applications. Flutter makes it extremely easy and fast for even novice programmers (computer programmers who are not experienced in any programming languages) to build high-quality and res
7 min read
Flutter Development in Ubuntu 20.04In this article, let's look at how you can set up a development environment for Flutter if you're using Ubuntu 20.04. It was difficult earlier and was kind of a nightmare to get it done. But now, it has changed, and anyone can easily set up a flutter development environment on their Ubuntu system in
5 min read
Key Widgets
UI Components
Flutter - TabsTabs are the part of the UI that navigates the user through different routes(ie, pages) when clicked upon. The use of tabs in applications is standard practice. Flutter provides a simple way to create tab layouts using the material library. In this article, we will be exploring the same in detail.To
2 min read
Flutter - Horizontal ListIn Flutter there can be Two types of lists, namely, horizontal list and vertical list. Both these lists are created using the ListView constructor and assigning the scrollDirection parameter. By default, the scroll direction parameter is vertical for a vertical list but it can be overridden by passi
3 min read
Flutter - Expansion Tile CardThe Expansion Tile Card works similarly to that of the Flutter SDK's standard expansion tile. But it uses the style used by Google itself in its products to raise a tile. It can be called a better version of the Flutter's ExpansionTileCard. In this article, we will look into the process of implement
3 min read
Icon Class in FlutterIcon class in Flutter is used to show specific icons in our app. Instead of creating an image for our icon, we can simply use the Icon class for inserting an icon in our app. For using this class you must ensure that you have set uses-material-design: true in the pubsec.yaml file of your object.Synt
2 min read
Expanded Class in FlutterWhen we create any child of a row or column we provide the size of the widget according to the screen size but sometimes when we provide more size of child as compared to screen size we get a warning and our widget goes out of the screen for resolving this we put a child of a row or column in an exp
3 min read
Flutter - DialogsThe dialog is a type of widget which comes on the window or the screen which contains any critical information or can ask for any decision. When a dialog box is popped up all the other functions get disabled until you close the dialog box or provide an answer. We use a dialog box for a different typ
5 min read
Flutter - Circular & Linear Progress IndicatorsProgress Indicator in any application displays the time which is needed for some tasks to complete such as downloading, installation, uploading, file transfer, etc. This shows the progress of a task or the time to display the length of the processes.In Flutter, progress can be displayed in two ways:
4 min read
Flutter - Staggered Grid ViewStaggered Grid View is a type of layout that is used to display images and posts. As you see in various social platforms such as Pinterest, Instagram and many more. The main feature of Staggered Grid View is that it makes the layout beautiful and develop a great User Experience. Staggered Grid View
4 min read
Design & Animations
Customizing Fonts in FlutterCustomization is everywhere, from documents to apps, we can customize everything as we want to. The power of customization is humongous, and it has revolutionized the way we look at technology in this world. Just like how printing "Hello World", is the basic step towards learning a new programming l
4 min read
Flutter - Skeleton TextIn Flutter, the skeleton_text library is used to easily implement skeleton text loading animation. Its main application in a flutter app is to assure its users that the servers are working but running slow, but the content will eventually load. It also enhances the User Interface if the user connect
3 min read
Flutter - ThemesThemes are an integral part of UI for any application. Themes are used to design the fonts and colors of an application to make it more presentable. In Flutter, the Theme widget is used to add themes to an application. One can use it either for a particular part of the application like buttons and n
3 min read
Flutter - Lazy LoaderThe Lazy loader is a wrapper to the ScrollView that enables lazy loading. It is very useful in situations where the application's intent is to show endless content in a ListView. For instance, Instagram, Facebook, Youtube and most social networking platforms use them to deliver an endless stream of
5 min read
Flutter - UI OrientationAll applications should be able to adjust their User Interface (UI) based on the orientation of the phone. By orientation, we implicate the portrait and landscape mode in smartphones rather the physical orientation. In, Flutter it is done so by using the OrientationBuilder, which determines the app'
2 min read
Flutter - Animation in Route TransitionRoutes are simply Pages in Flutter applications. An application often needs to move from one page to another. However, animations can be used to make these transitions smoother. These animations can be used to curve or tween the Animation object of the PageRouteBuilder class to alter the transition
3 min read
Flutter - Physics Simulation in AnimationPhysics simulation in Flutter is a beautiful way to Animate components of the flutter app to make it look more realistic and interactive. These can be used to create a range of animations like falling objects due to gravity to making a container seem attached to a spring. In this article, we will ex
4 min read
Flutter - Radial Hero AnimationA Radial transformation means turning a circular shape into a square shape. In Radial Hero animation the same is done with a Hero. In Flutter, a Hero Widget is used to create a hero animation. A hero in this context refers to a widget that moves in between screens. This is one of the most fundamenta
3 min read
Flutter - Hinge AnimationAnimations are a big part of the Flutter application. It makes an app sweet to the eyes and equally user-friendly. In this article, we will discuss in detail the Hinge animations. In Flutter there are two ways to work with animations namely:A pub packageAnimated Builder WidgetIn this article, we wil
4 min read
Flutter - Lottie AnimationVisualization is an integral part of any application. Animations can highly glorify the UI of an app, but animations can be hectic to implement for an application. This is where the Lottie animation comes in. Lottie is a JSON-based animation file. It can be used both as a network asset and a static
3 min read
Forms & Gestures
Navigation & Routing
URLs in FlutterWhile surfing the net, every user will come across many buttons, text, etc., that would redirect the user to a different webpage in the same tab or in a different tab when clicked. In the same way, when a developer links a URL to a button or text in an app, the app will open the website when clicked
5 min read
Routes and Navigator in FlutterRoute: Apps are the new trend. The number of apps available in the Play Store and App Store nowadays is quite a lot. The apps display their content in a full-screen container called pages or screens. In flutter, the pages or screens are called Routes. In android, these pages/screens are referred to
4 min read
Flutter - WebSocketsWebSockets are used to connect with the server just like the http package. It supports two-way communication with a server without polling.In this article, we will explore the below-listed topics related to WebSockets in Flutter:Connecting to a WebSocket serverListen to messages from the server.Send
3 min read
Flutter - Named RoutesAn app has to display multiple screens depending upon the user's needs. A user needs to back and forth from the multiple screens to the home screen. In, Flutter this is done with the help of Navigator.Note: In Flutter, screens and pages are called routes. Steps to Implement Named Routes in FlutterSt
3 min read
Flutter - Arguments in Named RoutesNavigating between the various routes (i.e, pages) of an application in Flutter is done with the use of Navigator. The Navigator uses a common identifier to transition between routes. One can pass arguments to these routes using the arguments parameter of Navigator.pushNamed() method. Arguments can
4 min read
Multi Page Applications in FlutterApps are widely used by humans in this techie world. The number of apps in the app store is increasing day by day. Due to this competition, app developers have started to add a number of features to their apps. To reduce this complexity, the content of the app is mostly divided into various pages so
5 min read
Flutter - Updating Data on the InternetIn today's world, most applications heavily rely on fetching and updating information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore the same. Let's see a sample video of what we are going to develop.Sample Video:St
5 min read
Flutter - Fetching Data From the InternetIn today's world, most applications heavily rely on fetching information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore this concept.Steps to Implement Data Fetching from the InternetStep 1 : Create a new flutter ap
4 min read
Flutter - Deleting Data On The InternetIn this article, we will explore the process of deleting data on the internet. Before deleting data on the internet, we will fetch the data first and then will delete the data.Steps to implement Deleting Data on the InternetStep 1 : Create a new flutter applicationCreate a new Flutter application us
4 min read
Flutter - Sending Data To The InternetInteracting with the Internet is crucial for most apps to function. In Flutter, sending data to the internet is one of them, and the http package is used to send the data to the internet. In this article, we will explore the same topic in detail. Steps to Implement Sending Data to the InternetStep 1
5 min read
Flutter - Send Data to ScreenInteraction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl
4 min read
Hardware Interaction
Gallery Access and Camera in FlutterWe can add images from the gallery using the image_picker package in Flutter. For this, you'll need to use your real device.Steps to Implement Gallery and Camera AccessStep 1: Create a new flutter applicationCreate a new Flutter application using the command Prompt. To create a new app, write the be
3 min read
Camera Access in FlutterTo add images from the camera in Flutter, we'll use the image_picker package. For this, you'll need to use your real device.Follow the below steps to display the images from the cameraStep 1: Create a new Flutter ApplicationCreate a new Flutter application using the command Prompt. To create a new a
3 min read
Background local notifications in FlutterSometimes user wants some essential features like the latest news updates, latest articles updates, weather condition alert, complete his/her profile update, future events update and much more in his/ her Android or iOS device without opening App and if you would like to develop this kind of Android
6 min read
Restrict Landscape mode in FlutterIn this article, we'll learn how to restrict landscape mode in the flutter app. A production-ready app should be free from all sorts of bugs and errors. Mostly, we design our app for portrait orientation if we flip to landscape orientation, the UI might not be adjusted for that. So, there are two ca
2 min read
Sample Flutter Apps
Basic Quiz App In FlutterFlutter SDK is an open-source software development kit for building beautiful UI that is natively compiled. Currently, it is available as a stable version for iOS and Android OS. In this app, we are going to have the features or modules mentioned below:Five multiple-choice questions ( more questions
8 min read
A Hello World App using FlutterIn Flutter, everything is a Widget, and by using predefined widgets, one can create user-defined widgets just like using int, float, and double can create user-defined data types. In Flutter there are three types of widgetsStateless WidgetStateful WidgetInherited WidgetIn this article, we will use S
3 min read
Flutter - Simple PDF Generating AppFlutter Community has created several packages to work with PDFs in our apps. In this article, we will be creating a simple PDF-generating app. This application will convert plain text to PDF. The packages that we are going to need are listed below with their uses:pdf: It is a PDF creation library f
9 min read
Flutter - Magic 8 Ball AppWe will be building a Magic 8-Ball app that will give you the answers to all fun, tricky questions (basically, it is a fun game app that will change its state of image using Textbutton in Stateful widgets). For this, we will use Stateless and Stateful Flutter widgets and a Textbutton. Steps to build
3 min read
Advance Concepts