State management is one of the most important concepts in Flutter. As your app grows, you’ll need a way to manage and update the state of your widgets efficiently. One of the most popular solutions is Bloc (Business Logic Component).
In this beginner-friendly guide, we’ll build a simple counter app using Flutter Bloc. This will help you understand the fundamentals of Bloc and how to use it for managing state in your Flutter projects.
What is Bloc?
Bloc is a state management library that helps separate business logic from the UI. It allows you to:
- Keep your code organized and testable
- React to events and update the state
- Build scalable apps without spaghetti code
Step 1: Install Dependencies
First, add the following dependencies to your pubspec.yaml:
dependencies:
flutter_bloc: ^9.0.0
equatable: ^2.0.5Run:
flutter pub getStep 2: Create the Counter Bloc
A Bloc has Events (things that happen) and States (results after events).
Events
abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}Bloc
import 'package:flutter_bloc/flutter_bloc.dart';
class CounterBloc extends Bloc<CounterEvent, int> {
CounterBloc() : super(0) {
on<Increment>((event, emit) => emit(state + 1));
on<Decrement>((event, emit) => emit(state - 1));
}
}Here:
- The initial state is 0.
- When Increment is added → the state increases.
- When Decrement is added → the state decreases.
Step 3: Build the UI
Now, let’s connect our Bloc with the Flutter UI.
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_bloc.dart';
class CounterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (_) => CounterBloc(),
child: MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Bloc Counter")),
body: BlocBuilder<CounterBloc, int>(
builder: (context, count) {
return Center(
child: Text(
'$count',
style: const TextStyle(fontSize: 40),
),
);
},
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () =>
context.read<CounterBloc>().add(Increment()),
child: const Icon(Icons.add),
),
const SizedBox(height: 10),
FloatingActionButton(
onPressed: () =>
context.read<CounterBloc>().add(Decrement()),
child: const Icon(Icons.remove),
),
],
),
),
),
);
}
}Step 4: Run the App
Run your app and you’ll see:
- The number starts at 0.
- Tapping the + button increments the count.
- Tapping the – button decrements the count.
Why Use Bloc?
✅ Keeps your code clean and maintainable
✅ Separates UI from business logic
✅ Makes testing easier
✅ Scales well for large projects
Conclusion
You just built your first Flutter Bloc counter app 🎉.
From here, you can explore more complex use cases like API calls, authentication, or form validation using Bloc.
If you’re serious about Flutter development, mastering Bloc will give you a solid foundation for building production-ready apps.
Leave a Reply