In Flutter applications, the Flutter BLoC (Business Logic Component) is used to manage the state. It helps separate business logic from UI. It ensures that the user interface is not strongly liaison with the business logic, making the app more versatile. It is powerful since it allows the creation of all kinds of applications. For instance, the Flutter bloc is appropriate in both production and learning environments.

Key Concepts of BLoC

1. Streams: Streams help in managing user actions and data and how it flows through your app. In simple words, streams are like rivers which carry messages(messages can be anything, such as user actions or data updates).
2. Sink: It’s where you input data that you want to process. Data is poured into the sink, which then travels through it. A sink is like a place where you pour water into the stream.
3. Stream Controller: A Stream Controller helps manage the streams, sinks and data, ensuring that data flows correctly through the system. In other words, it is a controller that controls the flow of water in the streams.
4. Stream Builder: It updates the UI on the based of latest data in the stream. It updates the part of the app it’s watching whenever new data comes down the stream through the sink. It’s like a watchman that keeps an eye on the stream.

Installation of Flutter BLoC package

Create Flutter Environment:

Install Flutter on your system by following the official installation guide – Install Flutter in Windows.

Create Flutter Project:

Create a new Flutter project by running the command in the terminal.

flutter create my_bloc_app
cd my_bloc_app

Add Dependencies:

Open the ‘pubspec.yaml’ file in the root of your project and add dependencies by following code.

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.1.6
  cupertino_icons: ^1.0.6

Install Dependencies:

Install the newly added dependencies by running the following command in your terminal or command prompt.

flutter pub get

Import BLoC Package in the Dart Code

To use the BLoC in your Flutter application follow the give steps.

Step 1 : Define events by creating a new file counter_event.dart

// lib/counter_event.dart
abstract class CounterEvent {}

class CounterIncrementPressed extends CounterEvent {}

Step 2: Now define the state by creating file named(counter_state.dart).

// lib/counter_state.dart
class CounterState {
  final int counter;
  const CounterState(this.counter);
}

Step3: Now create the BLoC by creating the file named as( counter_bloc.dart)

// lib/counter_bloc.dart
import 'package:bloc/bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(const CounterState(0)) {
    on<CounterIncrementPressed>((event, emit) {
      emit(CounterState(state.counter + 1));
    });
  }
}

Step 4: Now use this file in UI by modifying (main.dart) file.

// lib/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: (context) => CounterBloc(),
        child: CounterPage(),
      ),
    );
  }
}

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

    return Scaffold(
      appBar: AppBar(title: Text('Flutter BLoC Example')),
      body: BlocBuilder<CounterBloc, CounterState>(
        builder: (context, state) {
          return Center(
            child: Text('Counter: ${state.counter}'),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterBloc.add(CounterIncrementPressed());
        },
        child: Icon(Icons.add),
      ),
    );
  }
}