지난 글에서 Column으로 위젯을 세로로 늘어놓는 법을 봤다. 그럼 항목이 화면보다 많아지면? 할 일이 30개인 목록을 Column에 그대로 넣어보자.

Column(
  children: List.generate(30, (i) => ListTile(title: Text('할 일 $i'))),
)

화면 아래쪽에 노랑-검정 줄무늬가 생기고 콘솔에 에러가 찍힌다.

A RenderFlex overflowed by 1160 pixels on the bottom.

Column은 자식을 전부 늘어놓을 뿐이라, 화면을 넘어가도 스크롤이 되지 않는다. 스크롤이 필요하면 스크롤되는 위젯을 써야 한다.

해결 1: 적은 양이면 SingleChildScrollView

SingleChildScrollView(
  child: Column(
    children: List.generate(30, (i) => ListTile(title: Text('할 일 $i'))),
  ),
)

SingleChildScrollView는 자식 하나를 스크롤되게 감싸는 위젯이다. 설정 화면처럼 항목이 적고 길이가 정해진 화면에 알맞다. 다만 자식을 전부 한꺼번에 만들기 때문에 항목이 수백 개가 되면 느려진다.

해결 2: 많은 양이면 ListView

ListView(
  children: List.generate(30, (i) => ListTile(title: Text('할 일 $i'))),
)

ListView는 스크롤이 처음부터 들어 있는 세로 목록이다. 이것도 children에 전부 넣으면 전부 만들어지니, 항목이 많을 때는 아래 방식을 쓴다.

ListView.builder: 화면에 보이는 것만 만든다

final todos = List.generate(1000, (i) => '할 일 $i');

ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(todos[index]));
  },
)

itemBuilder는 **"index번째 항목은 이렇게 그려라"**는 콜백이다. Flutter가 화면에 보이는 항목만 이 콜백으로 만들고, 스크롤해서 지나간 항목은 버린다. 1000개를 넣어도 화면에 보이는 10개 안팎만 실제로 만들어진다. 3번 글에서 배운 "함수를 넘기는" 패턴이고, context와 index를 직접 받는 매개변수 이름까지 적어야 하는 것도 그때 본 규칙이다.

구분선이 필요하면 ListView.separated가 있다.

ListView.separated(
  itemCount: todos.length,
  itemBuilder: (context, index) => ListTile(title: Text(todos[index])),
  separatorBuilder: (context, index) => const Divider(),
)

Column 안에 ListView를 넣으면 에러가 난다

화면 위쪽에 제목을 두고 그 아래에 목록을 넣고 싶어서 Column 안에 ListView를 넣어보자.

Column(
  children: [
    const Text('내 할 일'),
    ListView.builder( // 여기서 에러남
      itemCount: todos.length,
      itemBuilder: (context, index) => ListTile(title: Text(todos[index])),
    ),
  ],
)

Vertical viewport was given unbounded height.

지난 글의 규칙이 그대로 적용된다. "제약은 아래로 내려간다." Column은 자식에게 세로 크기 제한을 주지 않고, ListView는 "세로로 얼마든지 늘어날 수 있다"는 상태에서 내 높이를 정할 수 없다. 스크롤 영역은 자기가 보이는 높이가 정해져 있어야 하는데, 그 기준이 없는 것이다.

해결: Expanded로 남은 높이를 준다

Column(
  children: [
    const Text('내 할 일'),
    Expanded( // 남은 세로 공간을 ListView에 준다
      child: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) => ListTile(title: Text(todos[index])),
      ),
    ),
  ],
)

지난 글에서 배운 Expanded가 여기서 다시 나온다. 제목이 쓰고 남은 높이를 ListView에 주면, ListView는 그 높이 안에서 스크롤된다.

shrinkWrap: true로 "내용만큼만 높이를 잡아라"고 해도 에러는 사라진다.

ListView(
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(), // 바깥 스크롤에 맡길 때
  children: [...],
)

다만 shrinkWrap은 항목을 전부 계산해야 해서 builder의 장점이 사라진다. 항목이 적을 때만 쓰고, 기본은 Expanded로 풀어야 한다.

GridView: 격자로 배치하기

GridView.count(
  crossAxisCount: 2, // 가로로 2칸
  crossAxisSpacing: 8,
  mainAxisSpacing: 8,
  children: List.generate(6, (i) => Container(
    color: Colors.blue[100 * (i + 1)],
    child: Center(child: Text('$i')),
  )),
)

crossAxisCount: 2는 가로로 2칸이라는 뜻이다. 칸이 몇 개일지 정해져 있을 때 쓴다. 항목이 많으면 ListView처럼 builder 방식이 있다.

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
  ),
  itemCount: 100,
  itemBuilder: (context, index) => Container(
    color: Colors.blue[100],
    child: Center(child: Text('$index')),
  ),
)

gridDelegate는 "격자를 어떻게 나눌지"를 정하는 객체다. 칸 수 대신 칸 하나의 최대 너비를 정하고 싶으면 SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150)를 쓴다. 이러면 화면 폭에 따라 칸 수가 알아서 바뀌어서 폰과 태블릿 대응에 좋다.

항목에 상태가 있을 때: key

체크박스처럼 항목이 자기 상태를 가지는 목록에서 중간 항목을 지우면, 상태가 엉뚱한 항목에 붙는 일이 생긴다. 항목마다 key를 달아서 "이 항목이 누구인지"를 알려줘야 한다.

ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    final todo = todos[index];
    return TodoTile(
      key: ValueKey(todo.id), // 위치가 아니라 id로 구분
      todo: todo,
    );
  },
)

Compose LazyColumn의 items(list, key = { it.id })와 같은 문제이고 같은 해법이다. 항목에 상태가 없는 단순한 목록은 신경 쓰지 않아도 된다.

그 밖의 스크롤 위젯

CustomScrollView는 앱바가 같이 접히는 화면처럼 여러 종류의 스크롤 영역을 하나로 묶을 때 쓴다. 안에 SliverList, SliverGrid, SliverAppBar 같은 "슬리버" 위젯을 넣는다. 지금은 "복잡한 스크롤이 필요하면 이런 게 있다" 정도만 알아두고, 필요할 때 따로 다룬다.

Compose, SwiftUI와 비교하면

// Compose
LazyColumn {
    items(todos, key = { it.id }) { todo ->
        Text(todo.title)
    }
}

// SwiftUI
List(todos) { todo in
    Text(todo.title)
}

Compose와 Flutter는 구조가 비슷하다. 둘 다 스크롤 목록이 "높이가 정해진 곳"에 들어가야 해서, Compose에서 Column(Modifier.verticalScroll()) 안에 LazyColumn을 넣으면 에러가 나는 것과 Flutter의 Column 안 ListView 에러는 같은 이유다.

정리

• Column은 화면을 넘어가도 스크롤되지 않으므로, 스크롤이 필요하면 SingleChildScrollView나 ListView를 쓴다
• 항목이 적으면 SingleChildScrollView, 많으면 ListView.builder로 화면에 보이는 항목만 만든다
• Column 안에 ListView를 넣으면 unbounded height 에러가 나고, Expanded로 감싸서 높이를 정해준다
• 격자는 GridView이고, 칸 수는 crossAxisCount, 칸 너비 기준은 maxCrossAxisExtent로 정한다
• 상태가 있는 항목을 추가·삭제할 때는 ValueKey(id)로 항목을 구분한다

다음 글에서는 TextField, Form, GestureDetector로 입력과 터치를 다뤄보겠다.