【Flutter×Riverpod】Providerの使い方｜プロバイダで状態管理

2022 4/05

2022年2月24日 2022年4月5日

今回はRiverpodのプロバイダ「Provider」をFlutterで使用する方法を紹介します。

FlutterでRiverpodを使うのが初めての方は先にこちらの記事をお読みください。

Riverpodの導入

$ flutter pub add flutter_riverpod
$ flutter pub get

pubspec.yamlにパッケージを追加・更新

import 'package:flutter_riverpod/flutter_riverpod.dart';

main.dartファイルにコピペ

「ProviderScope」をFlutterアプリのルートにする

void main() {
  runApp(ProviderScope(child: MyApp()));
}

「ProviderScope」をrunApp()でFlutterアプリのルートにします。これでFlutterアプリでRiverpodのプロバイダを使えるようになりました。

「Provider」の使い方

コードで解説してる箇所は記事下のサンプルコードを参考にして読んでみてください。

概要

ProviderはRiverpodの中で最も基本となるプロバイダです。プロバイダでステートをラップすることで指定したどのWidgetからもプロバイダのデータを取得できます。

Riverpodでは基本的な「Provider」以外にも用途によって別のプロバイダを使用できます。

Provider	ステートをラップして値を取得できる
FutureProvider	非同期処理（Future）のステートをラップして値を取得できる
StreamProvider	非同期処理（Stream）のステートをラップして値を取得できる
StateProvider	シンプルなステートをラップして値を取得・外部から変更できる
StateNotifierProvider	StateNotifierクラスをラップして値を取得・外部から変更できる

定義

//定義
final プロバイダ名 = Provider((ref) => 値);

//例
final helloProvider = Provider((ref) => 'Hello Riverpod!');

上記コードのようにProviderを定義します。

プロバイダの値を取得するには「ref」を使用します。ただ通常のStatelessWidget、StatefulWidgetでは「ref」を使用できないので下記のように置き換える必要があります。

StatelessWidgetでプロバイダを使用する場合

class MyApp extends ConsumerWidget {
  const MyApp({Key? key}) : super(key: key);

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

「StatelessWidget」を「ConsumerWidget」に置き換える必要があります。またbuild()の第二引数に「WidgetRef ref」を渡します。Riverpodのコードスニペットプラグインを入れておけば自動生成できます。

StatelessWidgetでプロバイダを使用する場合

class MyApp extends ConsumerStatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends ConsumerState<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

「StatefulWidget と State」を「ConsumerStatefulWidget と ConsumerState」に置き換える必要があります。StatelessWidget同様コードスニペットで自動生成できます。

ref.watchでプロバイダのデータを取得

final hello = ref.watch(helloProvider);

ref.watchを使用してプロバイダ（helloProvider）の現在の値（ステート）を取得します。ref.watchを使用することでプロバイダのステートに変化があった際、常に「hello」に更新された値を反映できます。

サンプルコード

「ref.watch」でhelloProvider（Provider）のステートを取得・監視しています。

//ソース
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final helloProvider = Provider((ref) => 'Hello Riverpod!');

void main() {
  runApp(
    ProviderScope(child: MyApp()),
  );
}

class MyApp extends ConsumerWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final hello = ref.watch(helloProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Riverpod'),
        ),
        body: Center(
          child: Text(
            hello.toString(),
            style: TextStyle(
              fontSize: 30,
            ),
          ),
        ),
      ),
    );
  }
}

以上です。