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

18 Dec 2023

flutter

플러터의 GridView는 그리드 형식으로 아이템을 표시하는 데 사용됩니다. GridView의 아이템에 원하는 배경색과 테두리를 맞춤설정하는 방법은 다음과 같습니다.

배경색 설정하기

GridView의 아이템에 배경색을 설정하려면 Container 위젯을 사용하여 각 아이템을 감싸면 됩니다. Container 위젯의 color 속성을 사용하여 배경색을 지정할 수 있습니다.

예를 들어, 다음과 같이 코드를 작성할 수 있습니다:

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: Colors.blue, // 아이템의 배경색을 파란색으로 설정
      child: Center(
        child: Text('아이템 $index'),
      ),
    );
  },
  itemCount: 4,
)

위의 예제에서 Container의 color 속성을 사용하여 아이템의 배경색을 파란색으로 설정했습니다.

테두리 설정하기

아이템에 테두리를 설정하려면 Container의 decoration 속성을 사용하여 BoxDecoration을 지정해야 합니다. BoxDecoration의 border 속성을 사용하여 테두리 스타일을 설정할 수 있습니다.

예를 들어, 다음과 같이 코드를 작성할 수 있습니다:

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2), // 2픽셀 두께의 검은색 테두리 설정
      ),
      child: Center(
        child: Text('아이템 $index'),
      ),
    );
  },
  itemCount: 4,
)

위의 예제에서 Container의 decoration 속성을 사용하여 아이템에 2픽셀 두께의 검은색 테두리를 설정했습니다.

이제 위의 예제를 참고하여 원하는 배경색과 테두리를 설정하여 플러터의 GridView 아이템을 맞춤설정할 수 있습니다.