Flutter로 GridView를 활용한 그리드 리스트 구현하기: 가로와 세로 레이아웃의 효율적 구성

Flutter에서는 대량의 데이터를 사용자 친화적으로 배열할 수 있는 강력한 도구로 GridView를 제공합니다. 그리드 방식의 레이아웃은 특히 상품 목록, 갤러리, 카드형 UI 등에서 유용합니다. 이번 글에서는 Flutter의 GridView를 활용하여 쉽고 효과적으로 그리드 리스트를 구현하는 방법을 알아보겠습니다.

참고. Create a grid list

GridView란?

GridView는 Flutter에서 데이터나 콘텐츠를 가로와 세로로 배열하는 레이아웃을 쉽게 구성할 수 있는 위젯입니다. 리스트 형태보다 시각적으로 정보를 더 효과적으로 표현할 수 있으며, 다음과 같은 경우 유용합니다.

• 상품 카탈로그: 전자상거래 앱에서 상품 이미지와 이름을 그리드 형태로 나열.
• 사진 갤러리: 사진을 가로세로 배열하여 보여줌.
• 대시보드 UI: 사용자 정의 기능들을 아이콘 형식으로 배열.

GridView.count()를 활용한 기본 그리드 생성

가장 간단하게 그리드 레이아웃을 구현하려면 GridView.count() 생성자를 사용할 수 있습니다. 이 생성자는 열 수(crossAxisCount)를 지정해 고정된 열 레이아웃을 구성합니다.

코드 예제: 2열 그리드 생성

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter GridView',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GridView Example'),
        ),
        body: GridView.count(
          crossAxisCount: 2, // 열의 수 지정
          children: List.generate(100, (index) {
            return Center(
              child: Text(
                'Item $index',
                style: Theme.of(context).textTheme.headlineSmall,
              ),
            );
          }),
        ),
      ),
    );
  }
}

주요 구성 요소:

1. crossAxisCount: 한 줄에 표시할 열의 수를 설정합니다.
2. List.generate(): 각 그리드 아이템을 생성하는 반복문 역할을 합니다.
3. children: 그리드에 들어갈 위젯 리스트를 정의합니다.

GridView.builder()를 활용한 동적 그리드

대규모 데이터나 비동기 데이터를 처리할 때는 GridView.builder()를 사용하는 것이 효율적입니다. 이 메서드는 필요할 때마다 아이템을 생성하여 성능을 최적화합니다.

코드 예제: 동적 데이터로 그리드 생성

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // 3열로 구성
    mainAxisSpacing: 10.0, // 아이템 간 수직 간격
    crossAxisSpacing: 10.0, // 아이템 간 수평 간격
  ),
  itemCount: 50, // 아이템 총 개수
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: Colors.blue[100 * (index % 9)],
      child: Center(
        child: Text('Item $index'),
      ),
    );
  },
);

주요 구성 요소:

1. gridDelegate: 그리드의 열 수와 간격을 설정합니다.
   • SliverGridDelegateWithFixedCrossAxisCount: 고정된 열 수로 그리드를 정의.
   • SliverGridDelegateWithMaxCrossAxisExtent: 각 아이템의 최대 너비를 기준으로 그리드 구성.
2. itemBuilder: 동적으로 아이템을 생성하는 콜백 함수.
3. itemCount: 그리드에 표시할 총 아이템 개수.

GridView를 활용할 때 유용한 팁

1. 아이템 간격 조정:
   • mainAxisSpacing과 crossAxisSpacing을 사용하여 수직 및 수평 간격을 조정할 수 있습니다.
2. 반응형 레이아웃:
   • 화면 크기에 따라 열 수를 유동적으로 조정하려면 SliverGridDelegateWithMaxCrossAxisExtent를 활용하세요.

SliverGridDelegateWithMaxCrossAxisExtent(
  maxCrossAxisExtent: 200.0, // 각 아이템의 최대 너비
  mainAxisSpacing: 10.0,
  crossAxisSpacing: 10.0,
)

3. 스크롤 방향 변경:
   • 기본적으로 수직 스크롤을 지원하며, scrollDirection을 Axis.horizontal로 설정하면 가로 스크롤로 변경할 수 있습니다.
4. Lazy Loading:
   • 대규모 데이터 처리를 위해 GridView.builder와 페이징 기술을 결합하면 효율성을 높일 수 있습니다.

---

결론: Flutter의 GridView로 효율적인 레이아웃 구현

Flutter의 GridView는 간단한 코드로 강력한 그리드 레이아웃을 구현할 수 있는 도구입니다. 특히 GridView.count()로 간단히 시작하거나, GridView.builder()로 확장성을 고려한 레이아웃을 설계할 수 있습니다. 다양한 옵션과 설정을 활용해 반응형 UI와 데이터 중심 앱을 만들어보세요!

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const title = 'Grid List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: GridView.count(
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this produces 2 rows.
          crossAxisCount: 2,
          // Generate 100 widgets that display their index in the List.
          children: List.generate(100, (index) {
            return Center(
              child: Text(
                'Item $index',
                style: Theme.of(context).textTheme.headlineSmall,
              ),
            );
          }),
        ),
      ),
    );
  }
}