[1] Flutter Listview, Gridview 에러 이유

대부분의 예제를 따라할때의 Listview, Gridview등의 위젯의 형태는 

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var testArray = <int>[10, 20, 30, 40, 50];

    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
          itemCount: testArray.length,
          itemBuilder: (context, index) {
            return Text('${testArray[index]}');
          },
        ),
      ),
    );
  }
}

 

이런식으로 많은 예제들에선 Scaffold 하위 body에 바로 표시된다.

 

근데 실제로 body안에 리스트 이외에 다른 위젯을 추가하고 싶어 Listview을 Column로 래핑하는 경우가 생긴다.

 

ListView를 Column로 래핑한 모습

이 상태로 핫리로드를 해보면 갑자기 에러가 뜰 것이다. 

 

단순히 래핑만 했는데 에러가 뜬다.

 

이유는 Listview에 대한 크기가 설정이 안되있기 때문이다.

 

body에 바로 Listview를 배치했을땐 자동으로 최대 크기로 설정되기 때문에 에러가 발생하지 않는데 Column을 래핑하면 Listview의 크기를 별도로 설정해줘야한다.

 

방법은 여러가지가 있다. 

 

1. Expanded 위젯으로 래핑

Expanded위젯은 하위 위젯을 화면의 남는공간 전부를 차지하는 위젯이다.

Column의 위젯으로 Container 하나를 추가해서 확인해보면

아래 위젯의 크기 100만큼을 제외한 전부가 Listview 의 크기로 설정된 것을 볼 수 있다.

 

 

2. Container 위젯으로 래핑 후 height 설정

단순히 Container 위젯으로 래핑만 하면 큰 차이가 없기때문에 같이 오류가 발생한다.

결국 핵심인 크기를 설정해주면 된다.

Container 위젯으로 래핑 후 height를 설정하면 된다.

 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var testArray = <int>[10, 20, 30, 40, 50];
    MediaQueryData deviceData = MediaQuery.of(context);
    Size screenSize = deviceData.size;

    return Scaffold(
      body: Column(
        children: [
          Container(
            height: screenSize.height * 0.2,
            child: ListView.builder(
              itemCount: testArray.length,
              itemBuilder: (context, index) {
                return Text('${testArray[index]}');
              },
            ),
          ),
          Container(
            height: 100,
            color: Colors.blueAccent,
          )
        ],
      ),
    );
  }
}

사실 크기를 정해놓고 사용하는 경우는 드물다.

build 위젯이 시작될때 화면 크기를 설정해놓고, Container 내부에서 크기를 * 0.2 이런식으로 비율로 설정할 수 있다.

 

* 실제로 난 GetX를 통해 상태관리를 하기때문에 

height: context.mediaQuery.size.height * 0.4 

이런식으로 사용하는데 GetX 세팅도 원활하지 않은 것 같아서 현재 포스팅은 MediaQuery.of(context)로 한다.

 

에러의 원인은 크기 설정이 안되있기 때문이다. 

 

어떤 방식으로든 크기만 설정해주면 에러는 해결된다.

 

 

MediaQuery참고 : https://velog.io/@sharveka_11/Flutter-38.-MediaQuery