BLoC A predictable state management library

BLoC A predictable state management library Android Dev Transit App Samuel Dionne

Agenda Why BLoC? Core Concepts Cubit VS Bloc Todo App demo 1 2 3 4

know what state our application is in at any point in time easily test every case to make sure our app is responding appropriately record every user interaction so that we can make data-driven decisions work as efficiently as possible and reuse components develop fast and reactive apps + + + + + Why BLoC As developers we want to

Simple Easy to understand & can be used by developers with varying skill levels. Powerful Help make amazing, complex applications by composing them of smaller components. Testable Easily test every aspect of an application so that we can iterate with confidence. Values

Streams Core Concepts

What is a Stream

What is a Stream Imagine a river

Every now and then, a sheet of paper floats down to you. What is a Stream Imagine a river

Every now and then, a sheet of paper floats down to you. What is a Stream Imagine a river

Every now and then, a sheet of paper floats down to you. What is a Stream Imagine a river

Every now and then, a sheet of paper floats down to you. What is a Stream Imagine a river

What is a Stream Imagine a river Every now and then, a sheet of paper floats down to you. All those sheets of paper are async data coming down the stream.

State State State State What is a Stream Imagine a river Every now and then, a sheet of paper floats down to you. All those sheets of paper are async data coming down the stream. In the world of BLoC, those sheets of papers represent the State of your application.

Cubit Core Concepts

States Outputted in a stream. UI components can be notified of states changes and redraw themselves. Functions Invoked to trigger state changes. Cubit states functions

class CounterCubit extends Cubit { CounterCubit() : super(0); void increment() => emit(state + 1); }


class CounterCubit extends Cubit { CounterCubit() : super(0); void increment() => emit(state + 1); }


class CounterCubit extends Cubit { CounterCubit() : super(0); void increment() => emit(state + 1); }


class CounterCubit extends Cubit { CounterCubit() : super(0); void increment() => emit(state + 1); }


void main() { final cubit = CounterCubit(); print(cubit.state); // 0 cubit.increment(); print(cubit.state); // 1 cubit.close(); }


@override Widget build(BuildContext context) { return BlocProvider( create: (_) => CounterCubit(), child: const CounterView(), ); } BlocBuilder( builder: (context, state) { return Text('$state'); },

create: (_) => CounterCubit(), child: const CounterView(), ); } BlocBuilder( builder: (context, state) { return Text('$state'); }, ) FloatingActionButton( child: const Icon(Icons.add),

builder: (context, state) { return Text('$state'); }, ) FloatingActionButton( child: const Icon(Icons.add), onPressed: () { context.read().increment(); }, )

Bloc Core Concepts

States Outputted in a stream. UI components can be notified of states changes and redraw themselves. Events Received as stream, they get converted into state changes. Bloc states events

abstract class CounterEvent {} class CounterIncrementPressed extends CounterEvent {} class CounterBloc extends Bloc { CounterBloc() : super(0){ on((event, emit) { emit(state + 1); }); } }

abstract class CounterEvent {} class CounterIncrementPressed extends CounterEvent {} class CounterBloc extends Bloc { CounterBloc() : super(0){ on((event, emit) { emit(state + 1); }); } }

abstract class CounterEvent {} class CounterIncrementPressed extends CounterEvent {} class CounterBloc extends Bloc { CounterBloc() : super(0){ on((event, emit) { emit(state + 1); }); } }

abstract class CounterEvent {} class CounterIncrementPressed extends CounterEvent {} class CounterBloc extends Bloc { CounterBloc() : super(0){ on((event, emit) { emit(state + 1); }); } }

builder: (context, state) { return Text('$state'); }, ) FloatingActionButton( child: const Icon(Icons.add), onPressed: () { const event = CounterIncrementPressed(); context.read().add(event); }, )

Cubits are simple and quick to start with. Blocs are more complexe, but come with the added benefit of Traceability. Meaning you know the sequence of state changes as well as exactly what triggered those changes. Using stream for events allow us to take advantage of stream operators such as buffer, debounceTime, throttle, etc. Worry not, because it’s easy to refactor and scale-up from a Cubit to a Bloc. Cubit VS Bloc When would we use one over the other

Todo App demo The ages old sample app

Get started with BLoC and helpful packages Resources https://bloclibrary.dev/ https://pub.dev/packages/freezed https://pub.dev/packages/hydrated_bloc https://cli.vgv.dev/ + + + +

THANK YOU!