【Flutter】Providerの使い方を3分で解説!(コピぺOK)

FlutterのProviderの使い方がよく分からない
Providerを使って状態管理をしたい。


そこで、今回はFlutterのProviderの基本的な使い方サンプルコードとデモ動画で解説します。

この記事で分かること!
  • Providerの基本的な使い方

ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。

  • 学習の計画
  • スケジュール管理
  • ポートフォリオ作成時に技術選定 など

初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。

目次

【Flutter】Providerは再描画コストとStatefulWidgertの削減ができる

Googleも推奨している状態管理パッケージで、特定のWidgetのみに状態の変更を通知できます。

Providerパッケージを利用することで、再描画(リビルド)コストとStatefulWidgertの削減ができプログラムコードがスッキリした管理となります。また、アプリケーション全体で共有するデータや状態を管理できます。

焼き芋

Providerは名前の通り、親ウィジェットから子ウィジェットにデータを提供する(プロバイド)ことができます

Providerとは

A wrapper around InheritedWidget to make them easier to use and more reusable.

(直訳)InheritedWidgetをより使いやすく、より再利用しやすくするためのラッパーです。

引用:pub.dev「provider」
状態管理パッケージの歴史

状態管理パッケージの歴史は以下の流れです。

ちなみに、RiverpodはProviderの開発者と同じで、Providerの上位互換パッケージです。

Providerを使ったアプリのデモ動画

Providerを使ったデモアプリの動画です。

providerのサンプルコード

Providerを使った実装方法は以下の通りです。

Providerの実装方法

1.pubspec.yamlにProviderパッケージを追加します。

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.4

2.アプリケーション全体で使用するデータや状態を管理するためのクラスを作成します。

このクラスを「Model」と呼びます。モデルクラスをChangeNotifierに継承します。ChangeNotifierは変更を監視し、変更があった場合にウォッチャーに通知します。

class Tommorow extends ChangeNotifier {
  String cloud = '???';

  void changeCloud(String newcloud) {
    cloud = newcloud;
    notifyListeners();
  }
}

3.Providerを使用して、アプリケーション全体で使用するデータや状態を管理するためのインスタンスを生成します。

void main() => runApp(
      ChangeNotifierProvider(
        create: (_) => Tommorow(),
        child: MyApp(),
      ),
    );

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

4.アプリケーションの任意の場所でモデルクラスのインスタンスを取得し、データや状態を使用します。

Provider.of<MyModel>(context);でデータを受け取ります。

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
              '明日の天気は' + Provider.of<Tommorow>(context).cloud),
        ),
        body: Center(
          child: Column(
            children: [
              CloudButton(cloud: '晴れ'),
              CloudButton(cloud: 'くもり'),
              CloudButton(cloud: '雨'),
            ],
          ),
        ),
      ),
    );
  }
}

class CloudButton extends StatelessWidget {
  final String? cloud;

  CloudButton({this.cloud});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Provider.of<Tommorow>(context, listen: false).changeCloud(cloud!);
      },
      child: Text(cloud!),
    );
  }
}

5.モデルクラスのインスタンスのデータや状態を変更した場合は、notifyListeners()メソッドを呼び出して、変更を監視しているウォッチャーに通知します。

Providerのサンプルコード全文

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(
      ChangeNotifierProvider(
        create: (_) => Tommorow(),
        child: MyApp(),
      ),
    );

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
              '明日の天気は' + Provider.of<Tommorow>(context).cloud),
        ),
        body: Center(
          child: Column(
            children: [
              CloudButton(cloud: '晴れ'),
              CloudButton(cloud: 'くもり'),
              CloudButton(cloud: '雨'),
            ],
          ),
        ),
      ),
    );
  }
}

class CloudButton extends StatelessWidget {
  final String? cloud;

  CloudButton({this.cloud});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Provider.of<Tommorow>(context, listen: false).changeCloud(cloud!);
      },
      child: Text(cloud!),
    );
  }
}

class Tommorow extends ChangeNotifier {
  String cloud = '???';

  void changeCloud(String newcloud) {
    cloud = newcloud;
    notifyListeners();
  }
}

providerのクラス

クラス名内容
ChangeNotifierChangeNotifierは、状態の管理を行うためのクラスで、その状態が変更されたことを通知するための仕組みを提供します。ChangeNotifierを継承したクラスは、アプリケーション全体で共有するデータや状態を管理するために使用されます。そして、providerを使用して、アプリケーション全体で使用するインスタンスを生成し、データや状態を使用することができます。// 値が変更したことを知らせる
// 画面を再描画
notifyListeners();
notifyListenersChangeNotifierクラスが提供するメソッド。ChangeNotifierProvider内にあるウィジェットの変数を更新させる
ChangeNotifierProviderChangeNotifierのクラス内でnotifyListeners()が宣言された時、変数を変更できるようにするウィジェット
Provider.of<変数を格納しているクラス名>(context)providerパッケージに含まれる関数で、ChangeNotifierProviderによって管理されているデータや状態を取得するために使用します。変数を呼び出す際に使用。
Provider.of()は、第1引数にBuildContextを取り、第2引数にはlistenを取ります。listenを省略した場合は、デフォルトでtrueになり、ChangeNotifierによって管理されている状態が変更されるたびに再描画されるようになります。
Provider<T>.value() 親Widgetから子Widgetにデータを受け渡せます。
MyModelクラスのインスタンスをProvider.value()に渡し、そのインスタンスのデータや状態を使用することができます。
Provider.value()は、ChangeNotifierProviderに比べ、状态の監視を行わないので、状態が変更されたことを監視するためにnotifyListeners()メソッドを呼び出す必要はありません。
Provider.value()は、ChangeNotifierProviderに比べ、簡単に使用することができるため、状態の管理について簡単なものであれば、Provider.value()を使用することを推奨します。

FlutterのProviderを使いこなしコードをスッキリさせよう!

今回はFlutterのProviderの基本的な使い方解説しました。

Providerを使いこなして、コードをすっきりさせましょう!


以上、最後まで読んで頂きありがとうございました!

Flutterエンジニアになるには?

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

おまけFlutter入門の完全ガイド

Flutter/Dartの基礎一覧

Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

Widget一覧

画面レイアウト

ボタン

入力・出力

ページ遷移

状態管理

非同期処理

Dartの基本文法

ライブラリ使い方

目次