Mohammed Nabil
Mohammed Nabil

Reputation: 802

How to implement two different blocs in one bloc in Flutter

For example i have two blocs, Bloc A and Bloc B. Both Bloc's is calling different api's and when i open the screen or app Bloc A And Bloc B calls the api. Problem is sometimes Bloc A or Bloc B takes sometime to load so during this i display circular progress indicator. But it doesn't look good that is Bloc A builds successfully and displays the content and Bloc B still showing circular progress indicator. So how can i implement that is if both Bloc A & B successfully loads then display both content otherwise show only single circular progress indicator at the center. How can i achieve this ?

Upvotes: 0

Views: 2198

Answers (1)

Wiktor
Wiktor

Reputation: 775

My way to go would be: Create additional getter in BlocA and BlocB, like BlocAStatus. Then simply create a BlocListener on wheter BlocA or BlocB and display content only if Bloc itself is ready and the other Bloc either.

BlocBuilder<BlocA, BlocAState>(
   builder: (context, state) {
    if(state.blocBStatus == BlocStatus.ready) {
      // display content
    }
   }
)

In order to properly communicate between BLoCs, reading Bloc-to-Bloc Communication documentation section should be helpful. https://bloclibrary.dev/#/architecture?id=bloc-to-bloc-communication

Upvotes: 1

Related Questions