애니메이션을 더 깊게 — AnimatedBuilder부터 Tween까지 완전 정복

Flutter에서의 애니메이션은 단순한 UI 효과를 넘어서, 앱의 감성을 결정짓는 중요한 요소다.
말 한마디 없이도 애니메이션은 사용자에게 메시지를 전달한다.

이 글에서는 Flutter 애니메이션의 기본부터 고급 개념인 AnimatedBuilder와 Tween까지,
한 번쯤 마주했지만 명확히 이해하기 어려웠던 부분들을 실전 예제와 함께 정리해보자.

---

🎞️ Flutter 애니메이션의 구조

Flutter 애니메이션은 크게 세 요소로 구성된다:

• AnimationController: 애니메이션을 구동시키는 컨트롤러 (시간, 반복 등)
• Animation: 값의 변화 (예: 0.0 → 1.0)
• Tween: 어떤 값의 범위를 어떻게 보관할 것인지 정의

이 셋이 잘 맞물릴 때, 우리는 섬세한 움직임을 만들어낼 수 있다.

---

⚙️ 예제: Tween으로 크기 변경 애니메이션

class TweenExample extends StatefulWidget {
  const TweenExample({super.key});
  @override
  State<TweenExample> createState() => _TweenExampleState();
}

class _TweenExampleState extends State<TweenExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _sizeAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    )..repeat(reverse: true);

    _sizeAnimation = Tween(begin: 100.0, end: 200.0).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: _sizeAnimation,
        builder: (context, child) {
          return Container(
            width: _sizeAnimation.value,
            height: _sizeAnimation.value,
            color: Colors.blue,
          );
        },
      ),
    );
  }
}

이 예제는 100 → 200 크기의 박스를 반복적으로 키웠다 줄였다 하며 애니메이션을 구현한다.

---

🧱 AnimatedBuilder의 진짜 가치

AnimatedBuilder는 애니메이션 값이 바뀔 때 해당 빌더만 다시 호출되어 성능에 이점이 있다.
특히 복잡한 위젯 트리에서 핵심만 다시 빌드할 수 있어 유용하다.

AnimatedBuilder(
  animation: animation,
  builder: (context, child) {
    return Transform.rotate(
      angle: animation.value,
      child: child,
    );
  },
  child: Icon(Icons.refresh, size: 50),
)

주의할 점은 child에 가능한 변하지 않는 위젯을 넣어주어야 최적화 효과가 난다는 것!

---

🎯 Tip: 이런 애니메이션은 Tween으로

• 크기 변화: Tween<double>
• 색상 변화: ColorTween
• 오프셋 이동: Tween<Offset>
• 곡선 적용: CurvedAnimation으로 곡선 커스터마이징

// 곡선 애니메이션 예시
final curved = CurvedAnimation(
  parent: _controller,
  curve: Curves.easeInOut,
);

---

🧘 마무리하며

Flutter의 애니메이션은 생각보다 어렵지 않다.
애니메이션은 기능이 아니라, 감성이다.
움직임 하나로 앱의 분위기를 바꾸고, 사용자에게 더 나은 경험을 선물할 수 있다.

Tween, AnimatedBuilder… 이제 당신의 UI를 살아 숨 쉬게 만들어보자.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 심화과정입니다.