Udemyセール開催中! 対象コースが1,220円から

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

今回はRiverpodのプロバイダ「StateProvider」を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のプロバイダを使えるようになりました。

「StateProvider」の使い方

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

概要

StateProviderではプロバイダの値を取得する以外にも外部からプロバイダのステート(値)の変更が可能です。

ただし、StateProviderでは「列挙型(enum)」「String型」「bool型」「数値型」などのシンプルなデータを外部から変更できますが「List/Map」「バリデーション」など複雑なロジックが必要な場合には向いていません。

Riverpodのドキュメントにも「count++」より高度なロジックによるステートの変更はStateProviderでは向いていないと記述されており、より高度なロジックでステートを変更したい場合には「StateNotifierProvider」を使用するのが推奨されています。

定義

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

//例
final counterProvider = StateProvider<int>((ref) => 0);

上記コードのようにグローバル定数でプロバイダを定義します。

「ref」をWidgetで使用可能にする

プロバイダの値を取得するには「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 counter = ref.watch(counterProvider);

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

ここで押さえておきたいのがcounterは定数なので、counterから直接プロバイダのステートを変更できません。よってプロバイダのステートを変更するには「ref」を使用します。

外部からStateProviderの値を変更

//書き方
ref.read(プロバイダ.notifier).state = 値;
ref.watch(プロバイダ.notifier).state = 値;

//例
ref.read(counterProvider.notifier).state++;
ref.watch(counterProvider.notifier).state + 1; //「state++」と同じ

StateProviderのステート(値)を変更するには上記の2つの方法があります。

Riverpodのドキュメントではユーザー操作(ボタンクリックイベントなど)によって呼び出される関数でステートを変更するには「ref.read」を使用しています。

一方ドキュメントでは「ref.read」はプロバイダのステートの取得には可能な限り避けるよう書かれているので、ステートの変更以外には使用しないのがベターだと思われます。

これらの点を含めてサンプルコードで「StateProvider」の使用方法を確認してみてください。

サンプルコード

「ref.watch」でcounterProvider(StateProvider)のステートを取得・監視し、FloatingActionButtonのonPressedプロパティのコールバック関数で「ref.read」を使用してステートを変更しています。

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

final counterProvider = StateProvider<int>((ref) => 0);

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

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) {
    final counter = ref.watch(counterProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Riverpod'),
        ),
        body: Center(
          child: Text(
            counter.toString(),
            style: TextStyle(
              fontSize: 50,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            ref.read(counterProvider.notifier).state++;
          },
        ),
      ),
    );
  }
}

以上です。

参考

Riverpod:StateProvider

  • URLをコピーしました!
目次
閉じる