[flutter] 플러터 GridView의 사용 예시와 구현 방법은 어떻게 되는가?

18 Dec 2023

flutter

플러터의 GridView는 그리드 형태로 여러 개의 위젯을 효율적으로 배치할 수 있는 위젯입니다. GridView를 사용하여 다양한 크기의 요소들을 유연하게 배치할 수 있습니다. 이 포스트에서는 GridView의 사용 예시와 구현 방법을 살펴보겠습니다.

GridView 구현 방법

GridView를 구현하려면 GridView 위젯을 사용하여 그리드를 생성하고, GridView.builder 또는 GridView.count를 사용하여 그리드의 아이템을 동적으로 생성합니다. 또한, 각각의 아이템에 대한 정보를 제공하는 데이터 소스가 필요합니다.

다음은 기본적인 GridView의 구현 방법입니다.

import 'package:flutter/material.dart';

class MyGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: List.generate(100, (index) {
        return Center(
          child: Text(
            'Item $index',
            style: Theme.of(context).textTheme.headline5,
          ),
        );
      }),
    );
  }
}

위의 예시에서 GridView.count를 사용하여 2열로 구성된 그리드를 생성하고, 100개의 아이템을 List.generate를 통해 동적으로 생성하고 있습니다.

GridView.builder를 사용한 동적 그리드 생성

만약 아이템의 개수가 많거나 동적으로 변하는 경우 GridView.builder를 사용하는 것이 더 효율적입니다. 아래는 GridView.builder를 사용한 예시입니다.

import 'package:flutter/material.dart';

class MyDynamicGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: 100,
      itemBuilder: (context, index) {
        return Center(
          child: Text(
            'Item $index',
            style: Theme.of(context).textTheme.headline5,
          ),
        );
      },
    );
  }
}

위의 코드에서 GridView.builder를 사용하여 itemCount에 따라 동적으로 아이템을 생성하고 있습니다.

결론

이렇게하여, 플러터의 GridView를 사용하여 그리드 형태의 화면을 구현할 수 있습니다. GridView 위젯은 다양한 형태의 그리드를 지원하여 유연한 화면 구성이 가능합니다.

더 많은 정보를 원하시면 플러터 공식 문서를 참고하시기 바랍니다.