Skills

Provider

Use when setting up providers, consuming state, optimizing rebuilds, using...

Install

npx skills add evanca/flutter-ai-rules --skill provider -g -a claude-code -y
Category
Engineering
Updated
5d ago
License
MIT
Context cost
Lightabout 850 tokens
Runs scripts
No, instructions only

What it does

Use when setting up providers, consuming state, optimizing rebuilds, using ProxyProvider, or migrating from deprecated providers (Provider package).

Provider Skill

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


1. Provider Types

ProviderUse for
ProviderExposing any immutable value
ChangeNotifierProviderMutable state with ChangeNotifier
FutureProviderExposing a Future result
StreamProviderExposing a Stream
ProxyProvider / ChangeNotifierProxyProviderObjects that depend on other providers

2. Setup

MultiProvider(
  providers: [
    Provider<Something>(create: (_) => Something()),
    ChangeNotifierProvider(create: (_) => MyNotifier()),
    FutureProvider<String>(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<MyModel>().count;

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

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

Use Consumer<T> or Selector<T, R> widgets when you need fine-grained rebuilds and cannot access a descendant BuildContext:

Consumer<MyModel>(
  builder: (context, model, child) => Text('${model.count}'),
  child: const ExpensiveWidget(), // rebuilt only once
)
Read the whole SKILL.md on GitHub

More in Engineering