少しハマった箇所があったので、備忘録として記録します。
目次
やりたいこと
- プログレス（グルグル回るやつ）を表示する
- ストレージにアクセスし、表示データのリストを取得
- プログレスの代わりに、取得したデータのListViewを表示する
ハマったこと
ListViewの要素が増えると、bottomがオーバーフローする。スクロールもできない。
以下がその実装
class PasswordListPage extends StatefulWidget {
// ......
}
class _PasswordListPageState extends State<PasswordListPage> {
Future<List<PasswordInfo>> _passwords = PasswordService().findAll(); // 内部でストレージにアクセス
@override
Widget build(BuildContext context) {
return Scaffold(
// ......
body: Column(
// ......
PasswordWidget.futureListView(passwords: _passwords),
],
),
);
}
}class PasswordWidget {
/// パスワード情報取得後、パスワード一覧を表示するWidgetを返却
static Widget futureListView({required Future<List<PasswordInfo>> passwords}) {
return FutureBuilder<List<PasswordInfo>>(
future: passwords,
builder: (_, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
// ......
);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
);
}
}- FutureBuilder : 非同期処理中/完了後によって異なる表示ができるWidget
- CircularProgressIndicator : プログレスを表示するWidget
原因・修正内容
親のColumn内で FutureBuilder のサイズが指定されていなかったことが原因の様子。
親子関係を Column – FutureBuilder から Column – Flexible – FutureBuilder へ変更することで、ListViewのスクロールが可能になり、オーバーフローすることはなくなった。
class PasswordListPage extends StatefulWidget {
// ......
}
class _PasswordListPageState extends State<PasswordListPage> {
Future<List<PasswordInfo>> _passwords = PasswordService().findAll(); // 内部でストレージにアクセス
@override
Widget build(BuildContext context) {
return Scaffold(
// ......
body: Column(
// ......
Flexible(
child: PasswordWidget.futureListView(passwords: _passwords),
),
],
),
);
}
}