[flutter] Column 안에 ListView 사용하는 방법

플러터에서 Column 안에 ListView 사용하는 방법

플러터에서 리스트 위젯은 정말 다양하게 사용됩니다. 다음과 같은 상황에 주로 사용되며 이외에도 리스트는 많은 기능을 구현하는데 활용되곤 합니다.

 

1. 화면 전체가 리스트 스크롤 영역인 경우

2. 상단부는 검색란 고정, 하단부는 리스트 스크롤 영역인 경우

3. 화면 전체가 리스트 스크롤 영역이면서 안에 스크롤이 없는 하위 리스트가 포함된 경우

 

이때 Column, ListView 위젯 안에 ListView를 적용하게 되면 아래와 같은 hasSize 오류가 발생합니다.

 

이는 ListView의 부모 위젯 높이가 무한대이기 때문에 발생한 오류로, ListView가 차지하는 공간 크기를 설정해줘야 한다는 내용입니다. 그러면 문제를 해결하는 3가지 방법에 대해 알아보겠습니다.

 

1. ListView 높이 고정하기

첫 번째는 ListView를 Container 또는 SizedBox 위젯으로 감싸주고 높이를 고정시키는 방법입니다. 다만 이 방법은 리스트의 높이에 포함되는 항목만 화면에 나타나고, 나머지는 잘리기 때문에 높이가 딱 정해진 경우만 사용하시길 권장드립니다. 

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('ListView In Column Widget'),
    ),
    body: Column(
      children: [
        Container(
          height: 100, // 높이를 100으로 고정
          child: ListView.builder(
            itemCount: 10,
            itemBuilder: (BuildContext context, int index) {
              return Text('Row $index');
            },
          ),
        ),
      ],
    ),
  );
}

 

2. ListView 영역 확장하기

두 번째는 리스트 위젯의 영역을 Expanded 위젯으로 감싸서 확장시키는 방법입니다. 주로 상단부에 검색란을 고정시키거나, 하단부에 완료 버튼을 고정시키고, 본문만 리스트 영역으로 처리할 때 사용할 수 있습니다.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('ListView In Column Widget'),
    ),
    body: Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: 10,
            itemBuilder: (BuildContext context, int index) {
              return Text('Row $index');
            },
          ),
        ),
      ],
    ),
  );
}

 

3. ListView shrinkWrap 옵션 사용하기

마지막은 리스트 위젯에 shrinkWrap 옵션 값을 true로 설정하는 방법입니다. 저는 주로 리스트 안에 리스트를 구현하거나 스크롤이 없는 리스트를 만들 때 이 방법을 사용합니다.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('ListView In Column Widget'),
    ),
    body: Column(
      children: [
        child: ListView.builder(
          shrinkWrap: true, // 리스트 자식 높이 크기의 합 만큼으로 영역 고정
          physics: const NeverScrollableScrollPhysics(), // 스크롤 안되도록 설정하는 옵션 값
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return Text('Row $index');
          },
        ),
      ],
    ),
  );
}

 

이번 글에서는 칼럼이나 리스트 안에서 리스트를 사용하는 방법에 대해 알아봤는데요. 혹시 추가로 궁금하거나 헷갈리는 게 있으시면 댓글로 남겨주시면 감사하겠습니다. 

 

그럼 리스트를 자유롭게 활용하셔서 멋진 플러터 앱을 만드시길 응원하겠습니다 😊

읽어주셔서 감사합니다!