Bloc Pattern Introduction with Dart in Android Studio

The BLoC (Business Logic Component) pattern is one of the most popular design patterns in Flutter and Dart development, especially for maintaining clean separation between UI and business logic. In this tutorial, you’ll learn how to implement Bloc Pattern with Dart in Android Studio, the most common IDE for Flutter developers.

We’ll build a simple counter app to demonstrate how events, states, and blocs work together. The BLoC pattern makes your app easier to maintain, test, and scale.

For more in-depth knowledge, check the official Flutter Bloc documentation.

1. Step-by-Step Code:

a) Event Class

// counter_event.dart
abstract class CounterEvent {}

class Increment extends CounterEvent {}

class Decrement extends CounterEvent {}

b) State Class

// counter_state.dart
class CounterState {
  final int counter;

  CounterState(this.counter);
}

c) Bloc Class

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

d) Main 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(const MyApp());
}

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

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

  @override
  Widget build(BuildContext context) {
    final bloc = context.read<CounterBloc>();
    return Scaffold(
      appBar: AppBar(title: const Text('Bloc Pattern with Dart')),
      body: Center(
        child: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            return Text(
              'Counter: ${state.counter}',
              style: const TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => bloc.add(Increment()),
            heroTag: 'inc',
            child: const Icon(Icons.add),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => bloc.add(Decrement()),
            heroTag: 'dec',
            child: const Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

With this setup, you now have a fully working Flutter BLoC counter app using Dart in Android Studio. You can expand this architecture to real-world apps like login systems, e-commerce apps, and more.