[flutter] 플러터 GridView에서 아이템의 색상을 변경하는 방법은?

18 Dec 2023

flutter

플러터에서 GridView를 사용하여 그리드 레이아웃을 만들 수 있습니다. GridView의 아이템에 색상을 변경하는 방법에 대해 알아보겠습니다.

1. GridView.builder 사용

가장 일반적인 방법은 GridView.builder를 사용하여 그리드를 만들고, itemBuilder 함수를 통해 각 아이템을 정의하는 것입니다. 아래는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
          itemCount: 4,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              color: index % 2 == 0 ? Colors.blue : Colors.green, // 짝수 인덱스는 파란색, 홀수 인덱스는 초록색
            );
          },
        ),
      ),
    );
  }
}

위 예제에서 itemBuilder 함수 내에서 Container의 color 속성을 변경하여 각 아이템의 색상을 지정할 수 있습니다.

2. GridView.count 또는 GridView.extent 사용

GridView.builder 대신 GridView.count나 GridView.extent를 사용하여 그리드를 만들 수도 있습니다. 이들 역시 children 속성을 통해 각 아이템을 정의할 수 있습니다.

GridView.count(
  crossAxisCount: 2,
  children: List.generate(4, (index) {
    return Container(
      color: index % 2 == 0 ? Colors.blue : Colors.green, // 짝수 인덱스는 파란색, 홀수 인덱스는 초록색
    );
  }),
);

요약

GridView에서 각 아이템의 색상을 변경하는 방법은 itemBuilder 함수를 사용하여 각 아이템을 정의하고, 해당 아이템의 color 속성을 지정하는 것입니다. 또한 GridView.count나 GridView.extent를 사용하여 아이템을 정의할 수도 있습니다.

쉽게 말해, GridView에서는 각 아이템에 원하는 색상을 지정할 수 있다는 것입니다.

더 많은 정보는 Flutter 공식 문서에서 확인할 수 있습니다.