How to split a MultiProvider list of providers in Flutter?

Question

I have an app that starts with:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final initFuture = MobileAds.instance.initialize();
  final adState = AdState(initFuture);

  runApp(
    MultiProvider(
      providers: [
        Provider<AdState>(create: (_) =>  adState),
        ChangeNotifierProvider(create: (_) => SomeNotifier1()),
        ChangeNotifierProvider(create: (_) => SomeNotifier2()),
        ChangeNotifierProvider(create: (_) => SomeNotifier3()),
        ChangeNotifierProvider(create: (_) => SomeNotifier4()),
        ChangeNotifierProvider(create: (_) => SomeNotifier5()),
        ChangeNotifierProvider(create: (_) => SomeNotifier6()),
        ChangeNotifierProvider(create: (_) => SomeNotifier7()),
        ChangeNotifierProvider(create: (_) => SomeNotifier8()),
        ChangeNotifierProvider(create: (_) => SomeNotifier9()),
        ChangeNotifierProvider(create: (_) => SomeNotifier10())
      ],
      child: const MyApp()
    ),
  );
}

and for test reasons I would like to split the providers list in multiple lists like:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final initFuture = MobileAds.instance.initialize();
  final adState = AdState(initFuture);

  runApp(
    MultiProvider(
      providers: [
        Provider<AdState>(create: (_) =>  adState),
        ...list1(),
        ...list2()
      ],
      child: const MyApp()
    ),
  );
}

List<ChangeNotifierProvider<ChangeNotifier>> list1() =>
  [
    ChangeNotifierProvider(create: (_) => SomeNotifier1()),
    ChangeNotifierProvider(create: (_) => SomeNotifier2()),
    ChangeNotifierProvider(create: (_) => SomeNotifier3()),
    ChangeNotifierProvider(create: (_) => SomeNotifier4()),
    ChangeNotifierProvider(create: (_) => SomeNotifier5())
  ];

List<ChangeNotifierProvider<ChangeNotifier>> list2() =>
  [
    ChangeNotifierProvider(create: (_) => SomeNotifier6()),
    ChangeNotifierProvider(create: (_) => SomeNotifier7()),
    ChangeNotifierProvider(create: (_) => SomeNotifier8()),
    ChangeNotifierProvider(create: (_) => SomeNotifier9()),
    ChangeNotifierProvider(create: (_) => SomeNotifier10())
  ];

Error: Could not find the correct Provider above this Consumer Widget

This happens because you used a BuildContext that does not include the provider of your choice. There are a few common scenarios: etc...

Is there any way to split the MultiProvider in multiple lists?

Also I am trying with something similar to:

return MultiProvider<Example>(
      create: (_) => Example(),
      builder: (context) {
        return Text(context.watch<Example>()),
      }
    ),

but no luck so far.

Answer 1

You can try to add a BuildContext parameter to the function returning the providers like so

List<ChangeNotifierProvider<ChangeNotifier>> list1(BuildContext context) =>
  [
    ChangeNotifierProvider(create: (context) => SomeNotifier1()),
    ChangeNotifierProvider(create: (context) => SomeNotifier2()),
    ChangeNotifierProvider(create: (context) => SomeNotifier3()),
    ChangeNotifierProvider(create: (context) => SomeNotifier4()),
    ChangeNotifierProvider(create: (context) => SomeNotifier5())
  ];

List<ChangeNotifierProvider<ChangeNotifier>> list2(BuildContext context) =>
  [
    ChangeNotifierProvider(create: (context) => SomeNotifier6()),
    ChangeNotifierProvider(create: (context) => SomeNotifier7()),
    ChangeNotifierProvider(create: (context) => SomeNotifier8()),
    ChangeNotifierProvider(create: (context) => SomeNotifier9()),
    ChangeNotifierProvider(create: (context) => SomeNotifier10())
  ];

then you can now add the providers like so

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final initFuture = MobileAds.instance.initialize();
  final adState = AdState(initFuture);

  runApp(
    MultiProvider(
      providers: [
        Provider<AdState>(create: (_) =>  adState),
        ...list1(context),
        ...list2(context)
      ],
      child: const MyApp()
    ),
  );
}

this should help.