Bloc: [Recommendation] What's the best practice for my case?

[lambasoft]

Hello,

First of all, thank you from the bottom of my heart for this package. I can't image developing apps in flutter without it.

Talking of which, let's take this app as an example

Every single card shown on the screen fetches it's data from an api request. All from the same api service.

How should I go to create flutter_bloc logic here? Should I create a bloc file for every card?

What I tried:

1 Bloc:

• DashboardBloc

Created an event for every card on the screen:

• LoadMarketingDataEvent
• LoadConversionDataEvent
• LoadUsersDataEvent
• LoadSalesDataEvent
• LoadAvgSessionDataEvent
• ....

For every event, I created 2 states, one when the data was loading, and another when the data loaded:

• LoadingMarketingDataState
• LoadedMarketingDataState
• LoadingConversionDataState
• LoadedConversionDataState
• LoadingUsersDataEvent
• LoadedUsersDataEvent
• ....

Now, on every single card of the screen, I added a BlocBuilder that handles only the states of the card, so for Marketing card as instance, I had something like this:

Card(
 child: BlocBuilder<DashboardBloc, DashboardState>(
 builder: (context, state) {
   if (state is LoadingMarketingDataState) {
     return Center(
       child: CircularProgressIndicator(),
     );
   } else if (state is LoadedMarketingDataState) {
     return Center(child: Text("Loaded Marketing Data"));
   } else {
     return Center(
       child: Text("STATE_NOT_HANDLED"),
     );
   }
 },
 ),
)

And on the initState of the page I dispatched all the events in something like that:

  void initState() {
    // TODO: implement initState
    super.initState();
    BlocProvider.of<DashboardBloc>(context).add(LoadMarketingDataEvent());
    BlocProvider.of<DashboardBloc>(context).add(LoadConversionDataEvent());
    BlocProvider.of<DashboardBloc>(context).add(LoadUsersDataEvent());
    BlocProvider.of<DashboardBloc>(context).add(LoadSalesDataEvent());
  }

The problem I had, which I suppose you already guessed it, is that only the last state received was showing it's text, and all the other cards showed the Text "STATE_NOT_HANDLED".

How can I solve my problem? Do I have to create a separate Bloc for every single card? (please no:p)

Oh, and I want all the cards to load together, not one after another.

Thank you!

[narcodico]

Hi @lambasoft !
I've put together a quick sample of how a basic approach would look like given your requirements: https://github.com/RollyPeres/dashboard_demo
Hope it gives you a good starting point.

[lambasoft]

@RollyPeres Thank you very much! I really appreciate your efforts, and you made it much clearer to me.

Please correct me if I'm wrong, but if I used your method, for a card to show its content, it has to wait for all other contents to be done. In another word, all cards will show content at once together. I would not have a first-come-first-serve kind of method. Else I must make every card into separate blocs so it loads it's content without waiting for others to finish, no other way. Right?

Thanks again Rolly

[narcodico]

Oh, and I want all the cards to load together, not one after another.

The approach I took was based on your requirement of loading all cards simultaneously. Future.wait will send all those requests in parallel and the result will be available once all of them are finished. Your card contents are built based on a single state.

If you want to handle each request/card separately you can do that in the same bloc too. You just need to fine tune when your bloc builder will rebuild. I won't get into much details since this wasn't what you seemed to be needing, but feel free to comment if you need further help.

[felangel]

@lambasoft thanks so much for the positive feedback and thanks @RollyPeres for taking the time to answer!

Closing for now but feel free to comment with additional questions and I’m happy to continue the conversation 👍