Flutter 게시판 앱 만들기 — 감성을 더한 부드러운 움직임 만들기

앱은 단순히 "기능"만 있어서는 부족하다.
사용자에게 감정을 주는 "움직임"이 있을 때, 비로소 완성된다.

이번 글에서는 Flutter에서 애니메이션을 활용하여 자연스럽고 감성적인 화면 전환을 만들어보자.
애니메이션을 더하면 앱이 훨씬 더 매력적으로 변한다.

---

🎞️ Hero 애니메이션

Hero는 두 화면 간 같은 위젯을 부드럽게 연결해주는 애니메이션이다.
예를 들어 게시글 목록에서 이미지나 제목이 상세 페이지로 부드럽게 확대되어 이동하는 효과를 줄 수 있다.

// 리스트 화면
Hero(
  tag: 'post-title-$index',
  child: Text(post['title']!),
)

// 상세 화면
Hero(
  tag: 'post-title-$index',
  child: Text(post['title']!, style: TextStyle(fontSize: 24)),
)

위처럼 tag 값만 같다면 자연스럽게 연결되어 이동한다.

---

🌀 AnimatedContainer

AnimatedContainer는 사이즈, 색상, 위치 등을 부드럽게 변화시킬 수 있다.

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  width: isExpanded ? 300 : 150,
  height: 100,
  color: isExpanded ? Colors.teal : Colors.grey,
  curve: Curves.easeInOut,
)

단순한 버튼도 이런 효과를 넣으면 훨씬 부드럽고 고급스러워진다.

---

🌠 FadeTransition으로 부드럽게 나타나기

화면이 전환될 때 뚝 끊기듯 바뀌는 것이 아니라, 살짝 나타나는 애니메이션도 줄 수 있다.
FadeTransition은 AnimationController와 함께 사용한다.

class FadeIn extends StatefulWidget {
  @override
  _FadeInState createState() => _FadeInState();
}

class _FadeInState extends State<FadeIn> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animation,
      child: Text('Hello Flutter!'),
    );
  }
}

이 코드는 화면이 뜨면서 부드럽게 Hello Flutter! 텍스트가 나타나도록 한다.

---

🌱 다음 단계

지금까지 화면을 더 아름답게 꾸며줄 수 있는 Flutter의 기본 애니메이션을 배웠다.
이제 다음 글에서는 본격적으로 글쓰기 기능을 구현해볼 예정이다.

TextField, Form, 유효성 검사까지 함께 다뤄보자.

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