Flutter 튜토리얼 8편: 리스트와 그리드 구현

Why#

NOTE

소수의 항목만 표시할 때는 단순한 ListView로 충분합니다.
ListTile 위젯을 함께 사용하면 일관된 목록 항목을 쉽게 만들 수 있습니다.

What#

NOTE

ListView는 스크롤 가능한 목록을 표시하는 위젯입니다.
children 속성에 위젯 목록을 전달하면 세로로 스크롤되는 리스트가 됩니다.

How#

TIP

기본 ListView

1
ListView(
2
  children: [
3
    ListTile(
4
      leading: Icon(Icons.map),
5
      title: Text('지도'),
6
    ),
7
    ListTile(
8
      leading: Icon(Icons.photo_album),
9
      title: Text('앨범'),
10
    ),
11
    ListTile(
12
      leading: Icon(Icons.phone),
13
      title: Text('전화'),
14
    ),
15
  ],
16
)

ListTile의 주요 속성

속성	설명
leading	왼쪽 아이콘/이미지
title	주요 텍스트
subtitle	보조 텍스트
trailing	오른쪽 위젯
onTap	탭 콜백

1
ListTile(
2
  leading: CircleAvatar(
3
    backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
4
  ),
5
  title: Text('홍길동'),
6
  subtitle: Text('안녕하세요!'),
7
  trailing: Icon(Icons.chevron_right),
8
  onTap: () {
9
    print('항목 클릭');
10
  },
11
)

구분선 추가

1
ListView(
2
  children: [
3
    ListTile(title: Text('항목 1')),
4
    Divider(),  // 구분선
5
    ListTile(title: Text('항목 2')),
6
    Divider(),
7
    ListTile(title: Text('항목 3')),
8
  ],
9
)

Watch out#

WARNING

기본 ListView는 모든 자식을 한 번에 생성합니다.
항목이 많으면 메모리 문제가 발생하므로 ListView.builder를 사용하세요.

1
// 비효율적: 1000개 항목을 모두 생성
2
ListView(
3
  children: List.generate(1000, (i) => ListTile(title: Text('항목 $i'))),
4
)
5

6
// 효율적: 화면에 보이는 것만 생성
7
ListView.builder(
8
  itemCount: 1000,
9
  itemBuilder: (context, index) => ListTile(title: Text('항목 $index')),
10
)

결론: 소수의 항목은 기본 ListView로, 많은 항목은 ListView.builder로 처리합니다.

Why#

NOTE

수천 개의 항목을 표시할 때 모든 위젯을 미리 생성하면 메모리가 낭비됩니다.
화면에 보이는 항목만 생성하는 “지연 로딩” 방식이 효율적입니다.

What#

NOTE

ListView.builder는 itemBuilder 콜백을 사용해 필요한 항목만 생성합니다.
스크롤할 때 화면 밖으로 나간 항목은 메모리에서 해제됩니다.

How#

TIP

기본 사용법

1
final items = List<String>.generate(10000, (i) => '항목 $i');
2

3
ListView.builder(
4
  itemCount: items.length,
5
  itemBuilder: (context, index) {
6
    return ListTile(
7
      title: Text(items[index]),
8
    );
9
  },
10
)

성능 최적화: 항목 크기 지정

항목 크기를 미리 알려주면 스크롤 성능이 향상됩니다.

속성	사용 시기
prototypeItem	모든 항목이 같은 크기일 때
itemExtent	고정 픽셀 크기를 알 때
itemExtentBuilder	항목마다 크기가 다를 때

1
// prototypeItem: 샘플 항목으로 크기 추론
2
ListView.builder(
3
  itemCount: items.length,
4
  prototypeItem: ListTile(title: Text(items.first)),
5
  itemBuilder: (context, index) {
6
    return ListTile(title: Text(items[index]));
7
  },
8
)
9

10
// itemExtent: 고정 높이 지정
11
ListView.builder(
12
  itemCount: items.length,
13
  itemExtent: 56.0,  // 각 항목 높이
14
  itemBuilder: (context, index) {
15
    return ListTile(title: Text(items[index]));
16
  },
17
)

작동 방식

graph LR A[스크롤] --> B{화면에 보임?} B -->|예| C[itemBuilder 호출] B -->|아니오| D[위젯 생성 안 함] C --> E[위젯 렌더링] F[화면 밖으로 나감] --> G[위젯 폐기]

Watch out#

WARNING

itemCount를 지정하지 않으면 무한 리스트가 됩니다.
데이터 소스의 길이를 반드시 전달하세요.

1
// 위험: 무한 리스트
2
ListView.builder(
3
  itemBuilder: (context, index) {
4
    return ListTile(title: Text('항목 $index'));
5
  },
6
)
7

8
// 안전: itemCount 지정
9
ListView.builder(
10
  itemCount: items.length,
11
  itemBuilder: (context, index) {
12
    return ListTile(title: Text(items[index]));
13
  },
14
)

결론: 긴 리스트는 ListView.builder와 itemExtent로 효율적으로 처리합니다.

Why#

NOTE

이미지 갤러리, 카테고리 선택 등에서 가로 스크롤이 필요합니다.
scrollDirection을 변경하면 간단히 구현할 수 있습니다.

What#

NOTE

ListView의 scrollDirection 속성을 Axis.horizontal로 설정하면 가로 스크롤이 됩니다.

How#

TIP

기본 가로 리스트

1
Container(
2
  height: 200,  // 높이 제한 필수!
3
  child: ListView(
4
    scrollDirection: Axis.horizontal,
5
    children: [
6
      Container(width: 160, color: Colors.red),
7
      Container(width: 160, color: Colors.green),
8
      Container(width: 160, color: Colors.blue),
9
      Container(width: 160, color: Colors.yellow),
10
    ],
11
  ),
12
)

builder와 함께 사용

1
Container(
2
  height: 150,
3
  child: ListView.builder(
4
    scrollDirection: Axis.horizontal,
5
    itemCount: 20,
6
    itemBuilder: (context, index) {
7
      return Container(
8
        width: 100,
9
        margin: EdgeInsets.all(8),
10
        decoration: BoxDecoration(
11
          color: Colors.primaries[index % Colors.primaries.length],
12
          borderRadius: BorderRadius.circular(8),
13
        ),
14
        child: Center(
15
          child: Text('$index', style: TextStyle(color: Colors.white)),
16
        ),
17
      );
18
    },
19
  ),
20
)

실용적인 예: 카테고리 선택

1
Container(
2
  height: 100,
3
  child: ListView.builder(
4
    scrollDirection: Axis.horizontal,
5
    itemCount: categories.length,
6
    itemBuilder: (context, index) {
7
      return Padding(
8
        padding: EdgeInsets.all(8),
9
        child: Column(
10
          children: [
11
            CircleAvatar(
12
              radius: 30,
13
              backgroundImage: NetworkImage(categories[index].imageUrl),
14
            ),
15
            SizedBox(height: 8),
16
            Text(categories[index].name),
17
          ],
18
        ),
19
      );
20
    },
21
  ),
22
)

Watch out#

WARNING

가로 ListView는 높이가 무한하면 오류가 발생합니다.
반드시 부모에서 높이를 제한하세요.

1
// 오류: 높이 제한 없음
2
Column(
3
  children: [
4
    ListView(
5
      scrollDirection: Axis.horizontal,  // Unbounded height!
6
      children: [...],
7
    ),
8
  ],
9
)
10

11
// 해결: Container나 SizedBox로 높이 지정
12
Column(
13
  children: [
14
    SizedBox(
15
      height: 200,
16
      child: ListView(
17
        scrollDirection: Axis.horizontal,
18
        children: [...],
19
      ),
20
    ),
21
  ],
22
)

결론: 가로 리스트는 scrollDirection을 변경하고 높이를 제한합니다.

Why#

NOTE

이미지 갤러리, 상품 목록, 앱 아이콘 등은 그리드 형태가 적합합니다.
GridView는 2차원 격자로 항목을 배치합니다.

What#

NOTE

GridView는 항목을 격자 형태로 배치하는 스크롤 가능한 위젯입니다.
GridView.count는 열 개수로, GridView.extent는 타일 크기로 그리드를 정의합니다.

How#

TIP

GridView.count: 열 개수 지정

1
GridView.count(
2
  crossAxisCount: 2,  // 2열
3
  children: List.generate(100, (index) {
4
    return Container(
5
      color: Colors.primaries[index % Colors.primaries.length],
6
      child: Center(
7
        child: Text('$index'),
8
      ),
9
    );
10
  }),
11
)

GridView.extent: 타일 최대 크기 지정

1
GridView.extent(
2
  maxCrossAxisExtent: 150,  // 타일 최대 너비 150
3
  mainAxisSpacing: 4,       // 세로 간격
4
  crossAxisSpacing: 4,      // 가로 간격
5
  padding: EdgeInsets.all(4),
6
  children: List.generate(100, (index) {
7
    return Container(
8
      color: Colors.primaries[index % Colors.primaries.length],
9
    );
10
  }),
11
)

GridView.builder: 많은 항목 처리

1
GridView.builder(
2
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
3
    crossAxisCount: 3,
4
    mainAxisSpacing: 8,
5
    crossAxisSpacing: 8,
6
  ),
