【flutter_riverpod】Riverpodの状態管理 / 基本の使い方・導入方法

FlutterのRiverpodの導入方法の基礎をご紹介します。

RiverpodとはDart・Flutterで使用できる「状態管理ライブラリ」です。公式推奨パッケージの一つです。

元々、Providerという状態管理の方法があったのですが、そのライブラリの開発者さんがProviderの改善点を元に再構成したアプリです。

今、新アプリを作ろうと思っているのですが、Riverpodの導入に少してこづったので、今回は新しく学んだ、FlutterのRiverpodの中の、「flutter_riverpod」のパッケージの導入方法をシンプルに説明します。

（今回は、パッケージ「riverpod（Dartのみ）」と「flutter_hooks」は説明しません。）

flutter_riverpodの導入方法

①「flutter_riverpod」のインストール

下記から導入をします。（2021年9月1日時点）

https://pub.dev/packages/flutter_riverpod/install

コマンドで導入する方法

ターミナルから下記コマンドをたたきます。

$ 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),
      ),
    );
  }
}

 

ここまで読んていただき、ありがとうございました。