[Flutter] Using generics to create reusable Widget which can use different Instances of same...

i am completely new to generics and I am struggling to get this running.

I want to create a Reusable Page with a BlocProvider. I am creating multiple Instances of one Bloc to save code using mixins on the Bloc like this:

mixin ServiceAssistantBloc on Bloc<CustomerAssistantEvent, CustomerAssistantState> {}
mixin EmergencyAssistantBloc on Bloc<CustomerAssistantEvent, CustomerAssistantState> {}
mixin FixAssistantBloc on Bloc<CustomerAssistantEvent, CustomerAssistantState> {}


Two Pages down the Widget Tree there is said Page. Now how can i set up the BlocBuilder for it to know which Bloc has been provided and use it?

I am trying to follow this:

Named BlocProvider to use the same Bloc implementation multiple times in the same widget

Now if I try to use the BlocBuilder as mentioned above. I get the error that the bloc has not been provided and the app crashes.

class CustomerAssistantChecklist<T extends Bloc<CustomerAssistantEvent, CustomerAssistantState>> extends StatelessWidget {

final dynamic selectedCustomer;
const CustomerAssistantChecklist({super.key, required this.selectedCustomer});

@override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(
title: ListTile(
title: CustomerFullNameDetails(customer: selectedCustomer),
subtitle: CustomerAddressDetails(customer: selectedCustomer),
),
),
body: BlocBuilder<T, CustomerAssistantState>(
builder: (context, state) {
List<Widget> checkListCards = [];
int index = 0;
while (index < state.customerTaskList.length) {
checkListCards.add(checkListCard(state: state, index: index, context: context));
index++;
}

return ListView(
children: [
...checkListCards,
],
);
},
),
);
}
}


I provide the Blocs using the mixins like this:

return MultiBlocProvider(
providers: [
BlocProvider<ServiceAssistantBloc>(
create: (context) => CustomerAssistantBloc(
customerAssistantService:
CustomerAssistantService(CustomerAssistantType.service))
..add(CustomerChecklistFetched(
customerId: selectedServiceClient.id))),
BlocProvider<EmergencyAssistantBloc>(
create: (context) => CustomerAssistantBloc(
customerAssistantService:
CustomerAssistantService(CustomerAssistantType.emergency))
..add(CustomerChecklistFetched(
customerId: selectedServiceClient.id))),
BlocProvider<FixAssistantBloc>(
create: (context) => CustomerAssistantBloc(
customerAssistantService:
CustomerAssistantService(CustomerAssistantType.fix))
..add(CustomerChecklistFetched(
customerId: selectedServiceClient.id))),
],
child: const ServiceClientDetailHomeView(),
);


and the blocs value is being provided like this while navigating:

return MaterialPage<void>(
child: BlocProvider.value(
value: BlocProvider.of<ServiceAssistantBloc>(context),
child: CustomerAssistantChecklist(
selectedCustomer:
ServiceClientService().selectedCustomer),
),
);

Continue reading...