플러터에서 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보다 성능이 우수할 수 있으며, 다양한 옵션과 속성을 통해 유연하게 사용할 수 있습니다.
이 블로그에서 다룬 내용을 잘 이해하고, 실제 개발에 적용해 본다면 플러터에서 더욱 효과적이고 유용한 그리드 형태의 목록을 만들 수 있을 것입니다.
'Flutter > Widget' 카테고리의 다른 글
플러터에서 Scaffold 생명주기: 핵심 단계 이해하기 (0) | 2024.07.25 |
---|---|
플러터에서 CustomScrollView 사용법과 옵션 가이드 (0) | 2024.07.25 |
플러터에서 SliverList 사용법과 옵션 가이드 (0) | 2024.07.25 |
플러터에서 ListView.separated 사용법과 옵션 가이드 (0) | 2024.07.25 |
플러터에서 ListView.builder 사용법과 옵션 가이드 (0) | 2024.07.25 |