[flutter] 플러터 GridView에서 아이템의 배경색과 테두리를 설정하는 방법은?

18 Dec 2023

flutter

다음은 간단한 예제 코드입니다.

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 Example')),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
          ),
          itemCount: 16,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              margin: EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: Colors.blue,
                border: Border.all(color: Colors.black, width: 2),
              ),
              child: Center(
                child: Text('Item $index'),
              ),
            );
          },
        ),
      ),
    );
  }
}

위의 예제에서는 GridView의 각 아이템을 Container 위젯으로 만들고, 해당 Container 위젯의 decoration 속성을 사용하여 배경색과 테두리를 설정했습니다. Color 속성은 배경색을, Border 속성은 테두리를 나타냅니다.

이와 같이 간단히 GridView의 아이템에 배경색과 테두리를 설정할 수 있습니다. 원하는 색상과 스타일에 맞게 속성을 변경하여 사용하시면 됩니다.