📡
【Flutter】FutureBuilder は Stateful Widget で使おう
この記事では、FutureBuilder の正しい使い方について解説したいと思います。感覚的に FutureBuilder を使っていたら、意図しない挙動がしてしまうことがあったので、その解説になります。
TL;DR
FutureBuilder の future は、StatefulWidget の initState などであらかじめ保持しましょう。
よくある間違い
以下の例のコードを書いてしまうと、FutureBuilder が予期せぬ挙動をします。FutureBuilder の future を build の中で書いてしまうことで、親 Widget のリビルド時に future が再実行されてしまうからです。
よくある間違い
Widget build(BuildContext context) {
return FutureBuilder(
future: context.read<HogeNotifier>().fetch();
...
)
...
}
正しい実装
FutureBuilder の future は State.initState、State.didUpdateWidgetもしくは、State.didChangeDependenciesで予め保持されているべきです。State.build や StatelessWidget.buildで定義されるべきではありません。
正しい実装
late Future<String> _future;
initState(){
_future = context.read<HogeNotifier>().fetch();
}
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: _future,
...
)
...
}
もし、future の値を変更する必要がある場合、setStateで future を更新することでリビルドします。
宣伝
ダイエット中の人を応援するために、ファミリーレストランのメニューをガチャガチャ形式で選べるネタ(?)サイトを作成しました。
カロリーを指定してメニューを選べるので、ネタで遊んでみてください！
普段は、誰でも使いやすい「筋トレ記録アプリ」を開発しておりますので、こちらも是非ご利用ください！
Discussion