flutter GridView 사용해보기

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: 그리드 레이아웃을 정의합니다.

• SliverGridDelegateWithFixedCrossAxisCount: 고정된 열의 수를 정의합니다.

• SliverGridDelegateWithMaxCrossAxisExtent: 항목의 최대 크기를 정의합니다.

• children: 그리드 항목으로 사용할 위젯 목록입니다 (GridView, GridView.count, GridView.extent).

• itemBuilder: 각 항목을 빌드하는 함수입니다 (GridView.builder, GridView.custom).

• itemCount: 항목의 개수를 정의합니다 (GridView.builder, GridView.custom).

 

GridView 문서

 

• GridView 클래스 문서

• GridView.count 클래스 문서

• GridView.extent 클래스 문서

• GridView.builder 클래스 문서

• GridView.custom 클래스 문서