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

【Flutter×Riverpod】Providerの改良版!おすすめ状態管理パッケージ

本記事からFlutterでRiverpod(flutter_riverpod)を使用する方法を紹介していきます。

今回は「Riverpodの役割」「FlutterアプリでRiverpodを使用するための導入手順」「プロバイダの作成・プロバイダ修飾子」の順にRiverpodの基本について解説します。

記事の後半に「各プロバイダの解説リンク」を載せています!

目次

「Riverpod」とは?

Riverpodを一言でまとめると「Provider」の改良版、つまり状態管理パッケージ(ステートを監視)です。

Riverpodではプロバイダをグローバル定数として宣言することで、どのWidgetからもプロバイダのデータを取得できます。RiverpodはProviderと同じ作者によって開発されておりpub.devから導入できます。

どっちを使えばいい? Riverpod vs Provider

結論から言うと「Riverpod」がおすすめ!

既にProviderに慣れているならProviderでも良いですが、これからプロパイダを使用していく方はRiverpodを勉強しましょう。

Will provider be deprecated/stop being supported?
Not in the short term, no.
However, a migration tool is planned to help assist migration from provider to Riverpod.

rrousselGit/river_pod 作者Remi RousseletさんのGitHubより 2022/2/22時点

と言うのも、RiverpodとProviderの作者であるRemi RousseletさんがRiverpodのGitHub FAQで「Providerが非推奨になるか?/サポートが終了するか?」の問いに対して「今すぐではないが、ProviderからRiverpodへの移行ツールの計画をしている」と述べています。

よって将来的なことを考えるとProviderよりもRiverpodをFlutterに導入した方が良いと思われます。ただ、現時点でRiverpodの情報が少ないので、移行ツールが完成もしくはRiverpodの情報が増えてきてからRiverpodに移行しても遅くないと思います。

環境構築:コードスニペットをインストール

VS CodeFlutter Riverpod Snippets
Android Studio/IntelliJFlutter Riverpod Snippets

Riverpodによるアプリ開発を効率化するためにコードスニペットプラグインをインストールしておきましょう。

Riverpodパッケージの種類

スクロールできます
アプリ形態パッケージ名説明
Flutter & flutter_hookshooks_riverpodflutter_hooks と Riverpodを併用するパッケージ
Flutterflutter_riverpodFlutterアプリでRiverpodを使うための基本パッケージ
DartriverpodDartのみでRiverpodを使う場合

当サイトでは「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()));
}

Riverpodを使用するには「ProviderScope」をrunApp()でFlutterアプリ(Widgetツリー)のルートにする必要があります。これでFlutterアプリでRiverpodのプロバイダを使用できます。

Riverpodの主なプロバイダ

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

各プロバイダの解説リンクは記事下で紹介しています。

プロバイダの作成

//Providerの場合
final helloWorldProvider = Provider((ref) {
  return 'Hello world';
});

Riverpodでプロバイダを定義する際のポイントは3つあります。

  1. グローバル定数(final)で定義する:「final helloWorldProvider 」の部分
  2. 使用するプロバイダの種類を決める:「Provider」の部分
  3. プロバイダで渡すデータを決める:「残り」の部分

どのプロバイダでも基本は同じですが、それぞれ書き方に違いがあるので注意しましょう。またプロバイダ修飾子「.autoDispose」「.family」を使用してプロバイダに機能を追加できるのでチェックしておきましょう。

「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同様コードスニペットで自動生成できます。

これでWidgetで「ref」を使用できるようになります。

プロバイダの使用方法

使用したいプロバイダを以下の解説リンクからお読みください。

以上です。

参考

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