study-note

Provider

目次

• ChangeNotifier
• Provider系クラス
  • Provider<T>
  • ChangeNotifierProvider<T extends ChangeNotifier>
  • MultiProvider
• データの取得
  • Provider.of<T>(context, {listen = true})
  • context.read<T>()
  • context.watch<T>
  • context.select<T, R>(R selector(T value))
• Widgetでの監視（画面更新）
  • Selector<T, R>
  • Consumer<T>
• サンプルコード
• 流れまとめ

ChangeNotifier

• リスナーに状態の変化を通知する状態管理用クラス
• ViewModelや状態保持クラスで継承する

基本構文

class AuctionViewModel extends ChangeNotifier {
  // 状態（プロパティ）
  int _count = 0;
  int get count => _count;

  // 状態を変更するメソッド
  void increment() {
    _count++;
    notifyListeners(); // ここでリスナーに通知
  }
}

メソッド

• notifyListeners()：
  • 登録されているリスナーに状態が変わったことを通知
  • listen中のWidgetが再ビルドされる
• addListener(VoidCallback listeners)：外部からカスタムリスナーを登録
• removeListener(VoidCallback listeners)：登録したリスナーを解除
• dispose()：クリーンアップ処理（ChangeNotifierProviderが自動で呼ぶことが多い）

Provider系クラス

Provider<T>

• 下位Widgetにオブジェクトを提供する
• 上位にオブジェクトを置いて、下位のWidgetからProvider.of<T>(context)で取り出せるようにする箱
• 定数やサービスクラスを提供するだけで、通知は不要な場合に使う

Provider<T>(
  create: (context) => Tのインスタンス,
  child: Widget,
)

ChangeNotifierProvider<T extends ChangeNotifier>

• ChangeNotifierを継承したクラスを提供し、変更通知に対応
• オブジェクトを流し、そのオブジェクトの状態が変化したら通知して、画面を再ビルドする
• ViewModelを使った状態管理のためのProvider

ChangeNotifierProvider<T>(
  create: (context) => Tのインスタンス,
  child: Widget,
)

MultiProvider

• Providerを複数まとめて登録

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => ViewModelA()),
    Provider(create: (_) => ServiceB()),
  ],
  child: Widget,
)

データの取得

Provider.of<T>(context, {listen = true})

• 登録されたTを取得する
• 戻り値：T型のインスタンス

Provider.of<T>(context, listen: true/false)

• listen
  • true：値が変わるとこのWidgetも再ビルドされる
  • false：単発で値を参照するのみ

context.read<T>()

• listenしないで値を取得する
• 戻り値：T型のインスタンス
• Provider.of<T>(context, listen: false)の糖衣構文

context.watch<T>

• listenする値を取得する
• 戻り値：T型のインスタンス
• Provider.of<T>(context, listen: true)の糖衣構文
• T全体を監視するため、T内のどのフィールドが変わっても再ビルドされる

context.select<T, R>(R selector(T value))

• 特定のフィールドだけ監視する
• 戻り値：R型（特定の値）

context.select<T, R>(
	(value) => value.someField
)

• Tの中から特定の値R（someField）だけを取り出して監視する
  • T：Providerで流している型
  • R：取り出したいフィールドや計算結果の型（戻り値の型）
• someFieldが変化した時だけ再ビルドされる

Widgetでの監視（画面更新）

Selector<T, R>

• Consumerとselectの組み合わせ
• 特定のWidgetに特定のフィールドをlistenさせる

Selector<T, R>(
  selector: (context, value) => value.someField,
  builder: (context, field, child) {
    return Widget;
  },
)

Consumer<T>

• 特定のWidgetだけをlistenさせる
• Widget全体ではなく一部だけ再ビルド可能

Consumer<T>(
  builder: (context, value, child) {
    return Widget;
  },
)

サンプルコード

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => MyModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Consumer<MyModel>(
            builder: (context, model, child) {
              return Text('Count: ${model.count}');
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read<MyModel>().increment(),
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

• ChangeNotifierProviderでMyModelを提供
• Consumer<MyModel>でnotifyListeners()に反応してUI更新
• context.read<Mymodel>で状態を操作

流れまとめ

1. Model（状態を持つクラス）作成 ```dart import ‘package:flutter/material.dart’;

class Counter extends ChangeNotifier { int _count = 0;

int get count => _count;

void increment() {
  _count++;
  notifyListeners(); // UIに変更を通知
}   }   ``` 2. `Provider`で包む   ```dart   import 'package:provider/provider.dart';

void main() { runApp( ChangeNotifierProvider( create: (_) => Counter(), child: const MyApp(), ), ); }

3. UIで使う
  ```dart
  class CounterPage extends StatelessWidget {
    const CounterPage({super.key});

    @override
    Widget build(BuildContext context) {
      final counter = context.watch<Counter>(); // データの購読

      return Scaffold(
        body: Center(
          child: Text('Count: ${counter.count}'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => counter.increment(),
          child: const Icon(Icons.add),
        ),
      );
    }
  }