Multi bloc builder

Question

here is the situation -

my flutter app dashboard screen has two separate list

pageView on top and
List item

i have a bloc named dashboard_bloc and dashboard_event with two separate event to get pageView data and list item data respectively and dashboard_state as well.

this is how i started.

    void initState() {
    // TODO: implement initState
    super.initState();
    _dashboardBloc = DashboardBloc(repository: ProductRepositoryImpl());
    _dashboardBloc.add(FetchHomeProductsEvent(token: token, productId: "1"));
    _dashboardBloc.add(FetchProductsEvent(token: token));
  }

    Widget build(BuildContext context) {
    return Scaffold(
      body: BlocProvider(
        create: (context) => _dashboardBloc,
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Container(
                child: BlocBuilder<DashboardBloc, DashboardState>(
                    bloc: _dashboardBloc,
                    builder: (context, state) {
                      if (state is DashboardLoadingState) {
                        return buildLoading();
                      } else if (state is DashboardErrorState) {
                        return buildErrorUi(state.message);
                      } else if (state is DashboardLoadedState) {
                        return buildProdctsList(state.products, context);
                      } else {
                        return Container();
                      }
                    }),
              ),
              Container(
                child: BlocBuilder<DashboardBloc, DashboardState>(
                    
                    bloc: _dashboardBloc,
                    builder: (context, state) {
                      if (state is DashboardProductState) {
                        return Text(state.products.name);
                      } else if (state is DashboardErrorState) {
                        return buildErrorUi(state.message);
                      } else {
                        return Container();
                      }
                    }),
              ),
            ],
          ),
        ),
      ),
    );
  }

this is bloc transition log -

I/flutter (  877): Transition { currentState:DashboardStateInitialState, event: FetchHomeProductsEvent,
        nextState: DashboardProductState }
I/flutter (  877): Transition { currentState: DashboardProductState, event: FetchProductsEvent, nextState:
        DashboardLoadingState }
I/flutter (  877): Transition { currentState: DashboardLoadingState, event: FetchProductsEvent, nextState:
        DashboardLoadedState }

problem here is that i am not able to render state of FetchHomeProductsEvent. it only renders state of FetchProductsEvent.

How can i handle both event using multiple bloc builder. Any help will be much appreciated.

you will need to create two different blocs one for fetching the list of products and another to fetch the details of a single product. Currently, the last state emitted by the bloc is `DashboardLoadedState` which results in returning `Container()` in your second child of `Column` as state doesn't match to any if — Shubham Tanwar, May 23 '20 at 07:19
thanks for your input, as i am new to this flutter world i find this approach really fishy. according to your theory each widget should be dependent to separate bloc. is this how flutter works with bloc or it is just a work around? — avinash, May 23 '20 at 13:23
the bloc pattern defines to create a middleman between a source of data in your app (e.g an API response) and widgets that need the data. It is totally up to you how you create it, a bloc per widget, a bloc per screen or a single bloc for complete app. In your case if you want to work with a single bloc then you need to manage data accordingly in the state to further pass on to widget. — Shubham Tanwar, May 23 '20 at 15:07
Hey @ShubhamTanwar I really appreciate your effort. consider this - i have a screen with 5 sections and each section are dependent to particular APIs response. How can i manage this with single screen bloc strategy. — avinash, May 23 '20 at 15:50

score 1 · Answer 1 · answered May 10 '21 at 08:02

Personally, this is how I implemented mine At my Homepage ===>Created A bloc for showing swipeable cards (I call it BannerBloc); ===>Create A bloc for showing grids of products (I call it ProductBloc);

These two blocs are only inside my homepage folder, as I always create a bloc folder per page and the folder can then contain blocs like

banner bloc
product bloc

Multi bloc builder

1 Answers1