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

플러터에서 GridView는 그리드 형태로 데이터를 표시하는 데 사용되는 위젯입니다.

ListView와 달리 GridView는 여러 개의 열로 데이터를 배치하여 이미지 갤러리, 쇼핑몰 제품 목록 등과 같은 시각적으로 매력적인 디자인을 만들 수 있도록 합니다.

또한, GridView는 성능 측면에서도 ListView보다 우수할 수 있습니다.

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

1. GridView 기본 사용법

GridView를 사용하려면 다음과 같은 형식으로 위젯을 생성해야 합니다.

GridView(
  itemCount: 데이터 개수,
  itemBuilder: (context, index) {
    // 각 아이템을 만들어 반환하는 함수
    return 위젯;
  },
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 가로 방향 아이템 개수,
    mainAxisExtent: 각 아이템의 높이,
  ),
)

 

• itemCount: GridView에 표시할 데이터 개수를 설정합니다.
• itemBuilder: 각 아이템을 어떻게 만들지 정의하는 함수입니다. 이미 위에서 설명했습니다.
• gridDelegate: GridView의 레이아웃을 정의하는 객체입니다. 일반적으로 SliverGridDelegateWithFixedCrossAxisCount를 사용합니다.
  • crossAxisCount: 가로 방향으로 배치할 아이템 개수를 설정합니다.
  • mainAxisExtent: 각 아이템의 높이를 설정합니다.

예를 들어, 다음 코드는 3개의 열로 구성된 GridView를 만들고, 각 아이템에 'Item 0', 'Item 1', ..., 'Item 8' 텍스트를 표시합니다.

GridView(
  itemCount: 9,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
)

 

2. GridView 옵션

GridView에는 다양한 옵션들이 제공됩니다. 대표적인 옵션들과 간단한 설명은 다음과 같습니다.

• scrollDirection: GridView의 스크롤 방향을 설정합니다. 기본값은 Axis.vertical이며, Axis.horizontal 로 설정하면 가로 방향으로 스크롤되는 GridView를 만들 수 있습니다.
• physics: GridView의 스크롤 방식을 설정합니다. 기본값은 AlwaysScrollableScrollPhysics이며, BouncingScrollPhysics 를 설정하면 GridView 끝에서 반동 효과를 적용할 수 있습니다.
• shrinkWrap: GridView의 높이를 콘텐츠에 맞춰 조절할지 여부를 설정합니다. 기본값은 false이며, true 로 설정하면 GridView가 스크롤바 없이 콘텐츠 높이만큼만 표시됩니다.
• primary: 기본 스크롤 위젯으로 설정할지 여부를 설정합니다. 기본값은 true이며, false 로 설정하면 다른 스크롤 위젯과 함께 사용할 수 있습니다.
• reverse: 아이템 목록의 순서를 반전할지 여부를 설정합니다. 기본값은 false이며, true 로 설정하면 마지막 아이템부터 첫 번째 아이템까지 순서대로 표시됩니다.
• padding: GridView의 패딩을 설정합니다.
• addAutomaticKeepAlive: 스크롤 범위 밖에 있는 아이템도 메모리에 유지할지 여부를 설정합니다. 기본값은 false이며, true 로 설정하면 스크롤 범위 밖에 있는 아이템도 다시 표시될 때까지 메모리에 유지됩니다.
• cacheExtent: 스크롤 범위 밖에 있는 아이템을 얼마나 미리 로드할지 설정합니다. 이 값을 높일수록 스크롤 성능이 향상될 수 있지만, 메모리 사용량도 증가합니다.

3. 실제 개발 예제

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

 

1. 기본 데이터 목록 만들기

GridView(
  itemCount: 데이터리스트.length,
  itemBuilder: (context, index) {
    final item = 데이터리스트[index];
    return Text(item);
  },
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
)

 

설명

• 위 코드는 데이터리스트라는 리스트에 저장된 데이터를 기반으로 GridView를 만듭니다.
• itemCount 속성에는 데이터 리스트의 길이를 설정합니다.
• itemBuilder 함수는 각 아이템을 어떻게 만들지 정의하는 함수입니다.
  • context 매개변수는 현재 빌드되는 위젯의 컨텍스트를 제공합니다.
  • index 매개변수는 현재 빌드되는 아이템의 인덱스를 제공합니다.
  • 데이터리스트[index] 를 사용하여 현재 인덱스에 해당하는 데이터를 가져옵니다.
  • Text(item) 위젯을 사용하여 각 아이템을 텍스트로 표시합니다.