7
  itemCount: 1000,
8
  itemBuilder: (context, index) {
9
    return Container(
10
      color: Colors.primaries[index % Colors.primaries.length],
11
      child: Center(child: Text('$index')),
12
    );
13
  },
14
)

GridDelegate 비교

Delegate	용도
SliverGridDelegateWithFixedCrossAxisCount	열 개수 고정
SliverGridDelegateWithMaxCrossAxisExtent	타일 최대 크기 지정

1
// 3열 고정
2
SliverGridDelegateWithFixedCrossAxisCount(
3
  crossAxisCount: 3,
4
  childAspectRatio: 1.0,  // 정사각형
5
)
6

7
// 타일 최대 150px
8
SliverGridDelegateWithMaxCrossAxisExtent(
9
  maxCrossAxisExtent: 150,
10
  childAspectRatio: 1.0,
11
)

Watch out#

WARNING

GridView의 자식은 기본적으로 정사각형(1<1> 비율)입니다.
childAspectRatio로 비율을 조정하세요.

1
GridView.count(
2
  crossAxisCount: 2,
3
  childAspectRatio: 16 / 9,  // 가로로 넓은 타일
4
  children: [...],
5
)

결론: GridView.count로 열 개수를, GridView.builder로 많은 항목을 효율적으로 처리합니다.

Why#

NOTE

실제 앱에서는 헤더, 메시지, 광고 등 다양한 타입의 항목이 섞인 리스트가 필요합니다.
추상 클래스를 사용해 다형성을 구현하면 깔끔하게 처리할 수 있습니다.

What#

NOTE

공통 인터페이스를 정의하고, 각 항목 타입이 이를 구현하는 방식으로 혼합 리스트를 만듭니다.

How#

TIP

1. 공통 인터페이스 정의

1
abstract class ListItem {
2
  Widget buildTitle(BuildContext context);
3
  Widget buildSubtitle(BuildContext context);
4
}

2. 각 타입별 클래스 구현

1
// 헤더 항목
2
class HeadingItem implements ListItem {
3
  final String heading;
4
  HeadingItem(this.heading);
5

6
  @override
7
  Widget buildTitle(BuildContext context) {
8
    return Text(
9
      heading,
10
      style: Theme.of(context).textTheme.headlineSmall,
11
    );
12
  }
13

14
  @override
15
  Widget buildSubtitle(BuildContext context) => SizedBox.shrink();
16
}
17

18
// 메시지 항목
19
class MessageItem implements ListItem {
20
  final String sender;
21
  final String body;
22
  MessageItem(this.sender, this.body);
23

24
  @override
25
  Widget buildTitle(BuildContext context) => Text(sender);
26

27
  @override
28
  Widget buildSubtitle(BuildContext context) => Text(body);
29
}

3. 혼합 데이터 생성

1
final items = List<ListItem>.generate(1000, (i) {
2
  if (i % 6 == 0) {
3
    return HeadingItem('섹션 ${i ~/ 6}');
4
  } else {
5
    return MessageItem('발신자 $i', '메시지 내용 $i');
6
  }
7
});

4. ListView.builder로 렌더링

1
ListView.builder(
2
  itemCount: items.length,
3
  itemBuilder: (context, index) {
4
    final item = items[index];
5
    return ListTile(
6
      title: item.buildTitle(context),
7
      subtitle: item.buildSubtitle(context),
8
    );
9
  },
10
)

더 복잡한 예: 타입별 다른 위젯

1
ListView.builder(
2
  itemCount: items.length,
3
  itemBuilder: (context, index) {
4
    final item = items[index];
5

6
    if (item is HeadingItem) {
7
      return Container(
8
        color: Colors.grey[200],
9
        padding: EdgeInsets.all(16),
10
        child: Text(
11
          item.heading,
12
          style: TextStyle(fontWeight: FontWeight.bold),
13
        ),
14
      );
15
    } else if (item is MessageItem) {
16
      return ListTile(
17
        leading: CircleAvatar(child: Text(item.sender[0])),
18
        title: Text(item.sender),
19
        subtitle: Text(item.body),
20
      );
21
    }
22
    return SizedBox.shrink();
23
  },
24
)

Watch out#

WARNING

타입 체크 시 is 연산자를 사용하세요.
runtimeType 비교는 상속 관계에서 문제가 될 수 있습니다.

1
// 권장
2
if (item is HeadingItem) { ... }
3

4
// 비권장
5
if (item.runtimeType == HeadingItem) { ... }

결론: 추상 클래스와 다형성으로 다양한 타입의 항목을 하나의 리스트에서 처리합니다.