Multi bloc builder

Question

here is the situation -

my flutter app dashboard screen has two separate list

1. pageView on top and
2. 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.

Sandglass

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 – Delafuente

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? – Sandglass

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. – Delafuente

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. – Sandglass

Answer 1

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

Tammeratammi