[Troubleshooting] Vertical viewport was given unbounded height.

이원석·2023년 11월 29일
0

Flutter

목록 보기
30/46
post-thumbnail

ERROR

Vertical viewport was given unbounded height.

return Column(
      children: [
        ListView(
          children: [
              Container(color: Colors.amber, height: 200,),
              Container(color: Colors.cyan, height: 400,),
              Container(color: Colors.orange, height: 200,),
          ],
        )
      ],
    );

column안에 listview를 넣을 때 발생


해결법

1. shrinkWrap 사용

shrinkwrap : true을 사용하면 Listview가 필요한 공간만 차지하도록 변경

return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ListView(
          shrinkWrap: true, // 추가
          children: [
              Container(color: Colors.amber, height: 200,),
              Container(color: Colors.cyan, height: 400,),
              Container(color: Colors.orange, height: 200,),
          ],
        )
      ],
    );

2. 부모영역 지정

return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox( // 부모 영역 지정
          height: MediaQuery.of(context).size.height,
          child: ListView(
            children: [
              Container(color: Colors.amber, height: 200,),
              Container(color: Colors.cyan, height: 400,),
              Container(color: Colors.orange, height: 200,),
            ],
          ),
        )
      ],
    );

3. 확장 위젯 사용

return Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Expanded( // 확장 위젯 사용
          child: ListView(
            children: [
              Container(color: Colors.amber, height: 200,),
              Container(color: Colors.cyan, height: 400,),
              Container(color: Colors.orange, height: 200,),
            ],
          ),
        )
      ],
    );

참조
알렉산도대왕의 MetaCode

0개의 댓글