Bloc state management is a popular state management technique that is used in Flutter applications. It is based on the concept of streams, which are a powerful way to handle data flow in your application. In this blog post, we will go through the steps of implementing Bloc state management in your Flutter application, with code examples.
Step 1: Create a new Flutter project
To start, you will need to create a new
Flutter project. You can do this by opening up your terminal and running the
following command:
flutter
create my_project
This will create a new Flutter project
with the name "my_project".
Step 2: Add the Bloc library to your
project
The next step is to add the Bloc library
to your project. You can do this by adding the following dependency to
your pubspec.yaml file:
dependencies:
flutter_bloc: ^6.0.1
Step 3: Create a Bloc
Now that you have added the Bloc library
to your project, you can start creating your own Bloc. A Bloc is a simple class
that contains the logic for managing the state of your application. To create a
Bloc, you will need to extend the Bloc class and implement the mapEventToState
function.
Here is an example of a simple Bloc that
manages the count of a button press:
import 'package:flutter_bloc/flutter_bloc.dart';
class CounterBloc extends Bloc<CounterEvent, int> {
@override
int get initialState => 0;
@override
Stream<int>
mapEventToState(CounterEvent event) async* {
switch (event) {
case
CounterEvent.increment:
yield state + 1;
break;
case
CounterEvent.decrement:
yield state - 1;
break;
}
}
}
In this
example, the Bloc has two events, increment and decrement, that are used to
update the state of the Bloc. The state is an integer that starts at 0 and is
incremented or decremented based on the event that is received.
Step 4: Create a BlocProvider
Now that you have created your Bloc, you
need to create a BlocProvider to make it accessible throughout your
application. A BlocProvider is a widget that is used to create and dispose of
Blocs. You can place it at the root of your application and all the children
widgets will have access to it.
Here is an example of how to create a BlocProvider:
import
'package:flutter/material.dart';
import 'package:my_project/counter_bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext
context) {
return
BlocProvider<CounterBloc>(
create: (context) =>
CounterBloc(),
child: MaterialApp(
home: MyHomePage(),
),
);
}
}
In this example, the BlocProvider is
wrapping the MaterialApp widget and creating an instance of the CounterBloc
class. This means that any child widget of the MaterialApp widget will have
access to the CounterBloc.
Step 5: Access the Bloc in your widgets
Now that you have created a BlocProvider,
you can access the Bloc in any child widget by using the BlocBuilder widget.
The BlocBuilder widget listens to the state of the Bloc and rebuilds the widget
when the state changes.
Here is an example of how to use the BlocBuilder
to display the count of button presses:
class
MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext
context) {
final CounterBloc
counterBloc = BlocProvider.of<CounterBloc>(context);
return Scaffold(
body: Center(
child:
BlocBuilder<CounterBloc, int>(
builder: (context,
count) {
return Text(
'Button press
count: $count',
style:
TextStyle(fontSize: 24),
);
},
),
),
floatingActionButton:
Column(
mainAxisAlignment:
MainAxisAlignment.end,
children:
<Widget>[
Padding(
padding:
EdgeInsets.symmetric(vertical: 5),
child:
FloatingActionButton(
onPressed: () {
counterBloc.add(CounterEvent.increment);
},
child:
Icon(Icons.add),
),
),
Padding(
padding:
EdgeInsets.symmetric(vertical: 5),
child:
FloatingActionButton(
onPressed: () {
counterBloc.add(CounterEvent.decrement);
},
child:
Icon(Icons.remove),
),
),
],
),
);
}
}
In this example, the BlocBuilder widget
is listening to the CounterBloc and updating the text to display the current
count. The floating action buttons are also using the counterBloc to add the increment
and decrement events to the Bloc.
Conclusion
0 Comments