RiverpodでinitStateを使わず、autoDisposeでUIを再構築する

FlutterのRiverpodの話。

10月に入って、作りかけのアプリのProvider -> Riverpodへのリプレイスを行っています。zennで公開されているRiverpod解説には大変お世話になりました。

ひとつわからなかったのが、「タブを切り替えた時に自動でそのページの中身をリロードして欲しい」という処理の書き方。

StatefulWidgetであれば、initStateが使える。ただ、Riverpodで提供されているHookWidgetやConsumerWidgetには、StatefulWidgetが提供するライフサイクルが存在しない。少なくとも、Riverpodの1.4系だと。

お買い物かごにアイテムを何点か追加して、お買い物かごタブをタップした時、タップに応じて画面を最新化する必要がある。カートはローカルにあるデータで、FutureProvierを使って画面を構築していますが、タップでタブを切り替えてもUIが再構築されない。providerをキャッシュしているから当たり前だけど、ユーザーの画面操作でproviderを更新できないので、どうしようか悩んだ。

結論は単純だった。autoDisposeで自動廃棄してもらうだけ。

final cartController = FutureProvider.autoDispose<CartState>((ref) {
  return loadCart();
});

autoDisposeはスクリーンが消えると読み出してくれるようで、タブで画面を切り替えると、providerで保持した値も全部消える。裏返せば、タブを切り替えるタイミングで毎回データが初期化されるので、providerの値が常に更新され、UIが再構築されました。

最新情報を常に取ってこないといけない類の画面の実装は、FutureProvier.autoDisposeで行けそうだね。stateも任意のタイミングで更新できますので。ちゃんちゃん。