[flutter] 플러터 GridView에서 아이템을 선택할 때 애니메이션 효과를 주는 방법은?

18 Dec 2023

flutter

GridView는 여러 가지 항목을 그리드 형식으로 표시하는 데 사용되는 플러터 위젯입니다. 플러터 앱에서 사용자가 아이템을 선택할 때 선택한 아이템에 애니메이션 효과를 주는 것은 사용자 경험을 향상시키는 데 도움이 됩니다.

1. GestureDetector를 사용하여 아이템 선택 감지

먼저, GridView의 각 아이템에 대한 선택을 감지하기 위해 GestureDetector를 사용합니다. GestureDetector 위젯은 터치 동작을 감지하여 해당 동작에 대한 액션을 실행할 수 있도록 해줍니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return GestureDetector(
      onTap: () {
        // 아이템을 선택할 때 실행할 액션
      },
      child: YourItemWidget(), // 선택 가능한 아이템 위젯
    );
  }, 
)

2. 선택된 아이템에 애니메이션 효과 적용

선택된 아이템에 애니메이션 효과를 주기 위해 AnimatedContainer나 AnimatedOpacity와 같은 애니메이션을 제공하는 위젯을 사용할 수 있습니다. 선택된 아이템 위젯을 감싸는 방식으로 애니메이션을 적용할 수 있습니다.

bool selectedItem = false; // 선택 여부에 따라 컨테이너의 속성을 변경

GestureDetector(
  onTap: () {
    setState(() {
      selectedItem = !selectedItem; // 선택 상태 변경
    });
  },
  child: AnimatedContainer(
    duration: Duration(milliseconds: 500), // 애니메이션 지속 시간 설정
    color: selectedItem ? Colors.blue : Colors.transparent, // 선택된 아이템에 색상 적용
    child: YourItemWidget(), // 선택 가능한 아이템 위젯
  ),
)

위 예시에서 AnimatedContainer 위젯은 선택된 아이템에 색상을 적용하고, onTap 이벤트를 통해 선택 여부를 변경하며 애니메이션을 적용합니다.

3. 추가적인 애니메이션 효과

선택된 아이템에 다양한 애니메이션 효과를 적용하려면, flutter_animation package와 같은 애니메이션 제어를 위한 패키지를 활용할 수 있습니다.

위의 방법들을 통해 GridView에서 선택한 아이템에 애니메이션 효과를 적용할 수 있습니다. 사용자가 선택한 아이템에 시각적인 피드백을 제공하여 앱의 상호작용성과 사용자 경험을 향상시킬 수 있습니다.