Flutter BLoC

Transcript

1. Flutter BLoC @rajivmanivannan
2. What is BLoC? Business Logic Component • It's a design pattern developed by Google. • To separate the business logic from the presentation layer. Flutter BLoC • One of the state management library for Flutter Apps. • Design Pattern (concept of reactive programming, which means that the UI layer reacts to changes in the state of the application) • Architectural Pattern ( variation of MVVM pattern)
3. Why BLoC? • It separate the business logic layer from the presentation layer. Hence, the application becomes easier to maintain, test, and modify. • It helps to improve the performance of the application by minimising the number of re-renders of UI widgets.
4. How it works? To create a BLoC logic you need these three classes: • your_feature_bloc.dart • your_feature_state.dart • your_feature_event.dart
5. BLoC Core Concepts • Stream is a sequence of asynchronous data events that can be listened to by widgets in the Flutter framework. • Cubit is stands for “Change in state unit”. It’s the minimal version of of BLoC. It typically contains a single stream of state changes and a method for emitting new states.It receive input through their methods. (States and Methods) • Bloc it contains the stream of state changes and events. (States and Events)
6. BLoC Architecture • Data Layer (Models-> DataProviders-> Repositories) • Business Logic Layer (blocs and cubits) • Presentation Layer (pages, screens, widgets and animations) * Repository is responsible for managing the communication with the data source (such as a database, API, or fi le system), abstracting away the details of how the data is stored and retrieved.
7. Flutter BLoC Concepts "Everything in Flutter is Widgets” • A Flutter app is built using a tree of widgets called a widget tree. • The widget tree represents the hierarchical structure of the UI, with each widget having one parent and zero or more children. • Widget is Flutter version of a Class
8. • BlocProvider is in charge of providing a bloc to its children. Is the way of “initialising” the bloc before using it. (Flutter's Dependency Injector widget ) • Repository Provider same like BlocProvider but it provides a unique instance of a repository. • BlocListener is a widget that listens to state changes emitted by a ‘Bloc’ and then react to them. Eg: To show a snackbar/dialog/ navigate to another page, call a event in another bloc. • BlocBuilders is a widget that helps re-building widget tree based on bloc state changes. • BlocConsumer is a widget which combines BlocBuilder and BlocListener.
9. • MultiBlocProvider is to provide multiple Blocs to its descendants. The purpose of using MultiBlocProvider is to ensure that all the Blocs are available to all the widgets that depend on them, without having to manually pass them down the widget tree. • MultiRepositoryProvider is to provide multiple repositories to its descendants. The purpose of using MultiRepositoryProvider is to ensure that all the repositories are available to all the widgets that depend on them, without having to manually pass them down the widget tree.
10. Demo • https://github.com/rajivmanivannan/ fl utter-bloc-demo