🍣
[Flutter]Riverpodについての個人的まとめ
参考記事この記事を噛み砕きまとめました
Riverpodとは
- 状態管理(特にデータの受け渡し)を円滑に進めることができる。
普通にデータ変更に伴って全部再描画すると?
- 全てのウィジェットにデータを渡して再描画しているとUXやパフォーマンスの面で致命的になる。
- そこで状態管理の仕組みであるRiverpodなどを使うことによって、データを変更するウィジェットを最適化したり、再描画する範囲を指定できたりできる。
Riverpodの仕組みと使用手順
- グローバルに「Provider」という変数を設置しておき、それを中心に操作し、(グローバルだが、必ずfinalをつけて不変(immutable)にして外部から変更できなくしておき、)StateProvider を使い受け渡すデータを定義する。
-
最初のWidgetを ProviderScope() の子Widgetとし、データの受け渡しが可能な状態にする。
->Scope(状態管理の管轄範囲)を指定するため -
ConsumerWidget を使いデータを受け取る
ConsumerWidget とは
- build()からデータを受け取る事ができるwidget。
その使用方法
- watch()を使いデータを受け取る
- 値は.stateに入っている(オブジェクト)
ConsumerWidgetによると、、
プロバイダーをリッスンできるStatelessWidget 。
ConsumerWidgetを使用すると、ウィジェット ツリーがプロバイダーの変更をリッスンできるため、必要に応じて UI が自動的に更新されます。
要するに、
- 定義した「Provider」で値の変更があった場合に、その変更を読み取り、必要に応じて UI が自動的に更新できる便利なwidget
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// ①の部分。StateProviderを使い受け渡すデータを定義する。ここではfinal countProvider を設置
// ※ Providerの種類は複数あるが、ここではデータを更新できるStateProviderを使う
final countProvider = StateProvider((ref) {
return 0;
});
void main() {
runApp(
// ② Riverpodでデータを受け渡しが可能な状態にするために必要
// ProviderScope()の子ウィジェットにあるものを状態管理する。
ProviderScope(
child: MaterialApp(
title: 'Flutter Demo',
home: MyWidget(),
),
),
);
}
// ③ConsumerWidgetを使うとbuild()からデータを受け取る事ができ、
// ①で定義したProviderの値の変更を読み取りUIを自動更新していく。
class MyWidget extends ConsumerWidget {
Widget build(BuildContext context, ScopedReader watch) {
// watch()を使いデータを受け取る
// 値は.stateに入っている
final count = watch(countProvider).state;
return Scaffold(
body: Center(
child: Text('count is $count'),
),
);
}
}
以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏
ps.中国語のエンジニア専門用語全然わからん、、
Discussion