Flutter Widget #1 : ListView 이해와 사용방법

Flutter에서 ListView 사용은 매우 간단합니다. 3개의 핵심 ListView 구현 방법을 알아보고 각각의 예제를 확인하면서 ListView를 익혀봅시다. 

 

이번 글에서 알아볼 내용

• ListView란?
• ListView()
• ListView.builder()
• ListView.separated()

 

ListView란?

ListView는 Flutter에서 스크롤을 구현하기 위해 가장 기본적으로 사용하는 위젯입니다. 구현하기도 쉽고 유연한 기능을 제공하고 있습니다. vertical, horizontal 스크롤 방향을 바꿀 수도 있으며, 아래에서도 보시겠지만 ListView.sperated() 를 사용하여 각 아이템 사이에 다른 요소를 집어넣을 수도 있습니다. 아래에서 ListView 구현의 대표적 3가지를 알아봅시다.

 

ListView()

ListView는 기본적으로 children:[] 을 통해 구현할 수 있습니다. Column, Row와 같이 children:[] 을 설정하면 스크롤 가능한 ListView가 생성됩니다. 아래의 코드를 통해 좀 더 자세히 파악해보세요.

 

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.amber[600],
      child: const Center(child: Text('Entry A')),
    ),
    Container(
      height: 50,
      color: Colors.amber[500],
      child: const Center(child: Text('Entry B')),
    ),
    Container(
      height: 50,
      color: Colors.amber[100],
      child: const Center(child: Text('Entry C')),
    ),
  ],
)

 

ListView.builder()

다음은 ListView.builder()를 통해 구현하는 방법입니다. itemCount 와 itemBuilder를 구현하시면 되는데요. itemCount만큼 itemBuilder를 실행시켜 widget을 반환합니다. 이렇게 되면 반환한 widget들이 쌓여 ListView를 생성하게 되는 것 입니다. 아래의 코드를 확인해주세요.

 

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      color: Colors.amber[colorCodes[index]],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  }
);

 

ListView.separated()

ListView.sperated()는 각 요소 사이에 다른 요소를 넣게 해주는 방법인데요. 예를 들어 ListView 각 요소 사이에 Divider를 넣고 싶을때는 이 방법을 사용하면 됩니다. 구현방법은 ListView.builder()에서 seperatedBuilder만 추가적으로 구현해주시면 됩니다. 아래의 코드와 사진을 확인해주세요.

 

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.separated(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      color: Colors.amber[colorCodes[index]],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  },
  separatorBuilder: (BuildContext context, int index) => const Divider(),
);

 

참고자료

• ListView - Flutter Api Document