April Flutter Meetup - BLoC State Management

1. BLoC A predictable state management library
2. BLoC A predictable state management library Android Dev Transit App Samuel Dionne
3. Agenda Why BLoC? Core Concepts Cubit VS Bloc Todo App demo 1 2 3 4
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
5. 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
6. Streams Core Concepts
7. What is a Stream
8. What is a Stream Imagine a river
9. Every now and then, a sheet of paper floats down to you. What is a Stream Imagine a river
10. Every now and then, a sheet of paper floats down to you. What is a Stream Imagine a river
11. Every now and then, a sheet of paper floats down to you. What is a Stream Imagine a river
12. Every now and then, a sheet of paper floats down to you. What is a Stream Imagine a river
13. 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.
14. 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.
15. Cubit Core Concepts
16. 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
17. class CounterCubit extends Cubit<int> { CounterCubit() : super(0); void increment() => emit(state + 1); }

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

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

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

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

22. @override Widget build(BuildContext context) { return BlocProvider( create: (_) => CounterCubit(), child: const CounterView(), ); } BlocBuilder<CounterCubit, int>( builder: (context, state) { return Text('$state'); },
23. create: (_) => CounterCubit(), child: const CounterView(), ); } BlocBuilder<CounterCubit, int>( builder: (context, state) { return Text('$state'); }, ) FloatingActionButton( child: const Icon(Icons.add),
24. builder: (context, state) { return Text('$state'); }, ) FloatingActionButton( child: const Icon(Icons.add), onPressed: () { context.read<CounterCubit>().increment(); }, )
25. Bloc Core Concepts
26. 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
27. abstract class CounterEvent {} class CounterIncrementPressed extends CounterEvent {} class CounterBloc extends Bloc<CounterEvent, int> { CounterBloc() : super(0){ on<CounterIncrementPressed>((event, emit) { emit(state + 1); }); } }
28. abstract class CounterEvent {} class CounterIncrementPressed extends CounterEvent {} class CounterBloc extends Bloc<CounterEvent, int> { CounterBloc() : super(0){ on<CounterIncrementPressed>((event, emit) { emit(state + 1); }); } }
29. abstract class CounterEvent {} class CounterIncrementPressed extends CounterEvent {} class CounterBloc extends Bloc<CounterEvent, int> { CounterBloc() : super(0){ on<CounterIncrementPressed>((event, emit) { emit(state + 1); }); } }
30. abstract class CounterEvent {} class CounterIncrementPressed extends CounterEvent {} class CounterBloc extends Bloc<CounterEvent, int> { CounterBloc() : super(0){ on<CounterIncrementPressed>((event, emit) { emit(state + 1); }); } }
31. builder: (context, state) { return Text('$state'); }, ) FloatingActionButton( child: const Icon(Icons.add), onPressed: () { const event = CounterIncrementPressed(); context.read<CounterBloc>().add(event); }, )
32. 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
33. Todo App demo The ages old sample app
34. 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/ + + + +
35. THANK YOU!