2. 앱에 어울리는 애니메이션 구현하기 <AnimationContainer 편>

Flutter에서 AnimatedContainer 사용법: 애니메이션을 쉽게 구현하는 방법

Flutter에서 애니메이션은 사용자 경험을 향상시키는 중요한 요소 중 하나입니다. 그러나 복잡한 애니메이션 코드를 작성하는 것은 때로 부담스러울 수 있습니다. 이때, AnimatedContainer는 애니메이션을 간편하게 구현할 수 있는 매우 강력한 위젯입니다. 이번 글에서는 AnimatedContainer를 사용해 상태 변화를 부드럽게 처리하는 방법을 알아보겠습니다.

---

AnimatedContainer란?

AnimatedContainer는 Flutter에서 상태 변화에 따라 Container의 속성들을 자동으로 애니메이션화해주는 위젯입니다. 일반적인 Container와 비슷하지만, 속성 값이 변경될 때마다 그 변화가 애니메이션으로 자연스럽게 적용됩니다. 예를 들어, width, height, color, borderRadius, padding 등 다양한 속성을 애니메이션으로 변환할 수 있습니다.

---

왜 AnimatedContainer를 사용할까?

Flutter에서 기본 애니메이션을 구현하려면 AnimationController나 Tween 같은 클래스를 활용해야 합니다. 하지만 간단한 속성 변화 애니메이션을 위해 이렇게 복잡한 로직을 작성하는 것은 오버헤드일 수 있습니다. AnimatedContainer는 이러한 애니메이션을 더욱 간단하게 처리할 수 있게 해줍니다.

장점:

• 간편한 사용: 복잡한 애니메이션 제어 없이 상태 변화만으로 애니메이션이 자동으로 실행됩니다.
• 다양한 속성 지원: 크기, 색상, 테두리 등 다양한 속성을 애니메이션화할 수 있습니다.
• 부드러운 UI 제공: 사용자 인터랙션에 따라 자연스러운 UI 변화를 제공합니다.

---

예제 코드: 클릭 시 크기와 색상이 변하는 애니메이션

아래는 AnimatedContainer를 사용해, 버튼을 클릭할 때마다 사각형의 크기와 색상이 부드럽게 변하는 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('AnimatedContainer Example')),
        body: const Center(
          child: AnimatedBox(),
        ),
      ),
    );
  }
}

class AnimatedBox extends StatefulWidget {
  const AnimatedBox({super.key});

  @override
  _AnimatedBoxState createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _isBig = false;

  void _animateContainer() {
    setState(() {
      _isBig = !_isBig;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GestureDetector(
          onTap: _animateContainer, // 탭하면 애니메이션 시작
          child: AnimatedContainer(
            duration: const Duration(seconds: 1), // 애니메이션 지속 시간
            curve: Curves.easeInOut, // 애니메이션 커브 설정
            width: _isBig ? 200.0 : 100.0, // 크기 변경
            height: _isBig ? 200.0 : 100.0, // 크기 변경
            color: _isBig ? Colors.blue : Colors.red, // 색상 변경
            child: const Center(
              child: Text(
                'Tap me!',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

코드 설명

1. AnimatedContainer: 상태 변화에 따라 속성 값이 변경될 때 애니메이션을 자동으로 처리합니다.
2. duration: 애니메이션의 지속 시간을 설정합니다. 위 코드에서는 1초 동안 애니메이션이 실행됩니다.
3. curve: 애니메이션의 속도 곡선을 설정합니다. Curves.easeInOut은 애니메이션의 시작과 끝 부분이 부드럽게 가속 및 감속되는 곡선입니다.
4. setState(): 버튼을 클릭할 때마다 상태값인 _isBig을 반전시켜 AnimatedContainer의 크기와 색상이 바뀌도록 설정합니다.

---

AnimatedContainer로 애니메이션을 쉽게 확장하기

AnimatedContainer는 기본적인 애니메이션을 구현하는 데 매우 유용하지만, 더 복잡한 애니메이션도 쉽게 확장할 수 있습니다. 예를 들어, 크기와 색상뿐만 아니라 테두리 모양(borderRadius), 그림자(boxShadow), 패딩(padding) 등도 애니메이션화할 수 있습니다.

추가 속성 예시:

AnimatedContainer(
  duration: const Duration(seconds: 1),
  curve: Curves.easeInOut,
  width: _isBig ? 200.0 : 100.0,
  height: _isBig ? 200.0 : 100.0,
  decoration: BoxDecoration(
    color: _isBig ? Colors.blue : Colors.red,
    borderRadius: _isBig ? BorderRadius.circular(20) : BorderRadius.circular(0),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: _isBig ? 10.0 : 0.0,
        spreadRadius: _isBig ? 5.0 : 0.0,
      ),
    ],
  ),
)

위 코드를 사용하면 클릭할 때마다 사각형의 모서리가 둥글게 변하고 그림자도 생기면서 애니메이션이 실행됩니다.

---

AnimatedContainer 활용 시 주의점

1. 무거운 애니메이션 주의: 너무 많은 속성을 동시에 애니메이션화하면 성능에 영향을 줄 수 있습니다. 성능 최적화가 필요한 경우, AnimatedContainer 대신 AnimationController를 사용해 직접 애니메이션을 제어하는 것이 좋습니다.
2. 애니메이션 시간 조절: duration 값을 적절히 설정해 애니메이션이 너무 느리거나 빠르지 않도록 조정하는 것이 중요합니다.
3. 애니메이션 중첩: 여러 AnimatedContainer를 중첩해서 사용할 수 있지만, 너무 많은 애니메이션이 동시에 실행되면 복잡해질 수 있으니 적절하게 관리해야 합니다.

---

결론

Flutter의 AnimatedContainer는 상태 변화에 따라 다양한 UI 요소를 부드럽게 애니메이션화할 수 있는 간편한 도구입니다. 복잡한 애니메이션 로직 없이도 크기, 색상, 모양 등의 변화를 자연스럽게 표현할 수 있어, 사용자 경험을 극대화하는 데 도움을 줍니다. 애니메이션을 간편하게 추가하고 싶다면 AnimatedContainer는 꼭 활용해볼 만한 위젯입니다.

애니메이션을 통해 앱의 인터페이스를 더 매끄럽고 생동감 있게 만들고 싶다면, 지금 바로 AnimatedContainer를 사용해 보세요!