Bloc Pattern

Stream & Stream Builder

What is  Stream?

Stream is a series of things like items or widgets you want to show on the screen. Stream is useful when you are dealing with UI.

Q-What is Stream Builder?

A widget that builds everything beneath like every widget beneath rebuild if there are any changes that occur.

                                 

List<String> contacts=[“user1”,”user2”,”user3”,”user4”,”user5”]

Class ContactManager{

Stream<List<String>> getContactListNow async*{

For(var I=0,I<contacts.length;I++){

Yeield contacts.sublist(0,I+1)

}

Yield-Provide the element to stream 

Note-if you want to display 3 element manager is responsible to provide that three-element 

final StreamController<int> _countController=StreamController<int>();

Stream<int> getContactCounter=_counterstream

Sink:-The  process of inputting the data is called a sink.

Stream:- The outputting the data is called Stream.

Subscriber:-The widget that depends on Stream is called subscriber.

Reason to use Bloc:-

  • It’s structurally organized and easy to use.
  • Recommended everywhere in small, medium & large projects.
  • The code is easily testable so you can iterate with confidence.
  • created by google separate presentation logic from business logic.
  • Created by flexix Angelov to k  ow the state of the app.

Advantage:-

  • Easily understandable that what happens inside the app
  • More Structured code
  • know and understand every stage of your app

Cubit:-

A Cubit is a special kind of stream component that is based on some function call from UI, a function that rebuilt UI emitting different states of the stream.

                           

A  Cubit is a minimal version of the bloc.

Note:- Bloc extends Cubit.

Q. When should I use cubit over bloc in the project?

For simple operations, you can use cubit.

Note:- we can use bloc every condition for resource perspective  it is good to use cubit when there is a lite operation.

Q. What is the difference between Cubit and Bloc?

  • Takes action as a function.

  • Takes action as an event.

Block Provider

BlocProvider is the widget that provides a block to all his children, BlocProvider will provide a single instance of the bloc to the subtree below it.

Q. How do blog providers create a single instance?

BlocProvider(

Create:(BuildContext context)=>BlocA()

Child:ChildA();

);

BuildContext:- The context in which specific widgets are built.

Q How we can Access it?

BlocProvider.of<BlocA>(context);

              Or 

Context.bloc<BlocA>();

Note:- By default, BlocProvider creates bloc lazily means it will take space in memory when they actually come into use.

BlocProvider handles the closing part of the bloc automatically.

Q. Is the bloc instance created in the first screen also available in the second screen also?

No, because the context changes the screen to screen so we can not get the same instance on screen.

Note:- so for accessing the single instance on the second screen we have to use BlocProvider.value.

BlocProvider.value(

//here we provide the  instance BlocA to new portion of tree

Value:BlocProvider.of<BlocA>(context),

Child:Screen2()

);

Providing it to the second tree won’t close the only instance of the bloc when the second page gets destroyed, this is because the instance may still be needed in the page above in the ancestor tree.

BlocBuilder

A widget that helps RE-BUILDING the UI based on bloc state change.

Note:- Rebuilding a large chunk of UI takes a lot of time to compute so for a better experience you have to wrap the exact point of UI, where you want to change.

BlocBuilder is the widget that requires a bloc or cubit and builder function. 

BlocBuilder<BlocA,BlocAState>(

Builder:(context,state){

}

)

Note:- The builder function must be a pure function. 

The function where they return value depends only on the function argument.

  • BlocBilder  can call multiple times

Bloc Listener

The widget that used to listen to one widget from another widget, is called once per state.

BlocListener<BlocA,BlocState>(

Listener:(context,state){

}

Child:Container()

)
  • Optional listen when function for BlocListener as the optional build when the function was for BlocProvider.
  • It can listen to any state change.

Bloc Consumer

A widget that combines both BlocListener and BlocBuilder into a single widget.

Leave a Reply