[Flutter] Text Slide Animation

이번 포스트에서는 Text Animation을 구현해볼 것이다.
원하는 목표 및 결과는 다음과 같다.

최종 결과

목표

• Fade In & Out
• Slide In & Out
• 글자 수가 변하더라도 자연스러운 영역 조절

코드

사용 패키지

animate_do: 

animate_do에서 FadeOutDown, FadeInDown 를 사용한다.

구현

List<String> names = [
    '첫번째',
    '두 번째 문장',
    '3',
    '4번째 문장'
];

Wrap(
  children: [
    FadeOutDown(
      // ...
      child: FadeInDown(
      	// ...
        child: AnimationTextWidget(names: names)
      ),
    ),
    Text(' 입니다.'),
  ],
),

결과 1

위 코드로 하면 부드럽지가 않고 끊기는 현상이 발생한다.

이 끊기는 현상을 해결하기 위해서는 어떠한 방식을 써야할까?

A 와 B사이의 자연스러운 변화가 필요!