Explore Flutter Bloc 8.0.1 Design Pattern In Flutter
State Management in Flutter has been a hot topic since Flutter hit the mobile development scene. Apps are built on state, and using no state-management solution is tough to scale and tougher to test. Flutter is a comparatively new cross-platform software development framework with an incredible amount of high-quality, well-supported open-sourced packages released during its short lifespan.
One area of Flutter that these packages support state management, and BLoC is one of the most seasoned types of state the executives inside Flutter, initially delivered to the general public towards the finish of 2019.
Flutter Bloc 8.0.1 Design Pattern is the new form of the bloc pattern.
This rendition has a few enhancements from the past version. Over version 7 flutter bloc pattern turned out to be exceptionally powerful.
In this blog, we will Explore Flutter Bloc 8.0.1 Design Pattern In Flutter. We will see how to implement a demo program of the flutter bloc and how to use the Flutter Bloc 8.0.1 Design Pattern using the flutter_bloc package in your flutter applications.
flutter_bloc | Flutter Package
Widgets that make it easy to integrate blocs and cubits into Flutter. Built to work with package: bloc. Learn more at…pub.dev
Table Of Contents::
Introduction:
Flutter bloc 8.0.1 design pattern gives a superior method for dealing with the states utilizing events. This design pattern assists with isolating the show from business logic. Following the Bloc pattern works with testability and reusability. This package abstracts receptive parts of the pattern permitting developers to zero in on composing the business logic.
Flutter Bloc was the primary state management answer for getting steam (Provider was additionally up there as well, credit where it is expected) — yet like all MVPs, version 1.0 was a little harsh around the edges. With more than 7 versions, Bloc turned out to be endlessly better until it turned into the superb environment of state management arrangements: highlight rich, simple to test, and advanced adaptable architecture.
Demo Module :
The above demo video shows how to implement the Flutter bloc 8.0.1 design pattern and shows how the Flutter bloc 8.0 design pattern will work using the flutter_bloc package in your flutter applications. It will be shown on your device.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
flutter_bloc:
Step 2: Import
import 'package:flutter_bloc/flutter_bloc.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Fluter bloc 8.0 acquaints the event handler with dealing with the states. Here we are utilizing the counter update project utilizing the bloc 8.0 pattern.
Create a new dart file called counter_event.dart inside the lib folder.
We will create an IncrementEvent class. In this class, we will extend CounterEvent for performing the increment operation.
abstract class CounterEvent {}
class IncrementEvent extends CounterEvent {
}Create a new dart file called counter_state.dart inside the lib folder.
We will make a CounterValueState class. In this class, we will extend CounterState for the counter, and on the increment event, we will produce the CounterValueState.
abstract class CounterState {
int? counter;
}
class CounterValueState extends CounterState {
final int counter;
CounterValueState(this.counter);
}Create a new dart file called counter_bloc.dart inside the lib folder.
Presently, we will make the CounterBloc class and add the counter-event with the mapEventToState function. Then, at that point, produce the state according to the event.
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_bloc_design_patterrn_demo/counter_event.dart';
import 'package:flutter_bloc_design_patterrn_demo/counter_state.dart';
class CounterBloc extends Bloc<CounterEvent, CounterState> {
CounterBloc() : super(CounterValueState(0)) {
on<CounterEvent>(mapEventToState);
}
@override
void mapEventToState(
CounterEvent event, Emitter<CounterState> emit) async {
if (event is IncrementEvent) {
emit(CounterValueState(state.counter! + 1));
}
}
}Create a new dart file called main.dart inside the lib folder.
In the main. dart file, we will create a new class CounterBlocDemo. In this class, first, we will create a CounterBloc variable was a bloc.
CounterBloc? bloc;
Now, we will create an initState() method. In this method, we will add a bloc that is equal to the BlocProvider. of<CounterBloc>(context).
@override
void initState() {
bloc = BlocProvider.of<CounterBloc>(context);
super.initState();
}Now, we will use the bloc builder widget for state updates according to the event. In the builder. we will add if currentState is CounterValueState then return a Center widget. In this widget, we will add the Column widget with the mainAxisAlignment as the center. We will add simple text and the currentState.counter.toString() for show update value on our screen.
BlocBuilder<CounterBloc, CounterState>(
builder: (context, currentState) {
if (currentState is CounterValueState) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
style:TextStyle(fontSize: 18),
),
const SizedBox(height: 10,),
Text(
currentState.counter.toString(),
style:const TextStyle(color: Colors.blueGrey,fontSize: 30),
),
],
),
);
}
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
'You have pushed the button this many times:',
),
SizedBox(height: 10,),
Text(
"0",
style:TextStyle(color: Colors.blueGrey,fontSize: 30),
),
],
),
);
},
),
Else, it will show the return Center widget. Inside the widget, we will add a Column widget with text. When the user runs a code then, first show this part, and when they will tap on the button then, show the current state part with the update counter with the help of the bloc builder widget.
Now, we will make a FloatingActionButton. In this button, we will add backgroundColor was pinkAccent, the tooltip was increment, add an icon on it a child, and onPressed function. In this function, we will add bloc?.add(IncrementEvent()). When the user presses the button then, the counter value will be increasing.
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.pinkAccent,
onPressed: () {
bloc?.add(IncrementEvent());
},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_bloc_design_patterrn_demo/counter_bloc.dart';
import 'package:flutter_bloc_design_patterrn_demo/counter_event.dart';
import 'package:flutter_bloc_design_patterrn_demo/counter_state.dart';
import 'package:flutter_bloc_design_patterrn_demo/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return BlocProvider<CounterBloc>(
create: (context) => CounterBloc(),
child: const MaterialApp(
home: Splash(),
debugShowCheckedModeBanner: false,
));
}
}
class CounterBlocDemo extends StatefulWidget {
const CounterBlocDemo({Key? key}) : super(key: key);
@override
_CounterBlocDemoState createState() => _CounterBlocDemoState();
}
class _CounterBlocDemoState extends State<CounterBlocDemo> {
CounterBloc? bloc;
@override
void initState() {
bloc = BlocProvider.of<CounterBloc>(context);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pinkAccent,
title: const Text("Flutter Bloc 8.0.1 Design Pattern"),
centerTitle: true,
automaticallyImplyLeading: false,
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.pinkAccent,
onPressed: () {
bloc?.add(IncrementEvent());
},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(
'assets/logo.png',
height: 150,
),
const SizedBox(height: 40,),
BlocBuilder<CounterBloc, CounterState>(
builder: (context, currentState) {
if (currentState is CounterValueState) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
style:TextStyle(fontSize: 18),
),
const SizedBox(height: 10,),
Text(
currentState.counter.toString(),
style:const TextStyle(color: Colors.blueGrey,fontSize: 30),
),
],
),
);
}
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
'You have pushed the button this many times:',
),
SizedBox(height: 10,),
Text(
"0",
style:TextStyle(color: Colors.blueGrey,fontSize: 30),
),
],
),
);
},
),
],
),
);
}
}
Conclusion:
In the article, I have explained the Flutter Bloc 8.0.1 Design Pattern structure in a flutter; you can modify this code according to your choice. This was a small introduction to Flutter Bloc 8.0.1 Design Pattern On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Flutter Bloc 8.0.1 Design Pattern in your flutter projects. We will show you what the Introduction is?. Make a demo program for working with Flutter Bloc 8.0.1 Design Pattern will work using the flutter_bloc package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
