Providerとは

Providerとは

Flutter開発において、初心者→中級者にステップアップする上で、Providerを使うというのは避けては通れない。Google社は、BloC Patternを使うことが2018年ぐらいに推奨していましたが、その後、アプリの規模に対して学習コストが高かったり、ここまで大きなアーキテクチャが本当に必要なのか論などがあり、最近はprovider推奨らしい。現在は、Riverpodと言う新しい Provider があ出ている。Provider と作者が一緒なので、今後はRiverpodになるかもしれない。

 

結局providerってなに?

アプリの状態管理をしてくれるツールである。

情報のやり取りをしてくれるライブラリである。

 

Providerは、変更を自動で察知して、アプリ全体に変更があった事を伝える重要な機能を提供してくれる便利なパッケージ です。

 

SetStateとの比較

初級→setState

中級→Provider

 

SetStateを使った状態管理は、

【Stateless】一度表示したら、変更することがない。 → 原則上書きしない状態

【Stateful】何度か表示を変更する。 → 上書き可能な状態

 

setStateの問題点は2つ。

・パフォーマンス
・メンテナンス性

 

setStateの場合は、変更する毎に、画面全体を更新してしまいます。無関係なところも再描画されてるため無駄が多く、パフォーマンスが悪くなりがち。複雑なアプリになるとパフォーマンスの部分で大きな問題が出てくるらしい。

 

Providerは表示内容やデータの変更を、アプリ全体に効率的に伝える仕組みを提供する。Providerを使う事で、プログラム内の離れた箇所へダイレクトに変更を通知して、該当箇所のみデータや表示内容を変更する。一方でsetStateでは限られた範囲にしか変更を通知できず、さらにその範囲全てを無条件に書き換えてしまう効率の悪いものでした。

要するに、通知を簡単に効率的にやってくれるらしい。

 

MVVM(モデル・ビュー・ビューモデル) の場合

モデルの業務:データの保存や読み出しに関連すること

ビューモデルの業務:モデルとビューのやり取りの仲介に関すること

ビューの業務:データの表示、アプリの見た目に関すること

これらの業務間で、データが変更された、データを変更して、データをください、などをやり取りする時にProviderの機能を使って連携するのです。

Providerは、あくまで状態が変化を伝える方法。

 

Providerの仕組み

監視するために「ChangeNotifierProvider」 というWidgetが一番最初のメイン関数が呼ばれるタイミングで組み込まれてます。

void main()  {
  runApp(ChangeNotifierProvider(
      create: (_) => TopScreenModel(),
      child: MyApp()));
}

これでによって、アプリ全体の変更を察知くれるわけです。

 

Providerの3つの役目

・変更を通知する。→ Provider.of<TopScreenModel>(context, listen: false)
・変更をあった事を全体に通知する。→ notifyListeners();
・変更があったら、その分を変更する。→Consumer

 

ちなみにProviderを使うと、StatefulWidgetを使わずStatelessWidgetで書くことができる。

FlutterにProviderを追加する

lib
│ main.dart

├─models
│      logic.dart

└─view
        ui.dart

 

補足:

設計(アーキテクト)であるMVVMパターンについて

f:id:yukking3:20210904182149p:plain

f:id:yukking3:20210904184311p:plain

 

Providerを使ったMVVMパターンの実装方法

状態管理の仕組み。

f:id:yukking3:20210904182232p:plain

f:id:yukking3:20210904183912p:plain

 

クラス間のDependecy Injectionについて

f:id:yukking3:20210904182325p:plain