상태 관리에서 배운 대로 값을 바꾸면 화면이 다시 그려진다. 그런데 다시 그려지는 순간 화면은 휙 바뀐다. 상자를 누르면 커지게 만들어보자.

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

  @override
  State<GrowBox> createState() => _GrowBoxState();
}

class _GrowBoxState extends State<GrowBox> {
  bool big = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => big = !big),
      child: Container(
        width: big ? 200 : 100,
        height: big ? 200 : 100,
        color: Colors.blue,
      ),
    );
  }
}

탭하면 100짜리 상자가 순간적으로 200짜리로 바뀐다. 바뀌는 건 맞는데 부드럽지 않다. 값만 바꿨을 뿐 "100에서 200까지 천천히"라는 정보가 없기 때문이다.

해결 1: 암시적 애니메이션 - Container를 AnimatedContainer로 바꾼다

AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  width: big ? 200 : 100,
  height: big ? 200 : 100,
  color: Colors.blue,
)

Container 앞에 Animated를 붙이고 duration만 주면 끝이다. 이제 big이 바뀔 때마다 이전 값에서 새 값까지 300밀리초 동안 알아서 이어서 그려준다.

• duration: 얼마 동안 움직일지다. 필수 값이다
• curve: 움직임의 가속 모양이다. Curves.easeInOut은 천천히 시작해 빨라졌다가 천천히 끝난다. 생략하면 일정한 속도로 움직인다

이런 방식을 암시적(implicit) 애니메이션이라고 부른다. "움직여라"고 시킨 적이 없고, 값이 바뀌었다는 사실만으로 움직임이 암시되기 때문이다. 컨트롤러도 필요 없다. 속성별로 이런 위젯이 따로 있다.

• AnimatedContainer: 크기, 색, 여백, 모서리 등 여러 속성
• AnimatedOpacity: 투명도
• AnimatedAlign, AnimatedPositioned: 위치
• AnimatedSwitcher: 위젯이 다른 위젯으로 바뀔 때 교체 효과

글자 숫자가 올라가는 것처럼 정해진 위젯이 없는 값은 TweenAnimationBuilder로 처음 값과 끝 값을 지정해 움직이게 할 수 있다.

암시적 애니메이션으로 부족할 때

암시적 애니메이션은 "값이 바뀌면 그 방향으로 한 번 움직인다"만 한다. 이런 건 못 한다.

• 빙글빙글 계속 반복하기
• 중간에 멈췄다가 이어서 하기, 거꾸로 되감기
• 여러 요소의 타이밍을 서로 맞추기

이때 명시적(explicit) 애니메이션을 쓴다. 움직임을 지휘하는 AnimationController를 직접 만든다.

해결 2: 명시적 애니메이션 - AnimationController

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

  @override
  State<Spinner> createState() => _SpinnerState();
}

class _SpinnerState extends State<Spinner>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    )..repeat(); // 계속 반복
  }

  @override
  void dispose() {
    _controller.dispose(); // 쓴 건 정리
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: _controller,
      child: const Icon(Icons.refresh, size: 48),
    );
  }
}

처음 보면 낯선 줄이 많지만, 이미 아는 것들의 조합이다.

• late final AnimationController _controller와 initState에서 채우기: 첫 글의 late final, StatefulWidget 글의 initState다. 컨트롤러는 State가 만들어진 뒤에야 만들 수 있어서 late가 필요하다
• with SingleTickerProviderStateMixin: 상속 글의 mixin이다. 화면이 한 프레임 그려질 때마다 알려주는 티커를 State에 얹는다. 컨트롤러가 하나뿐이면 SingleTicker..., 여러 개면 TickerProviderStateMixin을 쓴다
• vsync: this: "이 State가 프레임 신호를 준다"고 컨트롤러에 알려준다. 화면 밖에 있을 때 불필요하게 돌지 않게 한다
• ..repeat(): 생성자 글에서 본 ..다. 컨트롤러를 만들면서 바로 repeat()를 호출한다
• dispose()에서 _controller.dispose(): 입력 글의 TextEditingController와 같다
• RotationTransition(turns: _controller): 컨트롤러는 0에서 1까지 변하는 값이고, turns: 1이 한 바퀴다. 2초마다 한 바퀴 돈다

컨트롤러는 이런 동작 함수를 가지고 있다.

_controller.forward();  // 처음부터 끝까지 재생
_controller.reverse();  // 거꾸로 재생
_controller.stop();     // 멈춤
_controller.repeat();   // 반복

삽질 포인트 1: with를 빼먹으면 vsync에서 막힌다

class _SpinnerState extends State<Spinner> { // with SingleTickerProviderStateMixin 없음
  ...
  _controller = AnimationController(vsync: this); // 여기서 에러남
}

this를 TickerProvider로 쓸 수 없다는 에러다. this(State)가 티커를 제공하지 못하기 때문이니 with SingleTickerProviderStateMixin을 붙이면 풀린다.

삽질 포인트 2: dispose를 빼먹으면 화면을 나갈 때 에러가 난다

컨트롤러는 프레임마다 깨어나는 티커를 들고 있다. dispose에서 정리하지 않으면 화면이 사라질 때 티커가 살아 있는 채로 폐기되었다는 취지의 에러가 나고, 메모리도 샌다. StatefulWidget에서 initState에서 만든 건 dispose에서 정리한다는 규칙이 여기도 똑같이 적용된다.

