April Flutter Meetup - BLoC State Management

Transcript

1. BLoC
   A predictable state management library
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

6. Streams
   Core Concepts
   

   View Slide

7. What is a Stream
   

   View Slide

8. What is a Stream
   Imagine a river
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

15. Cubit
    Core Concepts
    

    View Slide

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
    

    View Slide

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

    

    View Slide

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

    

    View Slide

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

    

    View Slide

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

    

    View Slide

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

    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. Bloc
    Core Concepts
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

33. Todo App demo
    The ages old sample app
    

    View Slide

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/
    +
    +
    +
    +
    

    View Slide

35. THANK YOU!
    

    View Slide