Multiple ChangeNotifierProxyProviders to feed updates into ChangeNotifier

Question

I have three ChangeNotifierProvider providers, let's call them A, B and C.

What I need is for changes in providers A and B to update provider C, but the code below isn't working.

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (context) => A()),
    ChangeNotifierProvider(create: (context) => B()),
    ChangeNotifierProxyProvider<A, C>(
      create: (context) => C(),
      update: (_, a, c) => c!..updateFromA(a),
    ),
    ChangeNotifierProxyProvider<B, C>(
      create: (context) => C(),
      update: (_, b, c) => c!..updateFromB(b),
    ),
  ]

I think the reason why it doesn't work is because I end up with multiple copies of provider C, but I am not sure how to fix it or what a better alternative implementation would look like.

score 2 · Accepted Answer · answered Jun 07 '22 at 05:09

After doing some searching, I realized that Flutter provides an elegant out-of-the-box way of solving this problem using ChangeNotifierProxyProvider2.

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (context) => A()),
    ChangeNotifierProvider(create: (context) => B()),
    ChangeNotifierProxyProvider2<A, B, C>(
      create: (context) => C(),
      update: (_, a, b, c) => c!..updateFromA(a)..updateFromB(b),
    ),
  ]

Flutter also provides ChangeNotifierProxyProvider3 through ChangeNotifierProxyProvider6, but that would, of course, get very verbose and confusing.

score 0 · Answer 2 · answered Jun 03 '22 at 18:57

If having more than one instance of C is the problem, then I think you can just use Provider.of<C>(context) to get a single instance.

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (context) => A()),
    ChangeNotifierProvider(create: (context) => B()),
    ChangeNotifierProvider(create: (context) => C()),
    ChangeNotifierProxyProvider<A, C>(
      create: (context) => Provider.of<C>(context),
      update: (_, a, c) => c!..updateFromA(a),
    ),
    ChangeNotifierProxyProvider<B, C>(
      create: (context) => Provider.of<C>(context),
      update: (_, b, c) => c!..updateFromB(b),
    ),
  ]

Or else, you could apply the singleton pattern to C:

class C {
  static final C _instance = C._();

  factory C() {
    return _instance;
  }

  C._();
}

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (context) => A()),
    ChangeNotifierProvider(create: (context) => B()),
    ChangeNotifierProxyProvider<A, C>(
      create: (context) => C(),
      update: (_, a, c) => c!..updateFromA(a),
    ),
    ChangeNotifierProxyProvider<B, C>(
      create: (context) => C(),
      update: (_, b, c) => c!..updateFromB(b),
    ),
  ]

Passing `false` to the named parameter `listen` when calling `Provider.of<...>(...)` is necessary in the first solution, and even with that correction it barely works. Updates are done but not without Flutter complaining of "setState() or markNeedsBuild() called during build.". I was hopeful it could work since using any `ChangeNotifierProxyProvider...` variant doesn't fit in my case from the important amount of substates that needs to be watched, but this definitely won't work, at least not without improvements — CodeTalker, Dec 02 '22 at 15:32

Multiple ChangeNotifierProxyProviders to feed updates into ChangeNotifier

2 Answers2