provider

Provider スキル

このスキルでは、Flutter アプリケーションで provider パッケージを正しく使用する方法を説明します。

---

1. Provider の種類

Provider	用途
Provider	任意の不変値を公開する場合
ChangeNotifierProvider	ChangeNotifier を使用した可変状態
FutureProvider	Future の結果を公開する場合
StreamProvider	Stream を公開する場合
ProxyProvider / ChangeNotifierProxyProvider	他の Provider に依存するオブジェクト

---

2. セットアップ

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

• 複数の Provider をまとめ、深くネストされたツリーを避けるには MultiProvider を使用します。
• ChangeNotifierProvider は、モデルが不要になると自動的に破棄します。
• 時間とともに変わる可能性のある変数から、Provider のオブジェクトを決して作成しないでください。変数が変わってもオブジェクトは更新されません。代わりに ProxyProvider を使用してください。
• Provider が 150 個以上ある場合、StackOverflowError を避けるため、一度にすべてをマウントするのではなく、（スプラッシュ画面の表示中などに）時間をかけてマウントすることを検討してください。

---

3. 状態の利用

型安全性を確保するため、常にジェネリック型を指定してください。

// 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);

細かく再ビルドを制御する必要があり、子孫の BuildContext にアクセスできない場合は、Consumer<T> または Selector<T, R> ウィジェットを使用してください。

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

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

---

4. ProxyProvider

他の Provider や変更される可能性のある値に依存するオブジェクトには、ProxyProvider または ChangeNotifierProxyProvider を使用してください。

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

---

5. ルール

• initState やコンストラクター内で Provider にアクセスしないでください。ウィジェットが完全にマウントされた後に、build、コールバック、またはライフサイクルメソッド内で使用してください。
• 状態には ChangeNotifier 以外の任意のオブジェクトを使用できます。必要に応じて、StatefulWidget と Provider.value() を使用してください。

---

6. デバッグ

toString または DiagnosticableTreeMixin を実装すると、Flutter DevTools でオブジェクトがどのように表示されるかを改善できます。

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

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

---

7. 移行：ValueListenableProvider

ValueListenableProvider は非推奨です。代わりに ValueListenableBuilder と Provider を使用してください。

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

---

参考資料

• Provider GitHub リポジトリ