State Management Using Flutter BloC

Introduction

BloC is like a helper tool for Flutter developers, especially when managing the different states of an app. Imagine “state” as the different situations your app can be in – like loading data, showing content, or handling user interactions.

When building a high-quality app, keeping track of these states becomes really important. Flutter BloC makes this easier by simplifying complex operations, making it easier to manage the app’s state in production-level applications.

Here’s Why Managing State is Crucial:

🔸 It helps developers know exactly what state the app is in at any given time.
🔸 It makes testing different scenarios more manageable to ensure the app responds correctly.
🔸 It allows recording user interactions for making data-driven decisions.
🔸 It enables efficient development by reusing components across different parts of the app.

BloC was designed to meet all these needs and more, aiming to make state changes predictable and consistent throughout the app.

Choosing the right state management solution among the many available can be overwhelming, as there’s no one-size-fits-all solution. What matters most is selecting the one that suits your team and project needs best.

Flutter BloC aims to bring predictability to state changes by controlling when they can occur and ensuring a consistent method for changing states across the entire application.

At its core, Flutter BloC focuses on separating the business logic from the user interface. In simpler terms, it translates user interactions (events) into different states within the app. This helps maintain clarity and organization, making managing and understanding how the app behaves easier.

User Interaction—-> Events—->States

A BLoC takes a stream of events as input and transforms them into a stream of states as output.

BloC or BloC pattern for beginners is hard to understand at beginning unlike Getx. So here I will explain it pretty straght forward and will use a simple counter app example to demonstrate how to use it.

Create a Project and Install it with the Below Command:

flutter pub add flutter_bloc

Project Structure
├── lib
│ ├── app.dart
│ ├── counter
│ │ ├── counter.dart
│ │ ├── cubit
│ │ │ └── counter_cubit.dart
│ │ └── view
│ │ ├── counter_page.dart
│ │ └── counter_view.dart
│ ├── counter_observer.dart
│ └── main.dart
├── pubspec.lock
├── pubspec.yaml

import 'package:bloc/bloc.dart';

class CounterObserver extends BlocObserver {
@override
void onChange(BlocBase<dynamic> bloc, Change<dynamic> change) {
super.onChange(bloc, change);
print('${bloc.runtimeType} $change');
}
}

import 'package:bloc/bloc.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_counter/app.dart';
import 'package:flutter_counter/counter_observer.dart';

void main() {
Bloc.observer = CounterObserver();
runApp(const CounterApp());
}

Counter App

Let’s create lib/app.dart:

CounterApp will be a MaterialApp and is specifying the home as CounterPage.

import 'package:flutter/material.dart';
import 'package:flutter_counter/counter/counter.dart';

class CounterApp extends MaterialApp {
const CounterApp({super.key}) : super(home: const CounterPage());
}

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

class CounterPage extends StatelessWidget {
const CounterPage({super.key});

@override
Widget build(BuildContext context) {
return BlocProvider(
create: (_) => CounterCubit(),
child: const CounterView(),
);
}
}

import 'package:bloc/bloc.dart';

/class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);

void increment() => emit(state + 1);

void decrement() => emit(state - 1);
}

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

class CounterView extends StatelessWidget {

const CounterView({super.key});

@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
return Scaffold(
appBar: AppBar(title: const Text('Counter')),
body: Center(
child: BlocBuilder<CounterCubit, int>(
builder: (context, state) {
return Text('$state', style: textTheme.headline2);
},
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
key: const Key('counterView_increment_floatingActionButton'),
child: const Icon(Icons.add),
onPressed: () => context.read<CounterCubit>().increment(),
),
const SizedBox(height: 8),
FloatingActionButton(
key: const Key('counterView_decrement_floatingActionButton'),
child: const Icon(Icons.remove),
onPressed: () => context.read<CounterCubit>().decrement(),
),
],
),
);
}
}