Flutter BLoC (Business Logic Component) architecture is a design pattern used to manage state in a Flutter application. It separates the business logic from the UI, making the code more modular and testable. Here's an overview of how to implement the BLoC architecture in Flutter.
1. Setting Up Your Flutter Project
First, create a new Flutter project if you don't already have one:
flutter create my_bloc_app
cd my_bloc_app
2. Add Dependencies
Add the flutter_bloc and equatable packages to your pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
flutter_bloc: ^8.0.1
equatable: ^2.0.3
Run flutter pub get to install the dependencies.
3. Creating a BLoC
Let's create a counter example to demonstrate the BLoC architecture.
3.1 Define Events
Create a file counter_event.dart in the lib directory:
import 'package:equatable/equatable.dart';
abstract class CounterEvent extends Equatable {
@override
List<Object> get props => [];
}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}
3.2 Define States
Create a file counter_state.dart:
import 'package:equatable/equatable.dart';
class CounterState extends Equatable {
final int count;
const CounterState(this.count);
@override
List<Object> get props => [count];
}
3.3 Define BLoC
Create a file counter_bloc.dart:
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';
class CounterBloc extends Bloc<CounterEvent, CounterState> {
CounterBloc() : super(CounterState(0)) {
on<Increment>((event, emit) => emit(CounterState(state.count + 1)));
on<Decrement>((event, emit) => emit(CounterState(state.count - 1)));
}
}
4. Using the BLoC in the UI
4.1 Provide the BLoC
In your main.dart file, wrap your MaterialApp with a BlocProvider:
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => CounterBloc(),
child: MaterialApp(
home: CounterPage(),
),
);
}
}
4.2 Create the UI
Create a file counter_page.dart:
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Counter')),
body: BlocBuilder<CounterBloc, CounterState>(
builder: (context, state) {
return Center(
child: Text('Count: ${state.count}', style: TextStyle(fontSize: 24)),
);
},
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () => context.read<CounterBloc>().add(Increment()),
child: Icon(Icons.add),
),
SizedBox(height: 8),
FloatingActionButton(
onPressed: () => context.read<CounterBloc>().add(Decrement()),
child: Icon(Icons.remove),
),
],
),
);
}
}
5. Running the App
Now, you can run your app using:
flutter run
Summary
In this example, you:
- Created a BLoC (
CounterBloc) that handlesIncrementandDecrementevents and emits new states. - Defined events and states for the counter.
- Provided the BLoC to the widget tree using
BlocProvider. - Built the UI using
BlocBuilderto respond to state changes and dispatch events.
This setup keeps your business logic separate from your UI, making your code more modular and easier to test.
Top comments (0)