Flutter의 그리드뷰(GridView) 사용법

Flutter에서 GridView 위젯은 스크롤 가능한 그리드 레이아웃을 만드는 데 사용됩니다. 그리드뷰는 특히 이미지 갤러리, 상품 목록, 카드 레이아웃 등 다양한 애플리케이션에서 유용하게 활용될 수 있습니다. 이번 글에서는 Flutter의 GridView 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 GridView 사용법

GridView는 간단한 형태의 그리드를 쉽게 만들 수 있습니다. GridView.count 생성자를 사용하여 고정된 열 개수를 가진 그리드를 만들 수 있습니다.

 

GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
    Container(color: Colors.red, child: Center(child: Text('Item 1'))),
    Container(color: Colors.blue, child: Center(child: Text('Item 2'))),
    Container(color: Colors.green, child: Center(child: Text('Item 3'))),
    Container(color: Colors.yellow, child: Center(child: Text('Item 4'))),
  ],
)

 

위 코드는 2개의 열을 가진 그리드를 생성하고, 각 셀에 다른 배경색과 텍스트를 표시합니다.

2. GridView.builder 사용법

많은 양의 데이터를 동적으로 표시할 때는 GridView.builder를 사용하는 것이 효율적입니다. 이 생성자는 항목을 동적으로 생성하여 성능을 최적화합니다.

 

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemCount: 20,
  itemBuilder: (context, index) {
    return Container(
      margin: EdgeInsets.all(8.0),
      color: Colors.teal[100 * (index % 9)],
      child: Center(
        child: Text('Item $index'),
      ),
    );
  },
)

 

위 코드는 3개의 열을 가진 그리드를 생성하고, 20개의 항목을 동적으로 생성하여 표시합니다.

3. GridView.extent 사용법

GridView.extent 생성자는 각 셀의 최대 크기를 지정하여 그리드를 생성할 수 있습니다. 이는 각 셀의 크기를 조절하여 균등하게 배치하는 데 유용합니다.

 

GridView.extent(
  maxCrossAxisExtent: 150,
  children: <Widget>[
    Container(color: Colors.red, child: Center(child: Text('Item 1'))),
    Container(color: Colors.blue, child: Center(child: Text('Item 2'))),
    Container(color: Colors.green, child: Center(child: Text('Item 3'))),
    Container(color: Colors.yellow, child: Center(child: Text('Item 4'))),
  ],
)

 

위 코드는 각 셀의 최대 크기가 150픽셀인 그리드를 생성합니다.

 

반응형

 

 

4. 커스텀 그리드 레이아웃

SliverGridDelegate를 사용하여 그리드 레이아웃을 세밀하게 조정할 수 있습니다. 예를 들어, SliverGridDelegateWithFixedCrossAxisCount와 SliverGridDelegateWithMaxCrossAxisExtent를 사용하여 그리드의 모양과 느낌을 맞춤 설정할 수 있습니다.

 

GridView.builder(
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 200,
    childAspectRatio: 3 / 2,
    crossAxisSpacing: 20,
    mainAxisSpacing: 20,
  ),
  itemCount: 10,
  itemBuilder: (context, index) {
    return Container(
      padding: EdgeInsets.all(8.0),
      color: Colors.teal[100 * (index % 9)],
      child: Center(
        child: Text('Item $index'),
      ),
    );
  },
)

 

위 코드는 각 셀의 최대 크기가 200픽셀이고, 자식 요소의 가로 세로 비율이 3:2인 그리드를 생성합니다. 또한, 그리드의 가로 및 세로 간격을 각각 20픽셀로 설정합니다.

5. 스크롤 컨트롤 및 물리적 속성

GridView는 스크롤 동작을 제어하기 위한 다양한 옵션을 제공합니다. scrollDirection, reverse, controller, primary, physics 등의 속성을 사용할 수 있습니다.

 

GridView.count(
  crossAxisCount: 2,
  scrollDirection: Axis.horizontal,
  reverse: true,
  children: <Widget>[
    Container(color: Colors.red, child: Center(child: Text('Item 1'))),
    Container(color: Colors.blue, child: Center(child: Text('Item 2'))),
    Container(color: Colors.green, child: Center(child: Text('Item 3'))),
    Container(color: Colors.yellow, child: Center(child: Text('Item 4'))),
  ],
)

 

위 코드는 수평으로 스크롤되며, 스크롤 방향이 반전된 2열 그리드를 생성합니다.

결론

GridView 위젯은 Flutter에서 스크롤 가능한 그리드 레이아웃을 만드는 데 매우 강력하고 유연한 도구입니다. GridView.count, GridView.builder, GridView.extent 등 다양한 생성자를 사용하여 고정된 열 수, 동적 항목 생성, 최대 셀 크기 등의 다양한 형태의 그리드를 구현할 수 있습니다. 또한, SliverGridDelegate를 사용하여 그리드 레이아웃을 세밀하게 조정할 수 있습니다. GridView를 활용하여 풍부하고 다양한 콘텐츠를 효과적으로 표시하는 애플리케이션을 만들어보세요.