Search code examples
flutterflutter-webbloc

Flutter web resizing triggering bloc event?


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. enter image description here

After. enter image description here


Solution

  • 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.