Flutter web resizing triggering bloc event?

Question

Whenever i resize my chrome browser it emits an event to add a new "variant" to my column, i have no idea what it could be triggering it. I know its triggering the on add variant event but i have no clue why its triggering when resizing, or zooming in or out.

Builder

                        BlocBuilder<VariantBloc, VariantState>(
                          builder: (context, state) {

                            if(state is AddedVariantState){
                              variants++;
                            }else if (state is DeletedVariantState){
                              variants--;
                              usecase.multipleUsecase.removeAt(state.index);
                            }

                            return Align( 
                              alignment: Alignment.centerLeft,
                              child: ListView.builder(
                              shrinkWrap: true,
                              itemCount: variants,
                              itemBuilder: (context, index) {
                                usecase.multipleUsecase.add(MultipleAddServiceUsecase(index: index));
                                return VariantTextfield(
                                  usecase: usecase.multipleUsecase[index],
                                  index: index,
                                );
                              },
                              ),
                            );
                               
                          },
                        ),

Button that triggers event

class MarketplaceAddProductVariantButton extends StatelessWidget {
  const MarketplaceAddProductVariantButton({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {    
    return Align(
      alignment: Alignment.centerLeft,
      child: NeumorphicButton(
        onPressed: () {
          context
                .read<VariantBloc>()
                .add(OnAddVariantEvent());
        },
        margin:
            EdgeInsets.only(left: ScreenUtils.percentWidth(context, .5)),
        style: marketplaceButtonsNeuStyle.copyWith(
            boxShape:
                NeumorphicBoxShape.roundRect(BorderRadius.circular(17))),
        child: Container(
            alignment: Alignment.center,
            height: ScreenUtils.percentHeight(context, 4.5),
            width: ScreenUtils.percentWidth(context, 12),
            child: AutoSizeText(
              'Agregar otro',
              textAlign: TextAlign.center,
              style: _textStyle(),
            )),
      ),
    );
  }

Bloc that just emits event.

VariantBloc() : super(VariantInitial()) {
    on<OnAddVariantEvent>((event, emit) {
      emit(AddedVariantState(());
    });

Before resizing.

After.

you should not update `variants` in your `BlocBuilder` - any data should come directly from the bloc in your "state" class — pskink, Dec 08 '22 at 20:24

score 2 · Accepted Answer · answered Dec 08 '22 at 23:31

Actually, it's not triggering a new event. When you resize the window the build function will be called and so the BlocBuilder will be rebuilt, and if the last emitted state is AddedVariantState then this condition if(state is AddedVariantState) will be true and the variants variable will increase. The opposite behavior will happen if the last emitted state was DeletedVariantState. That's why you should put the variants variable in the VariantState class.

Flutter web resizing triggering bloc event?

1 Answers1