[flutter] 플러터 GridView에서 아이템에 텍스트를 추가하는 방법은?

18 Dec 2023

flutter

아이템에 텍스트를 추가하는 방법은 GridView.builder의 itemBuilder 속성을 통해 각각의 그리드 아이템을 만드는 로직에서 설정할 수 있습니다. itemBuilder 함수 내에서 각 아이템은 그리드 아이템 위젯으로 반환되어야 합니다. 이를 위해 ListTile, Container, 또는 다른 사용자 정의 위젯을 사용할 수 있습니다.

예를 들어, 다음은 GridView.builder를 사용하여 간단한 텍스트를 가진 그리드 아이템을 생성하는 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GridView 텍스트 예제')),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
          itemCount: 4,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              child: Center(
                child: Text('아이템 $index'),
              ),
            );
          },
        ),
      ),
    );
  }
}

이 예제에서는 GridView.builder를 사용하여 2x2 그리드를 생성하고, itemBuilder 함수에서는 각각의 아이템에 “아이템 0”, “아이템 1”, “아이템 2”, “아이템 3”이라는 텍스트를 가진 카드 위젯을 반환합니다.

더 복잡한 레이아웃이나 사용자 정의 모양을 만들고 싶다면, ListTile 또는 Container와 같은 다양한 위젯을 활용하여 보다 다양한 스타일의 그리드 아이템을 만들 수 있습니다.