Provider

Provider Skill

This skill defines how to correctly use the provider package in Flutter applications.

---

1. Provider Types

| Provider | Use for | |---|---| | Provider | Exposing any immutable value | | ChangeNotifierProvider | Mutable state with ChangeNotifier | | FutureProvider | Exposing a Future result | | StreamProvider | Exposing a Stream | | ProxyProvider / ChangeNotifierProxyProvider | Objects that depend on other providers |

---

2. Setup

MultiProvider(
  providers: [
    Provider(create: (_) => Something()),
    ChangeNotifierProvider(create: (_) => MyNotifier()),
    FutureProvider(create: (_) => fetchData(), initialData: ''),
  ],
  child: MyApp(),
)

• Use MultiProvider to group multiple providers and avoid deeply nested trees.
• ChangeNotifierProvider automatically disposes the model when it is no longer needed.
• Never create a provider's object from variables that can change over time — the object won't update when the variable changes. Use ProxyProvider instead.
• If you have 150+ providers, consider mounting them over time (e.g., during a splash screen) rather than all at once to avoid StackOverflowError.

---

3. Consuming State

Always specify the generic type for type safety:

// Listen and rebuild on change — only valid inside build() or a Provider's update method
final count = context.watch().count;

// Access without listening — use in callbacks, not inside build()
context.read().increment();

// Listen to only part of the state
final count = context.select((m) => m.count);

Use Consumer or Selector widgets when you need fine-grained rebuilds and cannot access a descendant BuildContext:

Consumer(
  builder: (context, model, child) => Text('${model.count}'),
  child: const ExpensiveWidget(), // rebuilt only once
)

Selector(
  selector: (_, model) => model.count,
  builder: (_, count, __) => Text('$count'),
)

---

4. ProxyProvider

Use ProxyProvider or ChangeNotifierProxyProvider for objects that depend on other providers or values that can change:

MultiProvider(
  providers: [
    Provider(create: (_) => Auth()),
    ProxyProvider(
      update: (_, auth, __) => Api(auth.token),
    ),
  ],
)

---

5. Rules

• Do not access providers inside initState or constructors — use them in build, callbacks, or lifecycle methods where the widget is fully mounted.
• You can use any object as state, not just ChangeNotifier; use Provider.value() with a StatefulWidget if needed.

---

6. Debugging

Implement toString or DiagnosticableTreeMixin to improve how your objects appear in Flutter DevTools:

class MyModel with DiagnosticableTreeMixin {
  final int count;
  MyModel(this.count);

  @override
  String toString() => 'MyModel(count: $count)';
}

---

7. Migration: ValueListenableProvider

ValueListenableProvider is deprecated. Use Provider with ValueListenableBuilder instead:

ValueListenableBuilder(
  valueListenable: myValueListenable,
  builder: (context, value, _) {
    return Provider.value(
      value: value,
      child: MyApp(),
    );
  },
)

---

References

• Provider GitHub Repository

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: evanca
• Source: evanca/flutter-ai-rules
• License: MIT

Install and usage instructions live in the source repository linked above.