• gridDelegate 속성은 GridView의 레이아웃을 정의하는 객체입니다.
  • SliverGridDelegateWithFixedCrossAxisCount 를 사용하여 가로 방향으로 2개의 열로 아이템을 배치하고, 각 아이템의 높이는 기본값으로 설정합니다.

주의 사항

• itemBuilder 함수는 반드시 각 아이템을 위한 위젯을 반환해야 합니다.
• gridDelegate 속성은 GridView의 레이아웃을 정확하게 정의해야 합니다. 아이템의 크기나 개수가 다르면 레이아웃이崩坏될 수 있습니다.

2. 이미지 표시하기

GridView(
  itemCount: 데이터리스트.length,
  itemBuilder: (context, index) {
    final image = 데이터리스트[index];
    return Image.network(image);
  },
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
)

 

설명

• 위 코드는 데이터리스트라는 리스트에 저장된 이미지 URL들을 기반으로 GridView를 만들고, 각 아이템에 이미지를 표시합니다.
• itemBuilder 함수에서 Image.network 위젯을 사용하여 이미지를 표시합니다.
• gridDelegate 속성을 사용하여 가로 방향으로 3개의 열로 아이템을 배치합니다.

3. 다양한 위젯 사용하기

 

itemBuilder 함수에서는 Text, Image 외에도 다양한 위젯을 사용하여 아이템을 만들 수 있습니다. 예를 들어, 다음과 같이 ListTile 위젯을 사용하여 카드 형태의 아이템을 만들 수 있습니다.

GridView(
  itemCount: 데이터리스트.length,
  itemBuilder: (context, index) {
    final item = 데이터리스트[index];
    return ListTile(
      leading: Icon(Icons.person),
      title: Text(item.name),
      subtitle: Text(item.email),
    );
  },
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
)

 

4. 'SliverGridDelegate' 종류

 

GridView는 다양한 레이아웃을 만들 수 있도록 여러 종류의 SliverGridDelegate를 제공합니다. 대표적인 종류와 간단한 설명은 다음과 같습니다.

• SliverGridDelegateWithFixedCrossAxisCount: 가로 방향으로 일정한 개수의 열로 아이템을 배치하고, 각 아이템의 높이는 기본값으로 설정합니다.
• SliverGridDelegateWithMaxCrossAxisCount: 가로 방향으로 최대 개수의 열로 아이템을 배치하고, 각 아이템의 크기를 동적으로 조정합니다.
• SliverGridDelegateWithFixedColumnCount: 세로 방향으로 일정한 개수의 행으로 아이템을 배치하고, 각 아이템의 너비는 기본값으로 설정합니다.
• SliverGridDelegateWithMaxColumnCount: 세로 방향으로 최대 개수의 행으로 아이템을 배치하고, 각 아이템의 크기를 동적으로 조정합니다.
• SliverGridDelegateWithExtendableCrossAxisCount: 가로 방향으로 가능한 한 많은 열로 아이템을 배치하고, 각 아이템의 크기를 동적으로 조정합니다.
• SliverGridDelegateWithExtendableMaxCrossAxisCount: 가로 방향으로 최대 개수의 열까지 아이템을 배치하고, 각 아이템의 크기를 동적으로 조정합니다.
• SliverGridDelegateWithCustomFixedCrossAxisCount: 가로 방향으로 일정한 개수의 열로 아이템을 배치하고, 각 열의 너비를 직접 설정합니다.

5. 더 알아보기

 

플러터 GridView는 다양한 옵션과 속성을 제공하며, 상황에 맞게 활용하면 더욱 유연하고 효율적인 그리드 형태의 목록을 만들 수 있습니다.

• 'CustomScrollView' 와 함께 사용하기: 더욱 복잡하고 유연한 스크롤 동작을 구현할 때 사용합니다. GridView, SliverAppBar 등을 함께 사용하거나, 직접 커스텀 위젯을 만들 수도 있습니다.
• 기타 옵션: cacheExtent, padding, controller 등 다양한 옵션을 사용하여 GridView를 더욱 효율적으로 사용할 수 있습니다.

플러터 공식 문서에서 GridView에 대한 자세한 정보를 확인할 수 있습니다: https://api.flutter.dev/flutter/widgets/GridView/GridView.html

6. 마무리

플러터 GridView는 이미지 갤러리, 쇼핑몰 제품 목록 등과 같은 시각적으로 매력적인 디자인을 만드는 데 강력한 도구입니다.

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