FlutterのRiverpodの導入方法の基礎をご紹介します。
RiverpodとはDart・Flutterで使用できる「状態管理ライブラリ」です。公式推奨パッケージの一つです。
元々、Providerという状態管理の方法があったのですが、そのライブラリの開発者さんがProviderの改善点を元に再構成したアプリです。
今、新アプリを作ろうと思っているのですが、Riverpodの導入に少してこづったので、今回は新しく学んだ、FlutterのRiverpodの中の、「flutter_riverpod」のパッケージの導入方法をシンプルに説明します。
（今回は、「riverpod（Dartのみ）」と「flutter_hooks」のパッケージは説明しません。）
Riverpodの導入方法
①「flutter_riverpod」のインストール
下記から導入をします。（2021年9月1日時点）
コマンドで導入する方法
ターミナルから下記コマンドをたたきます。
$ flutter pub add flutter_riverpod※もちろんpubspec.yamlからパッケージを追加する方法でも大丈夫です。
② main.dartのvoid main()にコードを追加する
アプリ内で利用可能にするために範囲（スコープ）を指定する必要があります。
// パッケージを追加
import 'package:flutter_riverpod/flutter_riverpod.dart';
// MyApp()の部分をProviderScopeで囲む
void main() {
runApp(
ProviderScope(
child: MyApp(),
),
);
}
③ 表示部分（ページ側）を作る
Flutterを最初にインストールにするときにサンプルで出てくる、右下のアイコンボタンを押すと、中央の数字が増えていく動きを、riverpodで実装してみます。
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Modelを読み込み
final countModel = context.read(counterProvider);
return Scaffold(
appBar: AppBar(
title: Text('Riverpod テスト'),
),
// bodyの表示
body: Center(
child: Consumer(builder: (context, watch, _) {
// データを取得する
final counter = watch(counterProvider).state;
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'クリックの回数',
),
// 取得したデータを表示する
Text(
'$counter',
style: Theme.of(context).textTheme.headline4,
),
],
);
}),
),
floatingActionButton: FloatingActionButton(
onPressed: countModel.incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
④ 状態管理表示部分（Model側）を作る
final counterProvider = ChangeNotifierProvider<CountModel>(
(ref) => CountModel(),
);
class CountModel extends ChangeNotifier {
int state = 0;
void incrementCounter() {
state++;
notifyListeners();
}
}
⑤ 完成
動いているか確認してみましょう。
全てのコード
main.dartに書いた全てのコードを下記にまとめました。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// main.dartのvoid main()にコードを追加する
void main() {
runApp(
ProviderScope(
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
// 状態管理表示部分（Model側）を作る
final counterProvider = ChangeNotifierProvider<CountModel>(
(ref) => CountModel(),
);
class CountModel extends ChangeNotifier {
int state = 0;
void incrementCounter() {
state++;
notifyListeners();
}
}
// 表示部分（ページ側）を作る
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Modelを読み込み
final countModel = context.read(counterProvider);
return Scaffold(
appBar: AppBar(
title: Text('Riverpod テスト'),
),
// bodyの表示
body: Center(
child: Consumer(builder: (context, watch, _) {
// データを取得する
final counter = watch(counterProvider).state;
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'クリックの回数',
),
// 取得したデータを表示する
Text(
'$counter',
style: Theme.of(context).textTheme.headline4,
),
],
);
}),
),
floatingActionButton: FloatingActionButton(
onPressed: countModel.incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
FlutterでRiverpodを使うメリット
元々、Flutterで状態管理といえば「Provider」というパッケージがあったのですが、Riverpodは同じ開発者の人がProviderの課題を改善して作成されたものです。
また、Riverpodは、旧Providerの課題を改善したことにより、下記の点が改善されていると言われています。
- パフォーマンスの向上
- コンパイルセーフになった
- Providerより柔軟性が増した
- パフォーマンスの向上
など。
現時点では、Riverpodよりも旧Providerの方がネットにある情報が多いため、なかなかRiverpodの導入方法がわからなかったので、今回こちらの記事を書きました。
ぜひRiverpodを使ってみてください。
ここまで読んていただき、ありがとうございました。
未経験からでも技術を学べる
Udemy
Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。
何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。
動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。
世界最大級のオンライン学習サイトUdemy
