플러터 그리드 위젯 완벽 가이드: GridView로 반응형 UI 만들기

플러터 그리드 위젯 완벽 가이드

플러터(Flutter)는 하나의 코드베이스로 iOS, Android, Web까지 동시에 빌드할 수 있는 크로스 플랫폼 프레임워크입니다.
그중에서도 **플러터 그리드 위젯(GridView)**은 격자형 형태의 레이아웃을 간단하게 구성할 수 있는 핵심 도구죠.
리스트뷰(ListView)가 세로 방향의 단일 리스트라면, 그리드 위젯은 가로와 세로로 아이템을 동시에 배치할 수 있는 강력한 위젯입니다.

예를 들어 쇼핑몰 앱의 상품 목록, 포토 갤러리, 카드형 뉴스 피드 등을 만들 때 바로 이 GridView가 사용됩니다.

플러터 그리드 위젯의 핵심 개념

플러터의 GridView는 여러 형태로 제공됩니다.
기본적으로 다음 네 가지 방식으로 사용할 수 있습니다.

GridView.count – 고정된 열 개수를 설정
GridView.extent – 각 항목의 최대 크기로 자동 배치
GridView.builder – 대량의 데이터를 효율적으로 렌더링
GridView.custom – 완전한 커스터마이징이 필요한 경우

이 중 가장 많이 사용되는 건 count와 builder입니다.

GridView.count – 고정 열 갯수 지정하기

가장 간단한 형태의 플러터 그리드 위젯은 GridView.count입니다.
다음 예시는 한 줄에 2개의 아이템이 표시되도록 설정합니다.

GridView.count(
  crossAxisCount: 2,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  padding: EdgeInsets.all(8),
  children: List.generate(6, (index) {
    return Container(
      color: Colors.blueAccent,
      child: Center(
        child: Text(
          '아이템 $index',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }),
);

💡 Tip: crossAxisSpacing과 mainAxisSpacing은 아이템 간의 간격을 설정합니다.
crossAxisCount 값이 2이면 2열 구조의 그리드가 만들어집니다.

GridView.builder – 많은 데이터 효율적으로 처리하기

데이터 수가 많거나 API를 통해 비동기적으로 데이터를 가져올 때는 GridView.builder가 가장 적합합니다.
이 위젯은 스크롤할 때 필요한 부분만 렌더링하므로 성능이 매우 뛰어납니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
  ),
  itemCount: 30,
  itemBuilder: (context, index) {
    return Card(
      color: Colors.teal,
      child: Center(
        child: Text(
          'Item $index',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  },
);

🔥 성능 팁:
builder 방식은 스크롤 중 보이지 않는 위젯은 제거하고 다시 생성하기 때문에 메모리 사용량이 매우 효율적입니다.

GridView.extent – 아이템 크기로 자동 맞추기

GridView.extent는 항목의 최대 너비를 기준으로 자동으로 열 개수를 결정합니다.
이 방식은 다양한 화면 크기에서 반응형 디자인을 구현할 때 매우 유용합니다.

GridView.extent(
  maxCrossAxisExtent: 150,
  children: List.generate(12, (index) {
    return Container(
      color: Colors.orangeAccent,
      child: Center(child: Text('Box $index')),
    );
  }),
);

📱 장점: 기기의 화면 폭에 따라 자동으로 아이템 개수가 조정되어 반응형 레이아웃에 이상적입니다.

SliverGrid – 고급 커스터마이징용

플러터의 CustomScrollView 안에서 그리드를 사용할 때는 SliverGrid를 활용할 수 있습니다.
이 위젯은 복잡한 스크롤 동작(예: 상단 헤더 고정, 섹션 구분)을 만들 때 매우 유용합니다.

CustomScrollView(
  slivers: [
    SliverAppBar(
      floating: true,
      title: Text('SliverGrid Example'),
    ),
    SliverGrid(
      delegate: SliverChildBuilderDelegate(
        (context, index) => Container(
          color: Colors.blueGrey,
          child: Center(child: Text('Item $index')),
        ),
        childCount: 20,
      ),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
    ),
  ],
);

반응형 UI를 위한 팁

플러터 그리드 위젯을 사용할 때는 단순히 아이템을 나열하는 것보다 화면 크기 변화에 대응하는 레이아웃 설계가 중요합니다.

화면 크기에 맞춘 열 개수 조절

int getCrossAxisCount(BuildContext context) {
  double width = MediaQuery.of(context).size.width;
  if (width > 1200) return 5;
  if (width > 800) return 3;
  return 2;
}

이처럼 기기 폭에 따라 열 개수를 조정하면, 웹/태블릿/모바일 환경에서도 깔끔한 레이아웃을 유지할 수 있습니다.

이미지 갤러리 예시

다음은 실제 프로젝트에서 자주 사용되는 그리드 이미지 갤러리 예제입니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 4,
    mainAxisSpacing: 4,
  ),
  itemCount: imageList.length,
  itemBuilder: (context, index) {
    return Image.network(
      imageList[index],
      fit: BoxFit.cover,
    );
  },
);

🖼️ 이미지 alt 예시 (SEO용)
<img src="grid-example.jpg" alt="플러터 그리드 위젯 예제 화면">

성능 최적화 팁

const 생성자를 가능한 한 사용하세요.
GridView.builder를 기본으로 활용하고, 불필요한 rebuild를 줄이세요.
ListView와 함께 사용할 때는 shrinkWrap: true를 고려하세요.
아이템에 고정된 높이를 주면 렌더링 속도가 향상됩니다.

정리: 플러터 그리드 위젯의 장점

항목	설명
가독성	직관적 코드로 복잡한 레이아웃 구현 가능
성능	Lazy loading으로 메모리 효율적
반응형	화면 크기에 따라 자동 조정
확장성	SliverGrid 등으로 다양한 커스터마이징 가능

결론: Flutter GridView로 완성하는 반응형 앱 디자인

플러터 그리드 위젯은 UI 효율성과 디자인 완성도를 동시에 높일 수 있는 위젯입니다.
GridView.count로 간단한 격자를 만들고, GridView.builder로 대용량 데이터를 처리하며,
필요할 경우 SliverGrid를 이용해 복잡한 화면 구성까지 가능합니다.

이제 여러분의 Flutter 프로젝트에서도 그리드 기반 반응형 UI를 적용해 보세요.
한층 완성도 높은 앱 디자인이 가능합니다!

eorbaos1985