初めてのQiitaへの投稿です。
Columnウィジェット内でListViewを使おうとしたところ、エラーが発生してしまったのでメモ。
エラー文
Vertical viewport was given unbounded height.
どうやら垂直方向の高さが無制限になっていることが原因みたいです。
ソースコード
class _MyAppState extends State<MyApp> {
List<Widget> list = [];
@override
void initState() {
super.initState();
for (int i = 1; i <= 100; i++) {
list.add(
Card(
margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text('item${i}',),
),
),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Text(
'ListView',
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
),
ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: list,
),
],
),
),
);
}
}
解決策
まず、ListView内にshrinkWrap: trueを入力します(shrinkWrapはfalseがデフォルト)。これによって、垂直方向の高さが無制限になってしまう問題は解決します。しかし、これだけだと画面をスクロールすることができません。さらに、「A RenderFlex overflowed by 3976 pixels on the bottom.」というエラーまで発生してしまいます。
その問題を解決するために、ListViewをExpandedで囲みます。すると、エラーも消え、画面をスクロールすることができるようになりました。また、Expandedの代わりにFrexibleを使用することも可能です。
参考