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.5

Run:

flutter pub get

---

Step 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.