autoDispose修飾子とは
そのProviderへの参照(watch
等の監視)が無くなった時、自動でそのProviderが破棄されるようになります。
再度、参照(watch
等の監視)された際は新たなProviderとして構築されるので、以前のProviderの状態は引き継ぎません。
詳しい解説
通常、Providerの値はキャッシュされ、例えば複数の画面で watch
されてもキャッシュされている値を取得できます。
表示のたびに新しい値を取得し直す必要のないProviderの場合はこれで問題ありません。
ただ、いくつかのユースケースでは毎回新しい値を取得し直したい場合や古いProviderを破棄させたい場合があります。
ユースケースを考えて詳しく見ていきましょう。
詳細画面に遷移するたびに最新の詳細情報を取得・表示したい
とある通販アプリの画面では、商品リストを表示しています。
その中からユーザーが気になる商品リストをタップすると、その商品の詳細情報が表示される詳細画面へ遷移します。
商品情報だけでなく、在庫情報やレビュー情報が表示される画面です。
仮にこの画面ではこのようなProviderが使われるとします。
final productDetailProvider = FutureProvider<ProductDetail>((ref) {
final id = ref.watch(selectedProductIdProvider);
return ref.watch(productRepository).fetch(productId: id)
});
この時、AutoDisposeではないProviderを使用して商品データを取得・表示させていた場合は、一度商品リスト画面へ戻って、数分後にまた同じ商品詳細ページに遷移してきても、前回表示された情報がそのまま表示されます。
詳細画面に遷移してくるたびに、 ref.refresh
させても最新の情報を表示させることはできますが、スマートではなさそうです。
final productDetailProvider = FutureProvider.autoDispose<ProductDetail>((ref) {
final id = ref.watch(selectedProductIdProvider);
return ref.watch(productRepository).fetch(productId: id)
});
autoDispose
修飾子を付けることで、詳細画面を閉じてリスト画面へ戻るタイミングで productDetailProvider
をwatchする者がいなくなり、破棄されます。
disposeされたタイミングで何かしたい
ref.onDispose
が使用できます。
final autoDisposeProvider = Provider.autoDispose((ref) {
ref.onDispose(() {
// このProviderが使用されなくなった=破棄される直前に実行されます
});
});