MENU
カテゴリー
\気になるカテゴリーをクリック!/
FlutterのProviderの使い方がよく分からない
Providerを使って状態管理をしたい。
そこで、今回はFlutterのProviderの基本的な使い方をサンプルコードとデモ動画で解説します。
フリーランスのFlutterエンジニアとして働きたい方にオススメのエージェントはこちらで詳しく解説しています。
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を使った実装方法は以下の通りです。
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()
メソッドを呼び出して、変更を監視しているウォッチャーに通知します。
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();
}
}
クラス名 | 内容 |
---|---|
ChangeNotifier | ChangeNotifierは、状態の管理を行うためのクラスで、その状態が変更されたことを通知するための仕組みを提供します。ChangeNotifierを継承したクラスは、アプリケーション全体で共有するデータや状態を管理するために使用されます。そして、providerを使用して、アプリケーション全体で使用するインスタンスを生成し、データや状態を使用することができます。// 値が変更したことを知らせる // 画面を再描画 notifyListeners(); |
notifyListeners | ChangeNotifierクラスが提供するメソッド。ChangeNotifierProvider 内にあるウィジェットの変数を更新させる |
ChangeNotifierProvider | ChangeNotifier のクラス内で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の基本的な使い方を解説しました。
Providerを使いこなして、コードをすっきりさせましょう!
以上、最後まで読んで頂きありがとうございました!
Flutterエンジニアになるには?
初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。
Flutterの学習方法を知る
Flutter をスクールで学ぶ
Flutterの副業を探す
おまけ:Flutter入門の完全ガイド
Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
Widget(ウィジェット) 一覧
Dart 基本文法
ライブラリ 使い方
コメント