【flutter_riverpod】Providerの使い方｜定数を任意のウィジェットに渡す

2024年2月6日

「任意のウィジェットに定数を渡したい」

こんな時に便利なのが状態管理パッケージRiverpodの Provider ウィジェットです。

Providerを使用すればウィジェットツリーにおける任意のウィジェットに定数を渡すことができます。

それではProviderの基本的な使い方について解説していきます！

パッケージのインストール

まずはRiverpodのパッケージをFlutterプロジェクトにインストールします。

ターミナルで次のコマンドを実行してpubspec.yamlファイルにflutter_riverpodを追加します。

flutter pub add flutter_riverpod

次にflutter_riverpodを使用するdartファイルに次のコードをコピペします。

import 'package:flutter_riverpod/flutter_riverpod.dart';

Providerの基本的な使い方

Providerの基本的な使い方について解説します。

ProviderScopeの追加

ProviderScopeのchildプロパティの引数にルートとなるウィジェットを渡します。

こうすることでchildに渡したウィジェットの下位ウィジェットでProviderを使用できるようになります。

void main() => runApp(ProviderScope(child: MyApp()));

Providerの定義

Providerはグローバルスコープ(クラスや関数の外)で次のように定義します。

final 変数 = Provider((ref) => 戻り値);

final provider = Provider((ref) => 0);

void main() => runApp(const ProviderScope(child: MyApp()));

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

ConsumerWidgetで使用環境を整える

ProviderをStatelessWidgetで使用したい場合には、StatelessWidgetの代わりにConsumerWidgetを使用します。

ConsumerWidgetは基本的にStatelessWidgetと同じですが、buildメソッドの第二引数にWidgetRefクラスのオブジェクトrefを渡します。

以後このrefを使用してプロバイダの値を取得します。

class MyWidget extends ConsumerWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ...;
  }
}

Providerの値を取得

Providerの値を取得するにはrefのreadメソッドを使用します。

readメソッドの引数には先ほど定義したProviderの変数を渡します。

final num = ref.read(numProvider);

class MyWidget extends ConsumerWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final num = ref.read(provider);

    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: Text(
          num.toString(),
          style: TextStyle(fontSize: 70),
        ),
      ),
    );
  }
}

画像のサンプルコード

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

final provider = Provider((ref) => 0);
void main() => runApp(const ProviderScope(child: MyApp()));

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends ConsumerWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final num = ref.read(provider);

    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: Text(
          num.toString(),
          style: TextStyle(fontSize: 70),
        ),
      ),
    );
  }
}