삽질 포인트 3: 컨트롤러가 돌 때마다 setState를 부르면 비싸다

컨트롤러 값이 바뀔 때마다 setState로 화면 전체를 다시 그리는 코드를 쓰기 쉽다. 움직이는 부분만 다시 그리고 싶으면 AnimatedBuilder를 쓴다.

AnimatedBuilder(
  animation: _controller,
  builder: (context, child) {
    return Opacity(
      opacity: _controller.value,
      child: child,
    );
  },
  child: const FlutterLogo(size: 100), // 안 변하는 부분은 child로 빼서 다시 안 만든다
)

컨트롤러 값이 바뀔 때마다 builder만 다시 실행된다. 안 변하는 부분은 child로 넘겨서 재사용한다. 값의 범위를 0~1이 아니라 원하는 범위로 바꾸려면 Tween(begin: 0.0, end: 200.0).animate(_controller)를 쓴다.

둘 중 뭘 쓰나

• 값이 바뀔 때 부드럽게 이어지면 충분하다 → 암시적(Animated...). 코드가 훨씬 짧다
• 반복, 멈춤, 되감기, 여러 움직임의 동기화가 필요하다 → 명시적(AnimationController)

처음에는 암시적으로 시작하고, 암시적으로 안 되는 순간에 명시적으로 넘어간다.

해결 3: Hero - 화면 사이를 날아가는 움직임

목록의 사진을 누르면 그 사진이 상세 화면의 큰 사진으로 날아가며 커지는 움직임을 Hero가 해준다. 컨트롤러가 필요 없다.

// 목록 화면
Hero(
  tag: 'avatar-${user.id}',
  child: CircleAvatar(child: Text(user.name[0])),
)

// 상세 화면 - 같은 tag
Hero(
  tag: 'avatar-${user.id}',
  child: CircleAvatar(radius: 60, child: Text(user.name[0])),
)

두 화면에서 같은 tag를 가진 Hero를 찾아서, 화면이 전환되는 동안 위치와 크기를 이어서 움직인다. 화면 이동 글에서 본 context.push('/detail/${user.id}') 같은 이동만 있으면 된다.

함정: tag가 겹치면 에러가 난다

ListView(
  children: users.map((u) => Hero(tag: 'avatar', child: ...)).toList(), // 모든 항목이 같은 tag
)

한 화면 안에 같은 tag가 둘 이상 있으면 어느 걸 날려야 할지 몰라서 에러가 난다. tag는 항목마다 고유한 값으로 만든다. 위 예시처럼 'avatar-${user.id}'로 항목의 id를 붙인다. 두 화면의 같은 항목은 같은 tag를 받고, 같은 화면의 다른 항목은 다른 tag를 받는다.

Compose, SwiftUI와 비교하면

// Compose
val size by animateDpAsState(if (big) 200.dp else 100.dp)
Box(Modifier.size(size).background(Color.Blue).clickable { big = !big })

// SwiftUI
Rectangle()
    .fill(.blue)
    .frame(width: big ? 200 : 100, height: big ? 200 : 100)
    .onTapGesture { withAnimation { big.toggle() } }

• 값이 바뀔 때 부드럽게: Flutter AnimatedContainer 같은 Animated... 위젯 / Compose animate*AsState / SwiftUI withAnimation, .animation
• 직접 지휘하는 움직임: Flutter AnimationController + Tween / Compose Animatable, updateTransition / SwiftUI는 TimelineView나 phaseAnimator
• 화면 사이 공유 요소: Flutter Hero / Compose SharedTransitionLayout / SwiftUI matchedGeometryEffect
• 정리해야 하는가: Flutter 컨트롤러는 dispose 필요 / Compose와 SwiftUI는 자동

Flutter의 Animated... 위젯은 Compose의 animate*AsState와 SwiftUI의 withAnimation에 해당한다. 다만 Flutter는 위젯 이름으로 대상 속성이 정해져 있다. 명시적 애니메이션에서는 컨트롤러를 직접 만들고 dispose로 정리해야 해서 코드가 길어진다.

정리

• 값을 setState로 바꾸기만 하면 화면이 순간적으로 바뀌므로, Container 대신 AnimatedContainer처럼 Animated... 위젯에 duration을 주면 부드럽게 이어진다 (암시적 애니메이션)
• 반복, 멈춤, 되감기, 여러 움직임의 동기화가 필요하면 AnimationController를 쓰는 명시적 애니메이션으로 간다
• 컨트롤러를 쓰려면 State에 with SingleTickerProviderStateMixin을 붙이고 vsync: this를 주며, initState에서 만들고 dispose에서 반드시 정리한다
• 컨트롤러 값에 맞춰 일부만 다시 그리려면 setState보다 AnimatedBuilder를 쓰고, 안 변하는 부분은 child로 뺀다
• Hero는 두 화면에서 같은 tag를 가진 위젯을 이어서 날려주고, 한 화면 안에서 tag가 겹치면 에러가 난다
• 처음에는 암시적으로 시작하고, 부족할 때 명시적으로 넘어간다

다음 글에서는 Flutter에서 Kotlin과 Swift로 짠 네이티브 코드를 호출하는 플랫폼 채널을 다뤄보겠다.