[해결방법] Vertical viewport was given unbounded height

아래 오류는 플러터를 처음 접하는 개발자부터

중급이상의 개발자까지 두루 접하게 되는 문제인것 같다.

 

Vertical viewport was given unbounded height.

 

리스트나 스크롤뷰를 사용하는 시점부터 자주 접하게 되는 이슈인데 

항상 문제점만 해결하고 넘어갔지만 

오늘은 큰 맘먹고 해결 방법에 대해 몇가지 작성해보려고 한다.

 

 

우선, 해당 오류가 발생하는 코드부터 만들어보았다.

ListView를 Column안에 사용한 코드 이다.

import 'package:flutter/material.dart';

class SampleListView extends StatefulWidget {
  const SampleListView({Key? key}) : super(key: key);

  @override
  _SampleListViewState createState() => _SampleListViewState();
}

class _SampleListViewState extends State<SampleListView> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListView(
          children: [
              Container(color: Colors.amber, height: 200,),
              Container(color: Colors.cyan, height: 400,),
              Container(color: Colors.orange, height: 200,),
          ],
        )
      ],
    );
  }
}

 

해당 코드를 실행하면 어김없이 오류가 발생한다.

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.

Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.

If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.

 

 

[해결방안 1]

shrinkWrap 사용

  @override
  Widget build(BuildContext context) {
    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]

부모 영역 지정

@override
  Widget build(BuildContext context) {
    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]

확장 위젯 사용

@override
  Widget build(BuildContext context) {
    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,),
            ],
          ),
        )
      ],
    );
  }

 

알고나면 아주 쉬운 해결방안들

쓰다보면 익숙해진다 :)