ListView 안에 ListView

다음의 코드의 결과값을 예상해보고, 실행해본 뒤에 에러가나는 이유에 대해서 연구하세요.

ListView(
       children: [
            Text('안녕 난 1번 ListView의 자식이다'),
            Text('나도! 1번 ListView의 자식이야'),
            ListView(
                   children: [
                        Text('난 2번의 자식임'),
                        Text('나도 2번의 자식임'),
                                 ]
                         ),
                  Text('난 멀리 떨어져있지만 1번의 자식이야'),
                    ]
)

 

 

에러: Vertical viewport was given unbounded height.

 

Listview는 부모 위젯의 높이에 맞춰서 자신의 높이를 설정한다. 따라서 Listview의 내부 컨텐츠가 적은 공간만 차지해도 되는 상황이라도 Listview는 사용할 수 있는 최대 공간을 차지한다. 이러한 Listview의 성격 때문에 위와 같은 에러가 발생한다. Column의 높이가 정해지지 않은 상태이기 때문에 Listview의 높이가 무한이 된 것이다. 따라서 Listview의 높이를 설정해주면 해당 에러를 해결할 수 있다

 

해결방법은 세 가지가 있다.

 

1. shrinkWrap : true

   - 이렇게 하면 내부 컨텐츠에 맞춰서 높이가 결정된다. 하지만 이렇게 하면 ListView안의 children이 많아져 화면 이상으로 넘어가면 오버플로우가 발생하게 되는 문제가 있다.

   - 그러면 physics 속성 사용

 

2. SizedBox()

   -  ListView를 SizedBow로 감싸고 SizedBow에 height를 설정한다.

 

3. Expanded()

   - 고정된 높이를 주기 싫고 화면의 나머지 높이를 전부 ListView에 할당해주고 싶을 때 사용한다.

 

[출처]

https://devmemory.tistory.com/57

https://terry1213.github.io/flutter/flutter-vertical-viewport-was-given-unbounded-height/

 

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        body: SafeArea(

          child: ListView(

            children: [

                Text('안녕 난 1번 ListView의 자식이다'),

                Text('나도! 1번 ListView의 자식이야'),

                ListView(

                  shrinkWrap: true,

                  physics: NeverScrollableScrollPhysics(),

                  children: [

                    Text('난 2번의 자식임'),

                    Text('나도 2번의 자식임'),

                    ]

                ),

                Text('난 멀리 떨어져있지만 1번의 자식이야'),

              ]

            )

        ),

      ),

    );

  }

}

수정한 코드

 

실행결과