플러터 앱에서 GridView를 사용하여 아이템을 표시하고, 사용자가 아이템을 선택했을 때 해당 아이템의 배경색을 변경하는 방법에 대해 알아보겠습니다.

1. GridView.builder를 사용하여 아이템 표시

첫 번째 단계로는 GridView.builder를 사용하여 아이템을 표시하는 것입니다. GridView.builder를 사용하면 스크롤 가능한 그리드 형식의 아이템 목록을 구성할 수 있습니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return GestureDetector(
      onTap: () {
        // 선택된 아이템 처리 로직 추가
      },
      child: Container(
        // 아이템 내용 표시
      ),
    );
  },
)

위 코드에서는 GridView.builder를 사용하여 아이템을 표시하고, 각 아이템에 대한 GestureDetector를 추가하였습니다. 이제 선택된 아이템의 배경색을 변경하는 로직을 추가해보겠습니다.

2. 선택된 아이템의 배경색 변경

아이템이 선택되면 배경색을 변경하기 위해서는 상태 관리가 필요합니다. 선택된 아이템의 인덱스를 저장하고, 해당 인덱스의 아이템에 대한 배경색을 변경하면 됩니다.

int selectedIndex = -1;

...

GestureDetector(
  onTap: () {
    setState(() {
      selectedIndex = index; // 선택된 아이템의 인덱스 저장
    });
  },
  child: Container(
    decoration: BoxDecoration(
      color: index == selectedIndex ? Colors.blue : Colors.transparent,
      // 기타 스타일 및 내용 설정
    ),
    // 아이템 내용 표시
  ),
);

위 코드에서는 GestureDetector의 onTap 콜백에서 selectedIndex를 업데이트 하고, Container의 배경색을 해당 인덱스에 따라 동적으로 변경하도록 설정하였습니다.

이제 앱을 실행하여 GridView에서 아이템을 선택하면 선택된 아이템의 배경색이 변경되는 것을 확인할 수 있습니다.

이상으로, 플러터 GridView에서 아이템을 선택하면 해당 아이템의 배경색을 변경하는 방법에 대해 알아보았습니다.