BLoC (Business Logic Component) state management in Flutter

 

Let’s go step by step — you’ll understand BLoC (Business Logic Component) state management in Flutter clearly and practically with a real example.

🧠 What is BLoC?

BLoC helps separate your UI (presentation) from your business logic.
It follows the principle:

UI sends events → BLoC processes them → emits new states → UI rebuilds.

So instead of writing logic inside your setState(), you handle logic inside the BLoC, and the UI just listens.

---

⚙️ Core Concepts

Concept	Role	Example
Event	Represents what happened (user actions)	IncrementEvent, FetchUserEvent
State	Represents the UI condition	CounterInitial, CounterUpdated(5)
Bloc	Handles logic, maps Events → States	CounterBloc
BlocProvider	Makes a Bloc available to widgets	BlocProvider(create: (_) => CounterBloc())
BlocBuilder	Rebuilds UI when state changes	Updates counter display automatically

---

🧩 Example: Counter App using BLoC

Let’s build a simple counter app using flutter_bloc package.

---

🪜 Step 1: Add Dependency

In pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.1.3

Run:

flutter pub get

---

🪜 Step 2: Create the Event

counter_event.dart

abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

---

🪜 Step 3: Create the State

counter_state.dart

class CounterState {
  final int count;
  CounterState(this.count);
}

---

🪜 Step 4: Create the BLoC

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<IncrementEvent>((event, emit) {
      emit(CounterState(state.count + 1));
    });

    on<DecrementEvent>((event, emit) {
      emit(CounterState(state.count - 1));
    });
  }
}

---

🪜 Step 5: Use it in the UI

main.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';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => CounterBloc(),
        child: CounterScreen(),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterBloc = context.read<CounterBloc>();

    return Scaffold(
      appBar: AppBar(title: const Text('BLoC Counter')),
      body: Center(
        child: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            return Text(
              'Count: ${state.count}',
              style: const TextStyle(fontSize: 30),
            );
          },
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            heroTag: 'increment',
            onPressed: () => counterBloc.add(IncrementEvent()),
            child: const Icon(Icons.add),
          ),
          const SizedBox(width: 10),
          FloatingActionButton(
            heroTag: 'decrement',
            onPressed: () => counterBloc.add(DecrementEvent()),
            child: const Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

---

🧩 How It Works

1. User taps ➕ → IncrementEvent is added.

2. The CounterBloc receives the event → increases count → emits new CounterState.

3. BlocBuilder listens → rebuilds the Text widget with new value.

✅ No setState() used — the UI updates automatically when the state changes.

---

📦 Folder Structure (Recommended)

lib/
│
├── bloc/
│   ├── counter_bloc.dart
│   ├── counter_event.dart
│   └── counter_state.dart
│
└── ui/
    └── counter_screen.dart

---

⚡ Real-World Use Case Example

For example, in a Login screen:

• Events → LoginButtonPressed, LogoutPressed

• States → LoginLoading, LoginSuccess, LoginFailure

• Bloc → Handles login API, emits new state

So, the same pattern scales well to API calls, form validation, and data management.

---

🔍 Summary

Step	Description
1	Define Event (what happens)
2	Define State (UI data/status)
3	Create Bloc (handle logic)
4	Use BlocProvider in widget tree
5	Use BlocBuilder or BlocListener to rebuild or react to state