cheat sheet to help you set up and use the BLoC pattern in a Flutter application

here's a concise cheat sheet to help you set up and use the BLoC pattern in a Flutter application:

1. Setup Dependencies

Add the required packages to your pubspec.yaml:

dependencies:

  flutter_bloc: latest_version

  bloc: latest_version

2. Define Events and States

Create abstract classes or enums for your events and states.

// Counter Events

enum CounterEvent { increment, decrement }

// Counter States

abstract class CounterState {}

class CounterInitial extends CounterState {}

class CounterValue extends CounterState {

  final int value;

  CounterValue(this.value);

}

3. Create the BLoC

Extend `Bloc<Event, State>` to create your BLoC class.

import 'package:flutter_bloc/flutter_bloc.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {

  CounterBloc() : super(CounterInitial()) {

    on<CounterEvent>((event, emit) {

      if (state is CounterValue) {

        final currentValue = (state as CounterValue).value;

        int updatedValue = currentValue;

        switch (event) {

          case CounterEvent.increment:

            updatedValue = currentValue + 1;

            break;

          case CounterEvent.decrement:

            updatedValue = currentValue - 1;

            break;

        }

        emit(CounterValue(updatedValue));

      } else {

        emit(CounterValue(0));  // Default initial value

      }

    });

  }

}

4. Provide the BLoC

Use `BlocProvider` to provide the BLoC to the widget tree.

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: BlocProvider(

        create: (context) => CounterBloc(),

        child: CounterPage(),

      ),

    );

  }

}

5. Use the BLoC in Widgets

Utilize `BlocBuilder` or `BlocListener` to build UI components based on state changes.

class CounterPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text("Counter Example")),

      body: Center(

        child: BlocBuilder<CounterBloc, CounterState>(

          builder: (context, state) {

            if (state is CounterValue) {

              return Text('Count: ${state.value}', style: TextStyle(fontSize: 24));

            }

            return Text('Count: 0', style: TextStyle(fontSize: 24));

          },

        ),

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: () => context.read<CounterBloc>().add(CounterEvent.increment),

        tooltip: 'Increment',

        child: Icon(Icons.add),

      ),

    );

  }

}

6. Debugging Tips

• Use `BlocObserver` to track all BLoC events, transitions, and errors.

• Ensure all events are handled in the BLoC.

• Check that state emission happens only after all conditions and calculations.

class SimpleBlocObserver extends BlocObserver {

  @override

  void onEvent(Bloc bloc, Object? event) {

    super.onEvent(bloc, event);

    print('onEvent $event');

  }

  @override

  void onTransition(Bloc bloc, Transition transition) {

    super.onTransition(bloc, transition);

    print('onTransition $transition');

  }

  @override

  void onError(BlocBase bloc, Object error, StackTrace stackTrace) {

    print('onError $error');

    super.onError(bloc, error, stackTrace);

  }

}

void main() {

  BlocOverrides.runZoned(

    () => runApp(MyApp()),

    blocObserver: SimpleBlocObserver(),

  );

}

This cheat sheet should help you quickly set up and manage state using the BLoC pattern in your Flutter applications.