[Flutter]Riverpodについての個人的まとめ

参考記事この記事を噛み砕きまとめました

Riverpodとは

• 状態管理(特にデータの受け渡し)を円滑に進めることができる。

普通にデータ変更に伴って全部再描画すると？

• 全てのウィジェットにデータを渡して再描画しているとUXやパフォーマンスの面で致命的になる。
• そこで状態管理の仕組みであるRiverpodなどを使うことによって、データを変更するウィジェットを最適化したり、再描画する範囲を指定できたりできる。

Riverpodの仕組みと使用手順

1. グローバルに「Provider」という変数を設置しておき、それを中心に操作し、(グローバルだが、必ずfinalをつけて不変(immutable)にして外部から変更できなくしておき、)StateProvider を使い受け渡すデータを定義する。

2. 最初のWidgetを ProviderScope() の子Widgetとし、データの受け渡しが可能な状態にする。
   ->Scope(状態管理の管轄範囲)を指定するため

3. 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 {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    // watch()を使いデータを受け取る
    // 値は.stateに入っている
    final count = watch(countProvider).state;

    return Scaffold(
      body: Center(
        child: Text('count is $count'),
      ),
    );
  }
}

以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏

ps.中国語のエンジニア専門用語全然わからん、、

参考記事
ConsumerWidget