コード・実装

【Flutter / Riverpod】flutter_riverpodの基本の使い方・導入方法

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を使ってみてください。

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

 

【2021年】Flutterを学べるオススメの入門書・技術書3選+α【初心者向け】Flutter初心者がスマホアプリ開発の手法を学べるオススメ書籍を厳選してご紹介します。 Flutterとは、Googleが開発し...
ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】