카테고리 없음

ListView 안에 ListView

신승호. 2023. 1. 30. 17:04

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

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번의 자식이야'),
              ]
            )
        ),
      ),
    );
  }
}

수정한 코드

 

실행결과