[flutter] 플러터 GridView에서 아이템에 애니메이션 효과를 적용하는 방법은?

18 Dec 2023

flutter

Flutter에서 GridView를 사용하여 그리드 레이아웃을 생성하는 것은 매우 간단합니다. GridView.builder 또는 GridView.count와 같은 위젯을 사용하여 아이템 목록을 렌더링할 수 있습니다. 하지만 이러한 아이템에 애니메이션 효과를 적용하는 것은 조금 더 복잡할 수 있습니다.

아이템에 애니메이션 효과 적용하는 방법

1. AnimatedContainer 사용

AnimatedContainer를 이용하면 속성을 변경할 때 자동으로 애니메이션 효과가 적용됩니다. 아래의 예시 코드는 GridView 아이템에 애니메이션 효과를 적용하는 방법을 보여줍니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 500),
      color: Colors.blue,
      child: ListTile(
        title: Text('Item $index'),
      ),
    );
  },
)

위의 예제에서는 AnimatedContainer를 사용하여 GridView의 각 아이템에 색상 변경 애니메이션 효과를 적용했습니다.

2. Hero 애니메이션 사용

Hero 애니메이션을 사용하면 두 화면 사이의 이미지나 위젯의 애니메이션을 부드럽게 전환할 수 있습니다. 여러 개의 아이템이 있는 경우에도 각 아이템 간 전환 효과를 쉽게 추가할 수 있습니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return GestureDetector(
      child: Hero(
        tag: 'item$index',
        child: Card(
          child: Image.network(items[index]),
        ),
      ),
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) {
            return DetailScreen(imageUrl: items[index]);
          }),
        );
      },
    );
  },
)

위의 예제에서는 Hero 애니메이션을 사용하여 GridView의 각 아이템을 클릭했을 때 다른 화면으로 전환되면서 전환 애니메이션 효과가 적용됩니다.

결론

GridView에서 아이템에 애니메이션 효과를 적용하는 여러 가지 방법이 있습니다. AnimatedContainer 및 Hero 애니메이션을 사용하여 아이템에 애니메이션을 추가할 수 있으며, 원하는 효과에 따라 적절한 방법을 선택할 수 있습니다.