magazine off

テクノロジー・マガジン OFFです!コラム ✖️ 最新ニュースをほぼ毎日お届けしています。

FlutterのProvider(notifyListeners)でfirebaseのwhereしたとき画面を再ビルドしてアップデートする方法

FlutterのProvider(notifyListeners)でfirebaseのwhereしたとき画面を再ビルドしてアップデートする方法

 

 

Web出身者がFlutterへ入門するとき、一番最初に困難にぶつかるのは状態管理なんじゃないかと思います。

 

Flutterみたいな宣言型のプログラミング言語は、 JavascriptのAjaxみたいに、変更された画面の一部分だけ更新するみたいなことは出来ません。

 

TODOリストのタイトルを変更したならば、TODOリスト全体を最ビルドしてUIを再構築しなきゃいけないんですよね。

 

FirebaseChangeNotifierをどう使うか

 

例えば、私がFlutter開発で最初にぶち当たった壁は、データの更新が画面に表示されないという問題でした。

 

趣味で作ったアプリで、My Pocket URL Link Listというのがあるのですが、このリストにソート機能を付けたいなって思ったんですよ。

 

 

Firebaseでデータは扱ってるのですが、下記のように書くと、tagフィールドが、linkTag変数に一致するものだけデータを取ってきてくれます。

 

 

だけど、これを実行して画面更新を引き起こすのは、関数の中でnotifyListeners(); を実装する必要があります。

 

 

そして、notifyListeners();を実行するためには、ChangeNotifierを拡張したクラスの中で実行しなきゃいけません。

 

 

この例では、ListModel というモデルクラスを作って、それをproviderで下位のウィジットに提供することで、

 

下位のウィジットとかListModel へアクセスが出来ます。

 

 

このようにすると、下位のウィジットから、updateListを叩けるようになります。変数などを引数で渡したい場合は、別途Dartの関数について調べてみてください。

 

 

で、updateListにはnotifyListeners()が実装されていますの、画面更新が起こってUIが再ビルドされます。

 

 

これで、Okです。画面が更新されるようになりました。

 

実行動画は、簡単にではありますがこちらになります。

 

UIは今ちょうテキトーなので悪しからず。

 

 

コメントを残す