How to use BLoC in Flutter and its benefits?
BLoC (Business Logic Component) is an architectural pattern that is commonly used in Flutter for state management. In this blog, we'll take a look at how to use BLoC in Flutter and its benefits.
What is BLoC?
BLoC is an architectural pattern that separates the presentation layer (UI) from the business logic layer. The basic idea is that you create a separate class (the BLoC) that manages the state of your app and communicates with your UI through streams. This way, your UI remains separate from the business logic, making your code easier to test and maintain.
What benefits does BloC provide?
There are several benefits to using BLoC in your Flutter app:
- Separation of Concerns: By separating the presentation layer from the business logic layer, you can keep your code organized and easier to maintain.
- Code Reusability: Since the business logic is kept separate from the presentation layer, you can easily reuse the same logic across multiple screens and widgets.
- Testability: BLoC makes it easier to write automated tests for your code, since you can test the business logic separately from the presentation layer.
How to use BLoC in Flutter?
To use BLoC in your Flutter app, you'll need to follow a few steps:
* Step 1: Create your BLoC Class
The first step is to create your BLoC class. This class should extend the Bloc class from the flutter_bloc package. Inside this class, you can define your streams and any logic that you need to manage the state of your app.
dart
import 'package:flutter_bloc/flutter_bloc.dart';class CounterBloc extends Bloc<CounterEvent, int> {CounterBloc() : super(0);@overrideStream<int> mapEventToState(CounterEvent event) async* {if (event == CounterEvent.increment) {yield state + 1;} else if (event == CounterEvent.decrement) {yield state - 1;}}}* Step 2: Create your UI
Next, you'll need to create your UI. In this example, we'll create a simple counter app that increments and decrements a counter value.
dart
class CounterPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Counter')),body: BlocBuilder<CounterBloc, int>(builder: (context, count) {return Center(child: Text('$count',style: TextStyle(fontSize: 24.0),),);},),floatingActionButton: Column(mainAxisAlignment: MainAxisAlignment.end,crossAxisAlignment: CrossAxisAlignment.end,children: <Widget>[FloatingActionButton(onPressed: () => context.read<CounterBloc>().add(CounterEvent.increment),tooltip: 'Increment',child: Icon(Icons.add),),SizedBox(height: 10),FloatingActionButton(onPressed: () => context.read<CounterBloc>().add(CounterEvent.decrement),tooltip: 'Decrement',child: Icon(Icons.remove),),],),);}}* Step 3: Connect your UI to your BLoC
Finally, you'll need to connect your UI to your BLoC. In this example, we're using the BlocBuilder widget from the flutter_bloc package to rebuild our UI whenever the state of our CounterBloc changes. We're also using the context.read() method to access our CounterBloc and dispatch events to it when the user taps the increment or decrement buttons.
dart
BlocProvider(create: (context) => CounterBloc(),child: CounterPage(), today and receive a free consultation!
