The FlutterBloc package is a state management solution that utilizes the Bloc pattern, which stands for Business Logic Component. It provides a structured and predictable way to manage the application state by separating the business logic from the UI layer.
Bloc pattern works on the principle of streams and sinks. It allows for the creation of event streams that the UI components can react to, and the business logic can respond with states. This decoupling of events and states makes it easier to test and maintain the codebase.
To use the FlutterBloc package, first, you need to include it in your project's dependencies in the pubspec.yaml
file:
dependencies: flutter_bloc: ^7.0.0
Next, you can define your bloc by extending the
Bloc
class provided by the package. Let's take an example of a simple counter application to understand the basic usage:import 'package:flutter_bloc/flutter_bloc.dart'; enum CounterEvent { increment, decrement, } class CounterBloc extends Bloc<CounterEvent, int> { CounterBloc() : super(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, we define a
CounterBloc
class that extendsBloc
and takes an event type ofCounterEvent
and a state type ofint
. The initial state is set to 0.The
mapEventToState
method is overridden to handle the different events and yield the corresponding states based on the event. Theyield
keyword is used to emit new states to the UI component subscribed to this bloc.To utilize this bloc in a Flutter widget, you can wrap it with the
BlocProvider
widget:class CounterPage extends StatelessWidget { @override Widget build(BuildContext context) { return BlocProvider<CounterBloc>( create: (context) => CounterBloc(), child: CounterView(), ); } }
Now, in the
CounterView
widget, you can access the bloc using theBlocProvider.of<CounterBloc>(context)
method:class CounterView extends StatelessWidget { @override Widget build(BuildContext context) { final counterBloc = BlocProvider.of<CounterBloc>(context); return Scaffold( appBar: AppBar(title: Text('Counter')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () { counterBloc.add(CounterEvent.decrement); }, child: Icon(Icons.remove), ), SizedBox(width: 10), BlocBuilder<CounterBloc, int>( builder: (context, count) { return Text( '$count', style: TextStyle(fontSize: 32), ); }, ), SizedBox(width: 10), ElevatedButton( onPressed: () { counterBloc.add(CounterEvent.increment); }, child: Icon(Icons.add), ), ], ), ), ); } }
In this widget, we use the
BlocBuilder
widget provided byflutter_bloc
package to rebuild the UI whenever the state changes. It takes the bloc and a builder function that provides the latest state.By following this pattern with the FlutterBloc package, you can simplify the state management in your Flutter applications and organize your codebase in a more scalable and maintainable way.
Subject: FlutterBloc