flutter bloc delays to rebuild BlocConsumer after emit

I have noticed that the bloc/cubit delays to rebuild after emit to to a new state for example in my code.

I expect for the bloc/cubit to change the state and refresh the blocConsumer with no delay.

What is the reasons for this?

Add Document Function In The Bloc/Cubit

    try {
      emit(AddDocumentLoading());

      AddDocumentModel? makeDocumentReadyFunctionResult = await makeDocumentReadyToUpload(context, formKey: formKey, documentNumber: documentNumber, documentExpiryDate: documentExpiryDate, documentNotes: documentNotes, remark: remarks);
      emit(AddDocumentSuccess());

    
    } catch (e) {
      emit(AddDocumentFailure(message: e.toString()));
      return false;
    }
  }

My BlocConsumer Code

    BlocBuilder<AddDocumentCubit, AddDocumentState>(
                      builder: (context, state) {
                          return CustomButton(
                            onPressed: () async{
                               bool isSuccess = await AddDocumentCubit.get(context).addDocument(
                                  context, formKey: _formKey,
                                  remarks: _documentRemarksFieldController.text,
                                  documentNotes: _documentNotesFieldController.text,
                                  documentNumber: _documentNumberFieldController.text,
                                  documentExpiryDate: _documentExpiryDateFieldController.text
                               );
                               if(isSuccess) {
                                 setState(() {
                                   resetForm();
                                   isSubmitted = true;
                                 });
                               }


                            },

                            isLoading: (state is AddDocumentLoading) ? true : false ,
                            text: S.of(context).SaveDocument , isFullWidth: true,);
                        }
                    )

So, here when I press the button, it lags for a second after the Bloc/Cubit emits to a new state and after the lag it rebuild the BlocConsumer/Blocbuilder/BlocListner. I have no idea why this happens, but what is the reason for this? And how can I prevent it from happening?

Solution

There are multiple issues with your code, with the usage of Bloc. But to answer your question, it might be stuck at the line

bool isSuccess = await AddDocumentCubit.get(context).addDocument(...

as it is awaiting the execution of addDocument Method.

You may use a BlocConsumer like below. And avoid calling setState by driving everything through the bloc if possible.

BlocConsumer<BlocA, BlocAState>(
  listener: (context, state) {
    // Reset your form based on the state whether success or failure
  },
  builder: (context, state) {
    // your builder here
  },
);

As a quick non recommended fix, you can try this

CustomButton(
            onPressed: () {
              AddDocumentCubit.get(context).addDocument(
                  context, formKey: _formKey,
                  remarks: _documentRemarksFieldController.text,
                  documentNotes: _documentNotesFieldController.text,
                  documentNumber: _documentNumberFieldController.text,
                  documentExpiryDate: _documentExpiryDateFieldController.text
              ).then((isSuccess) {
                if(isSuccess) {
                  setState(() {
                    resetForm();
                    isSubmitted = true;
                  });
                }
              })
            },