【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),
        ),
      ),
    );
  }
}

まとめ

今回はRiverpodのProviderの基本的な使い方について解説しました。

Providerを使用すれば任意のウィジェットに定数を渡すことができるのでぜひ使ってみてください。

参考サイト