Flutter의 애니메이션 기초: AnimatedContainer로 시작하는 간단한 애니메이션 구현

Flutter는 직관적이고 강력한 애니메이션 기능을 제공하여 사용자 경험을 더욱 향상시킬 수 있습니다. 그 중에서도 AnimatedContainer는 기본적인 애니메이션을 손쉽게 구현할 수 있는 위젯으로, 컨테이너의 속성(크기, 색상, 경계선 등)을 변경하면서 자연스러운 전환 애니메이션을 적용할 수 있게 도와줍니다. 이 포스트에서는 AnimatedContainer 위젯을 활용하여 간단한 애니메이션을 만드는 방법을 설명하고, Flutter 개발에서 주목해야 할 중요한 포인트들을 소개합니다.

AnimatedContainer란?

AnimatedContainer는 일반적인 Container 위젯과 비슷하지만, 속성 값이 변경될 때 자동으로 애니메이션 효과를 제공하는 위젯입니다. 예를 들어, 버튼을 클릭하면 컨테이너의 크기, 색상, 테두리 등의 속성을 새롭게 설정하여 애니메이션을 통해 변경되는 것을 볼 수 있습니다. Flutter에서 이러한 애니메이션은 암시적 애니메이션(implicit animation)이라고 불립니다.

기본적인 AnimatedContainer 설정 방법

Flutter에서 AnimatedContainer를 사용하여 애니메이션을 구현하는 방법은 매우 간단합니다. 기본적인 3단계를 거치면, 손쉽게 애니메이션 효과를 추가할 수 있습니다.

StatefulWidget 생성 및 초기 속성 설정

애니메이션 속성을 변경하려면, 상태를 관리할 수 있는 StatefulWidget을 생성해야 합니다. 여기서 컨테이너의 초기 속성(크기, 색상, 경계선 등)을 설정합니다.

class AnimatedContainerApp extends StatefulWidget {
  @override
  State<AnimatedContainerApp> createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  double _width = 50;
  double _height = 50;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          width: _width,
          height: _height,
          decoration: BoxDecoration(
            color: _color,
            borderRadius: _borderRadius,
          ),
          duration: const Duration(seconds: 1),
          curve: Curves.fastOutSlowIn,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _width = 300;
            _height = 300;
            _color = Colors.blue;
            _borderRadius = BorderRadius.circular(50);
          });
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

AnimatedContainer를 사용해 애니메이션 적용

AnimatedContainer 위젯을 사용해 설정한 속성들을 바탕으로 애니메이션을 적용합니다. duration을 통해 애니메이션이 얼마나 지속될지를 정의하고, curve 옵션을 통해 애니메이션을 보다 부드럽게 만듭니다.

• duration: 애니메이션의 지속 시간 (1초로 설정)
• curve: 애니메이션의 움직임을 부드럽게 하기 위한 곡선 함수 (ex. Curves.fastOutSlowIn)

setState()로 속성 업데이트하여 애니메이션 실행

버튼을 누를 때 setState()를 사용하여 새로운 속성 값(크기, 색상, 경계선 등)을 설정하고, 애니메이션이 실행되도록 합니다. Flutter는 속성이 업데이트될 때마다 자동으로 애니메이션을 통해 속성이 변경되도록 렌더링합니다.

FloatingActionButton(
  onPressed: () {
    setState(() {
      _width = 100;
      _height = 100;
      _color = Colors.red;
      _borderRadius = BorderRadius.circular(20);
    });
  },
  child: Icon(Icons.play_arrow),
)

중요한 점: 암시적 애니메이션 vs 명시적 애니메이션

Flutter에서 애니메이션을 구현하는 방법은 크게 암시적 애니메이션(implicit animations)과 명시적 애니메이션(explicit animations)으로 나뉩니다. AnimatedContainer는 암시적 애니메이션의 대표적인 예로, 속성의 변경만으로 애니메이션을 자동으로 처리해줍니다. 반면에, 명시적 애니메이션은 더 세밀한 컨트롤을 제공하며 AnimationController와 같은 클래스를 통해 직접 애니메이션을 관리할 수 있습니다.

Flutter 개발 시 주목해야 할 주요 애니메이션 기능

1. 암시적 애니메이션 위젯: AnimatedContainer 외에도 AnimatedOpacity, AnimatedPadding 등 다양한 암시적 애니메이션 위젯이 제공됩니다.
2. AnimationController: 더 복잡한 애니메이션을 제어하고 싶을 때 유용한 Flutter의 애니메이션 컨트롤러입니다.
3. Hero 애니메이션: 두 화면 간의 전환 시 자연스러운 애니메이션을 제공하여 사용자 경험을 향상시킵니다.
4. CurvedAnimation: 애니메이션의 움직임을 더 부드럽고 자연스럽게 만들기 위해 곡선을 설정할 수 있는 기능입니다.

---

결론: Flutter로 애니메이션을 쉽게 구현하는 방법

Flutter는 애니메이션을 간단하게 구현할 수 있는 강력한 도구를 제공합니다. AnimatedContainer를 사용하면 코드를 복잡하게 작성하지 않아도 자연스럽고 부드러운 애니메이션 효과를 손쉽게 구현할 수 있습니다. 이를 통해 더 나은 사용자 경험을 제공할 수 있으며, Flutter의 다양한 애니메이션 옵션을 활용하면 더 정교한 애니메이션 효과를 만들 수 있습니다.

 

Flutter 앱 개발 초보자라면 AnimatedContainer와 같은 암시적 애니메이션부터 시작해 점차 더 복잡한 애니메이션으로 확장해 나가는 것이 좋은 방법입니다.