【flutter】状態管理がわからない人に向けたprovider&ChangeNotifier

皆さん、状態管理わかりますか？

webのサーバーサイド言語やSQL周りの処理をずっとやって来ていて、その後flutterに入門した自分はわかりませんでした。（笑）

状態管理はスマホアプリにおいて重要なので、記事にして共有します。

そもそも状態管理とは？

状態管理とは簡単に言うと、UIが更新される時の管理方法だと思ってください。

何もしなかったらスマホアプリは勝手にリロードしてくれません。

そのため、変数や画面に変更があった際にそれを検知するように設定する必要があります。

provider&ChangeNotifierの使い方

ファイルを2つ作ります。

1.new
2.new_model

UIを記述するのは普通の方で、modelにロジックを記述していきます。
ChangeNotifierをextends

new_model.dart

class NewModel extends ChangeNotifier{
  //ここに処理記述
}

メインの方には*ChangeNotifyProvider＊を呼び出して必要な箇所をwrapしましょう。

new.dart

ChangeNotifierProvider<NewModel>(
  create: (_) => NewModel(),
  child: Consumer<NewModel>(
   builder: (context, model, child) {
    return ;//ここにwidget入れる
   },
  ),
  

wrapしたところは引数のmodelに入っているので、呼び出すときは前につけるといけます。

model.function();
final hoge = model.variable;

こうすることでStatefulWidgetにする必要がなくなり、Statelessで対応できます。

provider&ChangeNotifierのいいところ

コード整理できる

ロジックとUIを分離させることはコードを整理させて、可読性をあげれます。

早い段階で習得する方がいいでしょう。

必要な箇所だけのリビルドでパフォーマンスUP

当然ですが、リビルドすると更新するわけで、読み込みに時間がかかります。そのため、変更のない箇所をリビルドしないようにして必要な分だけ読み込めば、読み込み時間などのパフォーマンスが向上します。

状態管理におけるメリットになりましたが、早い段階でprovider&ChangeNotifierを使えればめちゃくちゃいいです。その後の開発効率がめちゃくちゃ上がります。

参考にしたサイト

FlutterのProviderパッケージを使いこなす

providerライブラリ

Flutter実践】ProviderパターンでModelを作成する（iOS/Androidアプリ開発,プログラミング）

kboyさんの動画わかりやすい！

これみた後に公式見るとさらに理解度上がるのでおすすめです。