flutterのhooks_riverpodでhooksとriverpodを同時に使用する際に起きる挙動について
解決したいこと
現在、勉強用の開発でhooks_riverpodを使用して、ポケモン一覧画面の作成をしています。
上タブにタイプを表示して表示しているポケモンを絞るようにしたいのですが、上タブで「すべて」から適当なタイプに変更した際に一瞬ポケモンが絞れるのですが、すぐに「すべて」に戻ってしまいます。（絞ったポケモンも元に戻ります）
該当するソースコード
PokemonStateNotifier
final pokemonListStateNotifierProvider = StateNotifierProvider.autoDispose
.family<PokemonListStateNotifier, AsyncValue<List<PokemonAbout>>, void>((ref, _) {
return PokemonListStateNotifier(fetchPokemonListUseCase: ref.watch(fetchPokemonListUseCaseProvider));
});
class PokemonListStateNotifier extends StateNotifier<AsyncValue<List<PokemonAbout>>> {
final FetchPokemonListUseCase _fetchPokemonListUseCase;
late int _limit;
late int _offset;
// 無限スクロールの実現の際にAPIを呼び出し中か
late bool _isCalling;
// 無限スクロールの実現の際に追加取得できるかどうか（末尾まで来ていたらfalse）
late bool _isCallable;
PokemonListStateNotifier(...)
Future<void> fetchPokemonList() async {
...
}
}
PokemonView
class HomeView extends HookConsumerWidget {
HomeView({super.key});
final TextEditingController _controller = TextEditingController();
// 上タブの全ての欄の表示に使用する
final String _allCategory = "すべて";
final GSize _bottomPriceTagSize = GSize(width: 60, height: 20);
final Color _bottomPriceTagTextColor = Colors.white;
final Color _bottomPriceTagFrameColor = Colors.black;
@override
Widget build(BuildContext context, WidgetRef ref) {
final selectedCategoryName = useState(_allCategory);
// 上タブのカテゴリーを表示する用のプロバイダ
final categoryList = ["すべて"、"ほのお"・・・・];
// グリッドビューでポケモンの一覧を表示する用のプロバイダ
final pokemonListState = ref.watch(pokemonListStateNotifierProvider(Void));
final pokemonListStateNotifier = ref.watch(pokemonListStateNotifierProvider(Void).notifier);
// 初回呼び出し
useEffect(() {
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
pokemonListStateNotifier.fetchPokemonList();
});
return;
}, const []);
// 関数の定義
List<PokemonAbout> getCategorizedPokemonList(List<PokemonAbout> pokemonList) {
return pokemonList.where((pokemon) {
if (selectedCategoryName.value == _allCategory) {
return true;
}
return selectedCategoryName.value == pokemon.categoryName;
}).toList();
}
return Scaffold(
appbar: Appbar(
// tabbarの設定は省略
)
body:
// getCategorizedPokemonListで絞ったものをgridViewに表示しています。（省略）
// getCategorizedItemListの引数にpokemonListStateの値を代入しています。
)
}
}
0