Wednesday, 26 June 2019

Flutter BLOC Pattern

flutter tutorial,flutter,flutter tutorial for beginners,flutter app,flutter tutorials,flutter sdk,tutorial,flutter course,learn flutter,flutter tutorial ios,flutter firebase tutorial,flutter widgets,flutter app development tutorial,flutter ios,flutter dart,flutter android,google flutter,flutter sdk tutorial,flutter tutorial app,google flutter tutorial,flutter sqflite tutorial,flutter tutorial deutsch,flutter tutorial android

1 BLOC Pattern


BLOC is a pattern created and used by Google; it will help us to achieve a few things:

Separate business logic from presentation logic.

Embrace the asynchronous nature of UI apps.

Can be reused across different Dart applications, regardless of being a
Flutter app or an Angular Dart application

The idea behind BloC is very simple:

BloC exposed Sink APIS to describe asynchronous inputs to our component.

Bloc exposes Stream<T> APIs to describe asynchronous outputs from our component. Finally, we can use a Stream Builder widget to manage the stream of data, removing from us the effort of maintaining a subscription to the stream and redraws of the widget tree.

- The StreamController has two additional objects already built-in: sink (orders supervisor) and stream orders inspector).

- Sink: It's the ability to add new data to be processed by our stream. Comparing to our analogy, it is our order supervisor. The order is not directly ship it to the stream, first, the sink will receive it and then, the same sink will hand it to the stream.

- StreamSubscription - when you no longer need to listen to a stream cancel the subscription;



2 Bloc Delegate Interface


- on Transition is a method that can be implemented to handle whenever a Transition occurs from any Bloc. It is a great place to add universal logging/analytics.

BLOC's input and output interfaces are all Stream / Sink

- BLOC of dependencies are always injectable and environment independent

- There is no conditional branch for each environment in BLOC

Implementation is free as long as it complies with the above rules



3 Bloc Interface


initialState is the state before any events have been processed (before map EvenT State has ever been called). initial State must be implemented.

- map EvenT State is a method that must be implemented when a class extends Bloc. The function takes two arguments: state and event. map EvenT State is called whenever an event is dispatched by the presentation layer. map EvenT State must convert that event, along with the current state, into a new state and return the new state in the form of a Stream which is consumed by the presentation layer.

dispatch is a method that takes an event and triggers mapEventToState. dispatch may be called from the presentation layer or from within the Bloc (see examples and notifies the Bloc of a new event.

- Transform is a method that can be overridden to transform the Stream<Event> before map Event State is called. This allows for operations like distintO and debounce() to be used.

- on Transition is a method that can be overridden to handle whenever a Transition occurs. A Transition occurs when a new Event is dispatched and map EvenT State is called. on Transition is called before a Bloc of state has been updated. It is a great place to add bloc-specific logging/
analytics


4 Stream


Streams provide an asynchronous sequence of data or events. Data sequences include user
generated events and data read from files.

-You can process a stream using either await for or listen) from the Stream API. Streams provide a way to respond to errors. There are two kinds of streams: single subscription or broadcast.

- StreamBuilder is a widget that can convert a stream of user defined objects, to widgets. For example ListView. A StreamBuilder listens to a Stream and, each time some data goes out that Stream, it automatically rebuilds, invoking its builder callback.

This takes two arguments
1) A stream that you can subscribe to
2) A builder, that can convert the
elements of the stream to widgets

- Suppose, you have a Stream, that updates if there is any Ul update (may be from user interaction, or may be resulted from network updates). If your "main" widget, includes a Stream Builder, which listens to the stream, it can act as the element in charge of translating your states to views.


Stream Builder VS  Future Builder

- Both StreamBuilder and FutureBuilder have the same behavior: They listen to changes on
their respective object. And trigger a new build when they are notified of a new value.

- So in the end, their differences is how the object they listen to works.

- Future are like Promise in JS or Task in c#. They are the representation of an asynchronous request. Futures have one and only one response. A common usage of Future is to handle
http calls. What you can listen on a Future is it is state. Whether it is done, finished with a success, or had an error. But that it.

Stream on the other hand are like async Iterator in JS. This can be assimilated to a value that can change over time. It usually is the representation of web-sockets or events (such as click). By listening to a Stream you will get each new value  and also if the Stream had an error
or completed.

- A Future can not listen to a variable change. It is a one time response. Instead you will need to use a Stream.


- FetureBuider use firebase operation.


6 Types of Streams


1) Single-subscription Streams: This type of Stream only allows a single listener during the whole lifetime of that Stream.

2) Broadcast Streams: This second type of Stream allows any number of listeners.