MENU

MENU

カテゴリー

\気になるカテゴリーをクリック!/

やきいも
文系SE
【プロフ】
 ▶ 30代半ば
 ▶ ITエンジニア13年目 | 業務システム
 ▶ 妻と息子の3人で田舎の暮らし

【サイト運営】
このブログは私の体験をもとに以下に関する情報をお届けしています。
 ▶ AI
 ▶ Java
 ▶ Flutterなど
Udemyセール!最大95%オフ!1,200円~11月の最新セール情報をみる

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

この記事にはPRを含む場合があります。

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


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

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

フリーランスのFlutterエンジニアとして働きたい方にオススメのエージェントはこちらで詳しく解説しています。

目次

【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 をスクールで学ぶ

Flutterの副業を探す

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

Flutter/Dartの基礎一覧

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

Widget(ウィジェット) 一覧

Dart 基本文法

ライブラリ 使い方

コメント

コメントする

CAPTCHA


目次