Flutter 애니메이션 & 전환 효과 완전 정복 — 감성을 더한 부드러운 움직임 만들기

처음으로 Flutter에서 애니메이션을 구현해봤을 때, 마치 정적인 화면에 생명을 불어넣는 기분이었다.
그저 버튼 하나 눌렀을 뿐인데 화면이 부드럽게 전환되고, 크기와 색상이 변화하는 걸 보며 "와... 이래서 Flutter 하는구나" 싶었다.

---

🎬 Flutter 애니메이션이란?

Flutter에서는 애니메이션을 굉장히 다양한 방식으로 구현할 수 있어요. 대표적으로 다음과 같은 두 가지 방식이 있다.

• Implicit Animation (암시적 애니메이션) - AnimatedContainer, AnimatedOpacity 등
• Explicit Animation (명시적 애니메이션) - AnimationController, Tween, AnimatedBuilder 등

🌱 AnimatedContainer 사용 예제 (Implicit)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _selected = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AnimatedContainer 예제')),
        body: Center(
          child: GestureDetector(
            onTap: () {
              setState(() {
                _selected = !_selected;
              });
            },
            child: AnimatedContainer(
              width: _selected ? 200 : 100,
              height: _selected ? 100 : 200,
              color: _selected ? Colors.blue : Colors.red,
              alignment:
                  _selected ? Alignment.center : AlignmentDirectional.topCenter,
              duration: Duration(seconds: 1),
              curve: Curves.fastOutSlowIn,
              child: Text(
                "Tap Me!",
                style: TextStyle(color: Colors.white, fontSize: 16),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

이 예제는 AnimatedContainer로 크기와 색상, 위치를 동시에 부드럽게 변화시킨다.
이게 바로 Flutter 애니메이션의 매력!

🔧 AnimationController를 활용한 명시적 애니메이션 (Explicit)

좀 더 세밀한 제어가 필요한 경우, AnimationController를 직접 사용한다.

class FadeInWidget extends StatefulWidget {
  @override
  _FadeInWidgetState createState() => _FadeInWidgetState();
}

class _FadeInWidgetState extends State<FadeInWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);

    _controller.forward(); // 애니메이션 시작
  }

  @override
  void dispose() {
    _controller.dispose(); // 리소스 해제
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animation,
      child: Center(
        child: Text("Fade In 효과!", style: TextStyle(fontSize: 24)),
      ),
    );
  }
}

이 코드는 텍스트가 서서히 나타나는 FadeTransition 예제이다.
다양한 Tween을 활용하면 회전, 이동, 크기 등도 모두 제어할 수 있다.

🧭 PageRouteBuilder로 페이지 전환 애니메이션 만들기

Navigator.of(context).push(
  PageRouteBuilder(
    transitionDuration: Duration(milliseconds: 500),
    pageBuilder: (_, __, ___) => SecondPage(),
    transitionsBuilder: (_, animation, __, child) {
      return SlideTransition(
        position: Tween<Offset>(
          begin: Offset(1.0, 0.0),
          end: Offset.zero,
        ).animate(animation),
        child: child,
      );
    },
  ),
);

SlideTransition을 이용해 페이지가 오른쪽에서 왼쪽으로 슬라이드되며 전환된다. 이외에도 FadeTransition, ScaleTransition 등 다양한 방식이 존재한다.

✨ 마치며

Flutter의 애니메이션은 생각보다 더 간단하고, 상상 이상으로 부드럽다.
화면에 '움직임'을 줄 수 있다는 건, 단지 보기 좋게 만드는 걸 넘어 사용자 경험 자체를 바꾼다.
지금까지 만든 화면이 정적이라면, 오늘부터는 작은 움직임 하나 넣어보는 건 어떨까?

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