What is bloc and how to use in flutter application step by step guide

What is BLoC in Flutter?

BLoC stands for Business Logic Component. It’s a state management pattern that helps separate UI from business logic in a Flutter app. It uses Streams to manage the state of your app and respond to user events.

It’s part of the Flutter BLoC library, which is widely used and maintained by the community.

When to Use BLoC?

• When your app grows and you want clear separation of concerns
• For complex state management
• To follow a reactive programming model

Step-by-Step Guide to Using BLoC in Flutter

Let’s walk through how to use flutter_bloc, the official BLoC library.

Step 1: Add Dependencies

In your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.1.3  # check pub.dev for the latest version

Run:

flutter pub get

Step 2: Create Folder Structure

For better organization:

/lib
 └── /counter
      ├── counter_bloc.dart
      ├── counter_event.dart
      ├── counter_state.dart
 └── main.dart

Step 3: Define Events

Create counter_event.dart:

abstract class CounterEvent {}

class Increment extends CounterEvent {}

class Decrement extends CounterEvent {}

Step 4: Define States

Create counter_state.dart:

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

Step 5: Create BLoC

Create 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.counterValue + 1)));
    on<Decrement>((event, emit) => emit(CounterState(state.counterValue - 1)));
  }
}

Step 6: Use BLoC in UI

Update main.dart:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import 'counter/counter_bloc.dart';
import 'counter/counter_event.dart';
import 'counter/counter_state.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter BLoC Demo',
      home: BlocProvider(
        create: (_) => CounterBloc(),
        child: CounterPage(),
      ),
    );
  }
}

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

    return Scaffold(
      appBar: AppBar(title: Text('Counter using BLoC')),
      body: Center(
        child: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            return Text(
              'Counter: ${state.counterValue}',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => counterBloc.add(Increment()),
            child: Icon(Icons.add),
          ),
          SizedBox(width: 10),
          FloatingActionButton(
            onPressed: () => counterBloc.add(Decrement()),
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

Summary

Useful Tips

• Use BlocProvider to provide BLoC to the widget tree
• Use BlocBuilder to rebuild UI on state changes
• Use BlocListener if you want to perform actions based on state without rebuilding UI

Also Read :- Appointment Booking for Doctor Using Flutter