【Flutter】Flutter Riverpodについて

はじめに

今回はFlutterで使用されている状態管理パッケージのRiverpodについて書いていきたいと思います。

Flutter Riverpodとは

Riverpodは、状態管理するパッケージで様々なウィジェットにデータを提供することができます。ウィジェットが多層のネストになっても簡単にデータを取得することができます。

Flutter Riverpodの使い方

以下に簡単なFlutter Riverpodの使い方を書いていきます。(flutter create 〇〇で生成されたサンプルコードから変更して試しています。)

Provider(変更不可のデータ管理)

pubspec.yamlに以下を追加します。

dependencies:
 flutter:
   sdk: flutter
 flutter_riverpod: ^1.0.4

main.dartのMyApp()をProviderScope()の中に入れます。

import 'package:flutter_riverpod/flutter_riverpod.dart';


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

MyHomePageクラスを削除します。
_MyHomePageStateクラス→MyHomePageクラス(ConsumerWidgetを継承)に名前を変えて、以下のように変更します。

// 追加
final strProvider = Provider((_) {
 return 'Hello World';
});


class MyHomePage extends ConsumerWidget {
 @override
 Widget build(BuildContext context, WidgetRef ref) {
   final value = ref.watch(strProvider); // 追加
   return Scaffold(
     appBar: AppBar(
       backgroundColor: Theme.of(context).colorScheme.inversePrimary,
       title: const Text("riverpod"),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           const Text(
             'You have pushed the button this many times:',
           ),
           Text(
             value, // 変更
             style: Theme.of(context).textTheme.headlineMedium,
           ),
         ],
       ),
     ),
   );
 }
}

上記のようにすると、strProviderが提供している”Hello World”(変更不可の文字列)を取得することができます。

StateNotifierProvider(変更可のデータ管理)

状態と状態を変更するメソッドを追加します。(以下文字列の状態管理と変更)

// 追加
class StrNotifier extends StateNotifier<String> {
 StrNotifier() : super('');


 void changeStr(String str) {
   state = str;
 }
}

以下のように変更すると外部からデータの状態を変更をすることができます。
strStateControllerのメソッドで状態を変更するとウィジットが再描画されます。

// 追加
final strNotifierProvider =
   StateNotifierProvider<StrNotifier, String>((_) => StrNotifier());


class MyHomePage extends ConsumerWidget {
 TextEditingController controller = TextEditingController();
 @override
 Widget build(BuildContext context, WidgetRef ref) {
   final strStateController =
       ref.watch(strNotifierProvider.notifier); // 変更のとき使う
   final str = ref.watch(strNotifierProvider); // 表示のとき使う
   return Scaffold(
     appBar: AppBar(
       backgroundColor: Theme.of(context).colorScheme.inversePrimary,
       title: const Text("riverpod"),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             str, // 変更
             style: Theme.of(context).textTheme.headlineMedium,
           ),
           TextField(
             controller: controller,
           ),
           ElevatedButton(
             onPressed: () {
               strStateController.changeStr(controller.text); // 変更
             },
             child: const Text('変更'),
           ),
         ],
       ),
     ),
   );
 }

おわりに

Riverpodのパッケージについて書きました。
他の種類のデータを管理するProviderがあるので、勉強していきたいです。
またFlutterのメジャーなパッケージの使い方など理解を深めていけたらいいなと思います。