[flutter] 카드 리스트 쉽게 만들어주는 그리드뷰 (GridView)

그리드뷰 (GridView) 위젯으로 카드 리스트를 쉽게 만드는 방법

우리는 앱을 이용하는 사용자에게 제공하는 콘텐츠나 정보의 양이 많을 때, 리스트 형식의 디자인을 활용할 수 있습니다. 주로 한 줄에 하나의 정보가 담긴 단순한 리스트, 한 줄에 여러 개의 정보가 카드 모양으로 담긴 카드형 리스트를 쉽게 찾아볼 수 있는데요.

 

이번 글에서는 그중에서 카드 형식의 리스트를 플러터에서는 어떻게 구현할 수 있는지 알아보도록 하겠습니다. 아래 사진은 그리드뷰 GridView() 위젯을 이용해서 카드형 리스트를 만든 예시입니다.

 

 

1. GridView.builder 방식

먼저 그리드뷰를 builder 방식으로 구현하는 방법입니다. GridView.builder() 에서 그리드를 만드는 방식은 2가지가 존재하는데요. 한 줄에 나타낼 그리드 개수를 숫자 값으로 고정하는 방식과 디바이스의 너비를 기준으로 그리드를 생성하는 방식입니다.

 

gridDelegate 옵션

- 단순 숫자값 : SliverGridDelegateWithFixedCrossAxisCount

- 디바이스 너비 : SliverGridDelegateWithMaxCrossAxisExtent

 

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount({
  @required int crossAxisCount, // 1개 행에 나타낼 item 개수
  double mainAxisSpacing = 0.0, // horizontal padding (수평)
  double crossAxisSpacing = 0.0, // vertical padding (수직)
  double childAspectRatio = 1.0, // item의 가로 세로 비율
}

gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent({
  @required double maxCrossAxisExtent, // 기준이 될 너비 크기
  double mainAxisSpacing = 0.0, // horizontal padding (수평)
  double crossAxisSpacing = 0.0, // vertical padding (수직)
  double childAspectRatio = 1.0, // item의 가로 세로 비율
}

 

위에서 사용 방법에 대해 알아봤으니 실제 구현 코드를 작성해보겠습니다.

import 'package:flutter/material.dart';

class GridViewPage extends StatefulWidget {
  const GridViewPage({Key? key}) : super(key: key);

  @override
  _GridViewPageState createState() => _GridViewPageState();
}

class _GridViewPageState extends State<GridViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridView.builder Example'),
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, // 1개의 행에 항목을 3개씩
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          childAspectRatio: 1/2,
        ),
        itemCount: 12,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.grey,
            child: ...,
          );
        },
      ),
    );
  }
}

 

2. GridView.count 방식

이번에는 GridView.count() 방식으로 구현해보도록 하겠습니다. 이 방법은 gridDelegate count 옵션을 간편하게 사용하도록 도와줍니다.

import 'package:flutter/material.dart';

class GridViewPage extends StatefulWidget {
  const GridViewPage({Key? key}) : super(key: key);

  @override
  _GridViewPageState createState() => _GridViewPageState();
}

class _GridViewPageState extends State<GridViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridView.count Example'),
      ),
      body: GridView.count(
        crossAxisCount: 3, // 1개 행에 항목 3개씩
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1/2,
        children: List.generate(
          12, // 항목 개수
          (int index) {
            return Container(
              color: Colors.grey,
              child: ...,
            );
          },
        ),
      ),
    );    
  }
}

 

이번 글에서는 그리드뷰 위젯을 이용하는 방법에 대해 알아봤는데요. 다음에는 그리드뷰와 함께 자주 사용되는 GridTile, GridTileBar 위젯 사용법과 제가 주로 구현하는 방식에 대해서도 공유해보도록 하겠습니다.

 

저의 글을 읽어주셔서 감사합니다~😊