Why am I getting an error while adding async keyword to BlocBuilder function?

Question

I am getting error as soon as I add async keyword to the blocbuilder function to use await later. Here is my code snippet:

 BlocBuilder<ProductCubit, CollectionState>(
                  builder: (context, state) {
                    if (state is CollectionSuccess<ProductModel>) {
                      var productModel = state.models.first;
                      return BlocBuilder<AuthCubit, AuthState>(
                        builder: (context, state) async {       // async added here gives error
                          if (state is AuthSuccess) {
                            var userData = state.userData;
                            var docRef = userData.getActivePlan(
                                productModel); //await? and async?
                            return BlocProvider(
                                create: (context) => StripeProductDocumentCubit(
                                    documentRef: docRef as DocumentReference<
                                        Map<String, dynamic>>),
                                child: BlocBuilder<StripeProductDocumentCubit,
                                    DocumentState>(
                                  builder: (context, state) {
                                    if (state is DocumentSuccess<
                                        StripeProductModel>) {
                                      var stripeDocumentModel = state.model;
                                      return BlocConsumer<ParticipantsCubit,
                                          ParticipantState>(
                                        listener: (context, state) {},
                                        builder: (context, state) {
                                          return state is DatabaseSuccess
                                              ? Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment.start,
                                                  mainAxisSize:
                                                      MainAxisSize.min,
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.end,
                                                  children: [
                                                      Text(
                                                          'Active participants: ${state.participantsCount} / ${stripeDocumentModel.metaData['maxParticipants']}'),
                                                    ])
                                              : Container();
                                        },
                                      );
                                    } else {
                                      return const CircularProgressIndicator();
                                    }
                                  },
                                ));
                          } else {
                            return const CircularProgressIndicator();
                          }
                        },
                      );
                    } else {
                      return const CircularProgressIndicator();
                    }
                  },
                ),

The error says The argument type 'Future<Widget> Function(BuildContext, AuthState)' can't be assigned to the parameter type 'Widget Function(BuildContext, AuthState)'. Is there a fix?

Answer 1

The error is loud and clear

For simplicity: You can think of that as passing some argument to some function.

Example:

int add(int a , int b)=>a+b;

i can't call that function by the following params: add(5.6 , 8.8);

an exception will be thrown that indicate that double can't be assigned to int.

---

For your problem: Builder is also an argument which is defined as a function within the BlocBuilder, BlocConsumer or whatever with the follwing signature:

Widget Function(BuildContext, AuthState) builder;

Widget Function(BuildContext, AuthState) this is called a method signature, and it's obvious that it's a synchronous method.

So, when you are passing the builder as a function, you must conform and commit to the defined method signature, you can't make it asynchronous method by adding async keyword before its body.

If it was intended to be asynchronous method, it's signature will look like the following:

Future<Widget> Function(BuildContext, AuthState) builder;

I think you got this.