【Flutter】Providerで状態管理

Providerとは

Providerパッケージは、Flutterアプリケーションで状態管理を簡単に行うためのツールです。
InheritedWidgetをラップすることで、手動で状態管理を行うよりも簡単に、再利用可能な方法で状態を管理することができます。

provider | Flutter package

A wrapper around InheritedWidget to make them easier to use and more reusable.

pub.dev

主な特徴

• リソースの簡素化された割り当て/解放
• 遅延読み込み
• 新しいクラスを作成する際のボイラープレートの大幅な削減
• 開発ツールとの互換性
• これらのInheritedWidgetsを消費する共通の方法
• 通知の配信が複雑になるリスニングメカニズムの拡張性向上

使い方

インストール

まず、pubspec.yamlに依存関係を追加します。

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.2

基本的な使い方

Providerを使用することで、状態を簡単に管理し、UIとデータの同期を保つことができます。以下に基本的な使い方を示します。

1. 値の提供

新しいオブジェクトインスタンスを提供する場合：

Provider(
  create: (_) => MyModel(),
  child: MyApp(),
)

既存のオブジェクトインスタンスを再利用する場合：

MyChangeNotifier variable;

ChangeNotifierProvider.value(
  value: variable,
  child: MyApp(),
)

2. 値の読み取り

Providerを使って値を読み取る最も簡単な方法は、BuildContextの拡張メソッドを使用することです。

context.watch<T>()
context.read<T>()
context.select<T, R>(R cb(T value))

例えば、以下のようにしてString型の値を読み取り、表示することができます。

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      context.watch<String>(),
    );
  }
}

3. 複数のプロバイダーを使用する

MultiProviderを使って複数のプロバイダーを一度に提供することができます。

MultiProvider(
  providers: [
    Provider<Something>(create: (_) => Something()),
    Provider<SomethingElse>(create: (_) => SomethingElse()),
  ],
  child: MyApp(),
)

4. ProxyProviderの使用

ProxyProviderを使って、他のプロバイダーから値を組み合わせた新しいオブジェクトを作成し、提供することができます。

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => Counter()),
    ProxyProvider<Counter, Translations>(
      update: (_, counter, __) => Translations(counter.value),
    ),
  ],
  child: Foo(),
)

5. 状態の変更と通知

ChangeNotifierを使って状態を管理し、変更を通知することができます。

class MyNotifier with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

これをプロバイダーとして提供し、UIから使用することができます。

ChangeNotifierProvider(
  create: (_) => MyNotifier(),
  child: MyApp(),
)

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = context.watch<MyNotifier>();
    return Text('Count: ${counter.count}');
  }
}