MENU
カテゴリー
＼気になるカテゴリーをクリック！／
【Flutter】Providerの使い方を3分で解説！（コピぺOK）
この記事には広告を含む場合があります。
FlutterのProviderの使い方がよく分からない
Providerを使って状態管理をしたい。
そこで、今回はFlutterのProviderの基本的な使い方をサンプルコードとデモ動画で解説します。
この記事で分かること！
- Providerの基本的な使い方
フリーランスのFlutterエンジニアとして働きたい方にオススメのエージェントはこちらで詳しく解説しています。
あわせて読みたい
Flutterフリーランスエージェントおすすめサイト5選！徹底比較！
Flutterの仕事をフリーランスでしたい！ どこのサイトがFlutter求人が多いのか知りたい！ そこで、今回はFlutterエンジニアの求人案件探しにオススメのサービス5選をご...
目次
【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」
状態管理パッケージの歴史
状態管理パッケージの歴史は以下の流れです。
- Scoped Model
- BLoC
- Provider →今回はココの解説
- Riverpod
ちなみに、RiverpodはProviderの開発者と同じで、Providerの上位互換パッケージです。
Providerを使ったアプリのデモ動画
Providerを使ったデモアプリの動画です。
providerのサンプルコード
Providerを使った実装方法は以下の通りです。
Providerの実装方法
１．pubspec.yamlにProviderパッケージを追加します。
dependencies:
flutter:
sdk: flutter
provider: ^6.0.4２．アプリケーション全体で使用するデータや状態を管理するためのクラスを作成します。
このクラスを「Model」と呼びます。モデルクラスをChangeNotifierに継承します。ChangeNotifierは変更を監視し、変更があった場合にウォッチャーに通知します。
class Tommorow extends ChangeNotifier {
String cloud = '？？？';
void changeCloud(String newcloud) {
cloud = newcloud;
notifyListeners();
}
}３．Providerを使用して、アプリケーション全体で使用するデータや状態を管理するためのインスタンスを生成します。
void main() => runApp(
ChangeNotifierProvider(
create: (_) => Tommorow(),
child: MyApp(),
),
);
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}４．アプリケーションの任意の場所でモデルクラスのインスタンスを取得し、データや状態を使用します。
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!),
);
}
}５．モデルクラスのインスタンスのデータや状態を変更した場合は、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のクラス
| クラス名 | 内容 |
|---|---|
| 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を使いこなしコードをスッキリさせよう！
今回はFlutterのProviderの基本的な使い方を解説しました。
Providerを使いこなして、コードをすっきりさせましょう！
以上、最後まで読んで頂きありがとうございました！
Flutterエンジニアになるには？
初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。
Flutterの学習方法を知る
あわせて読みたい
Flutter学習ロードマップ！０から初心者向けに完全解説！【2024年最新】
Flutterエンジニアになりたい Flutterエンジニアになるための学習ロードマップを知りたい これから、Flutterエンジニアを目指すならどうやったらなれるのか進め方は知っ...
Flutter をスクールで学ぶ
あわせて読みたい
Flutterプログラミングスクールおすすめ4社！36社の調査結果【完全公開】
Flutterでスマホアプリ開発をしたい！けど、挫折気味・・・ Flutterが学べるプログラミングスクールを知りたい！どこが良いのかな？ プログラミング初心者は疑問やエラ...
Flutterの副業を探す
あわせて読みたい
Flutterの副業案件おすすめのサイト3選！【週2・リモートあり】
Flutterで副業を始めたい！どこのサイトがおすすめか知りたい！ 週2,3日でスキルアップが望めるようなFlutterの案件をやりたい！どこのエージェントが良いかな？ 初めて...
おまけ：Flutter入門の完全ガイド
あわせて読みたい
【Flutter入門ガイド2024】知識ゼロから使い方・全体像が分かる！
Flutterの全体像がわからない。 Flutterの学習すべきことを知りたい。 新しいことを学習する際は全体像を捉えることが重要です。「今はここを学習してるんだな。」と実...
Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
- ローカルデータベース（SQLite）
- グラフ①（fl_chart）
- グラフ②（syncfusion_flutter_charts）
- カレンダーから日付取得①（syncfusion_flutter_datepicker）
- カレンダーから日付取得②（month_picker_dialog_2）
コメント