GridView 는 Flutter에서 스크롤 가능한 2차원 배열(그리드) 형태의 레이아웃을 제공하는 위젯입니다. 여러 항목을 정렬된 격자 형태로 배치할 때 유용합니다.
주요 종류
1. GridView
2. GridView.count
3. GridView.extent
4. GridView.builder
5. GridView.custom
gridView 시작하기
GridView 는 일반적인 그리드를 표시합니다. 자식 위젯을 직접 리스트로 제공하는 방식입니다.
body: GridView(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // 개수
crossAxisSpacing: 15.0, // 주석 해보기 (가로 행간 길이)
mainAxisSpacing: 12.0 // 주석 해보기(세로 행간 길이)
),
children: [
postContainer(),
postContainer(),
postContainer(),
postContainer()
],
)
Widget postContainer() {
return Container(
height: 200,
color: Colors.amber,
child: Center(child: Text("Box")),
);
}
파라미터로 변경
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("안녕하세요"),
),
body: GridView(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // 개수
crossAxisSpacing: 15.0, // 주석 해보기 (가로 행간 길이)
mainAxisSpacing: 12.0 // 주석 해보기(세로 행간 길이)
),
children: [
postContainer(number: 1, colorData: Colors.green),
postContainer(number: 2, colorData: Colors.amberAccent),
postContainer(number: 3, colorData: Colors.green),
postContainer(number: 4, colorData: Colors.cyan),
postContainer(number: 5, colorData: Colors.green),
postContainer(number: 6, colorData: Colors.amberAccent),
postContainer(number: 7, colorData: Colors.green),
postContainer(number: 8, colorData: Colors.cyan),
postContainer(number: 9, colorData: Colors.green),
postContainer(number: 10, colorData: Colors.amberAccent),
postContainer(number: 11, colorData: Colors.green),
postContainer(number: 12, colorData: Colors.cyan),
],
)
);
}
Widget postContainer({int number = 0, Color colorData = Colors.amber}) {
return Container(
height: 200,
color: colorData,
child: Center(child: Text("Box $number")),
);
}GridView Builder 사용하기
itemCount 와 itemBuilder 로 아래와 같이 구성 가능합니다.
final postList = [
{
"number": 1,
"colorData": Colors.green
},
{
"number": 2,
"colorData": Colors.blue
},
{
"number": 3,
"colorData": Colors.amberAccent
},
{
"number": 4,
"colorData": Colors.cyan
},
{
"number": 5,
"colorData": Colors.cyan
},
{
"number": 6,
"colorData": Colors.amberAccent
},
{
"number": 7,
"colorData": Colors.green
}
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("안녕하세요"),
),
body: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 15.0,
mainAxisSpacing: 12.0
),
itemCount: postList.length,
itemBuilder: (BuildContext con, int index) {
return postContainer(
number: postList[index]["number"] as int,
colorData: postList[index]["colorData"] as Color
);
}),
);
}
Widget postContainer({int number = 0, Color colorData = Colors.amber}) {
return Container(
height: 200,
color: colorData,
child: Center(child: Text("Box $number")),
);
}
다른 예시
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GridView Example'),
),
body: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // 열의 수
),
children: <Widget>[
Container(color: Colors.red, child: Center(child: Text('1'))),
Container(color: Colors.green, child: Center(child: Text('2'))),
Container(color: Colors.blue, child: Center(child: Text('3'))),
Container(color: Colors.yellow, child: Center(child: Text('4'))),
],
),
),
);
}
}GridView.count
GridView.count 는 그리드 레이아웃을 구성할 때 각 행에 고정된 개수의 항목을 배치할 수 있는 간편한 방법을 제공합니다.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GridView.count Example'),
),
body: GridView.count(
crossAxisCount: 2, // 열의 수
children: <Widget>[
Container(color: Colors.red, child: Center(child: Text('1'))),
Container(color: Colors.green, child: Center(child: Text('2'))),
Container(color: Colors.blue, child: Center(child: Text('3'))),
Container(color: Colors.yellow, child: Center(child: Text('4'))),
],
),
),
);
}
}GridView.extent
GridView.extent 는 항목의 최대 크기를 지정하여 그리드 레이아웃을 구성합니다. 각 항목의 크기를 자동으로 조정하여 그리드를 구성합니다.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GridView.extent Example'),
),
body: GridView.extent(
maxCrossAxisExtent: 150, // 항목의 최대 크기
children: <Widget>[
Container(color: Colors.red, child: Center(child: Text('1'))),
Container(color: Colors.green, child: Center(child: Text('2'))),
Container(color: Colors.blue, child: Center(child: Text('3'))),
Container(color: Colors.yellow, child: Center(child: Text('4'))),
],
),
),
);
}
}GridView.builder
GridView.builder 는 대량의 데이터 항목을 효율적으로 표시할 때 사용됩니다. 항목이 스크롤될 때마다 빌드됩니다.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GridView.builder Example'),
),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // 열의 수
),
itemCount: 20,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(4.0),
color: Colors.blue,
child: Center(child: Text('Item $index')),
);
},
),
),
);
}
}GridView.custom
GridView.custom 은 사용자 정의 레이아웃을 만들 때 사용됩니다. SliverChildDelegate 를 통해 자식 위젯의 레이아웃을 정의할 수 있습니다.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GridView.custom Example'),
),
body: GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // 열의 수
),
childrenDelegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
margin: EdgeInsets.all(4.0),
color: Colors.green,
child: Center(child: Text('Item $index')),
);
},
childCount: 20,
),
),
),
);
}
}
주요 속성
• gridDelegate : 그리드 레이아웃을 정의합니다.
• : 고정된 열의 수를 정의합니다.
• : 항목의 최대 크기를 정의합니다.
• children : 그리드 항목으로 사용할 위젯 목록입니다 (, GridView.count, GridView.extent).
• itemBuilder : 각 항목을 빌드하는 함수입니다 (, GridView.custom).
• itemCount : 항목의 개수를 정의합니다 (, GridView.custom).
GridView 문서
• GridView 클래스 문서
• GridView.count 클래스 문서
• GridView.extent 클래스 문서
• GridView.builder 클래스 문서
• GridView.custom 클래스 문서
