플러터에서 ListView 사용법과 옵션 가이드

플러터에서 ListView는 스크롤 가능한 목록을 만드는 데 가장 기본적이고 많이 사용되는 위젯입니다.

간단한 목록부터 복잡한 데이터 그리드까지 다양한 상황에 활용할 수 있으며, 사용법도 비교적 쉽습니다.

이 블로그에서는 플러터 ListView의 기본 사용법부터 다양한 옵션과 속성, 그리고 실제 개발에 활용할 수 있는 실용적인 예제까지 심층적으로 알아봅니다.

1. ListView 기본 사용법

ListView를 사용하려면 먼저 ListView 위젯을 생성하고, children 속성에 목록으로 표시할 위젯들을 리스트 형태로 추가해야 합니다.

ListView(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

 

위 코드는 'Item 1', 'Item 2', 'Item 3'이라는 세 개의 Text 위젯을 ListView에 추가하여 간단한 목록을 만듭니다.

2. ListView 옵션

ListView에는 목록의 모양과 동작을 다양하게 조정할 수 있는 다양한 옵션들이 제공됩니다. 대표적인 옵션들과 간단한 설명은 다음과 같습니다.

• scrollDirection: 목록의 스크롤 방향을 설정합니다. 기본값은 Axis.vertical이며, Axis.horizontal 로 설정하면 가로 방향으로 스크롤되는 목록을 만들 수 있습니다.
• itemCount: 목록에 표시할 항목의 개수를 설정합니다.
• itemBuilder: 각 항목을 어떻게 만들지 정의하는 함수입니다. itemBuilder 함수는 인덱스를 매개변수로 받고, 해당 인덱스에 해당하는 항목을 나타내는 위젯을 반환해야 합니다.
• separatorBuilder: 항목 사이에 구분선을 추가하는 함수입니다. separatorBuilder 함수는 인덱스를 매개변수로 받고, 해당 인덱스에 해당하는 구분선 위젯을 반환해야 합니다.
• physics: 목록의 스크롤 방식을 설정합니다. 기본값은 AlwaysScrollableScrollPhysics이며, BouncingScrollPhysics 를 설정하면 목록 끝에서 반동 효과를 적용할 수 있습니다.

3. 실제 개발 예제

다음은 실제 개발에서 활용할 수 있는 ListView 사용 예제입니다.

 

1. 기본 목록 만들기

ListView(
  children: [
    for (int i = 0; i < 10; i++)
      Text('Item $i'),
  ],
)

 

위 코드는 0부터 9까지의 숫자를 반복하며 'Item 1', 'Item 2', ..., 'Item 9' 까지 10개의 Text 위젯을 목록에 추가합니다.

 

2. 다양한 위젯으로 목록 만들기

ListView(
  children: [
    Text('Item 1'),
    Icon(Icons.favorite),
    Image.network('https://flutter.dev/images/flutter-logo.png'),
  ],
)

 

위 코드는 Text, Icon, Image 위젯 등 다양한 위젯들을 목록에 추가하여 더욱 풍부한 목록을 만들 수 있습니다.

 

3. 'itemBuilder' 함수 사용하기

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return Text('Item ${index + 1}');
  },
)

 

위 코드는 'itemBuilder' 함수를 사용하여 100개의 Text 위젯을 목록에 추가합니다. itemBuilder 함수는 각 인덱스에 해당하는 Text 위젯을 만들어 반환합니다.

 

4. 'separatorBuilder' 함수 사용하기

ListView.separated(
  itemCount: 10,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
)

 

위 코드는 'separatorBuilder' 함수를 사용하여 항목 사이에 구분선을 추가합니다. separatorBuilder 함수는 Divider 위젯을 반환하여 구분선을 만듭니다.

4. 더 알아보기

플러터 ListView는 다양한 옵션과 속성을 제공하며, 상황에 맞게 활용하면 더욱 효과적이고 유연한 목록을 만들 수 있습니다.

• ListView.builder: 동적 목록 생성에 유용합니다. itemCount 와 itemBuilder 함수를 사용하여 데이터 개수와 각 항목을 어떻게 만들지 정의할 수 있습니다.
• ListView.separated: 항목 사이에 구분선을 자동으로 추가합니다. separatorBuilder 함수를 사용하여 구분선의 모양을 커스터마이징할 수도 있습니다.
• SliverList: 큰 목록을 효율적으로 처리하는 데 적합합니다. ListView.builder와 유사하지만, Sliver 기반으로 구현되어 성능이 더 우수합니다.
• GridView: 그리드 형태의 목록을 만들 때 사용합니다. crossAxisCount 와 mainAxisSpacing 등의 옵션을 사용하여 그리드의 모양을 조정할 수 있습니다.
• CustomScrollView: 더욱 복잡하고 유연한 스크롤 동작을 구현할 때 사용합니다. ListView, SliverList, GridView 등을 함께 사용하거나, 직접 커스텀 위젯을 만들 수도 있습니다.

플러터 공식 문서에서 ListView에 대한 자세한 정보를 확인할 수 있습니다

5. 마무리

플러터 ListView는 다양한 기능과 옵션을 제공하는 강력하고 유연한 위젯입니다.

기본적인 목록부터 복잡한 데이터 그리드까지 다양한 상황에 활용할 수 있으며, 사용법 또한 비교적 쉽습니다.

이 블로그에서 다룬 내용을 잘 이해하고, 실제 개발에 적용해 본다면 플러터에서 더욱 효과적이고 유용한 목록을 만들 수 있을 것입니다.

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg