[flutter] RichText에서 스타일 변화 주기(애니메이션)

22 Dec 2023

flutter

원하는 스타일로 텍스트를 꾸밀 때 종종 애니메이션 효과를 추가하고 싶을 수 있습니다. Flutter의 RichText 위젯을 사용하면 텍스트의 일부 또는 전체에 적용된 스타일을 동적으로 변화시킬 수 있습니다. 이 글에서는 RichText 위젯을 사용하여 텍스트의 스타일을 애니메이션으로 변화시키는 방법에 대해 살펴보겠습니다.

RichText 위젯

RichText 위젯은 다양한 스타일을 적용할 수 있는 다중 스타일 텍스트를 만들 수 있도록 해줍니다. RichText 위젯은 TextSpan을 사용하여 다양한 텍스트 스타일을 정의할 수 있습니다.

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'Hello', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

애니메이션 적용하기

텍스트의 스타일에 애니메이션을 적용하려면 AnimatedBuilder나 AnimatedWidget을 사용할 수 있습니다. 이들 위젯은 지속적으로 애니메이션을 빌드하여 화면에 출력합니다.

class AnimatedTextStyle extends ImplicitlyAnimatedWidget {
  final TextStyle style;
  final Widget child;

  AnimatedTextStyle({
    Key key,
    @required this.style,
    @required this.child,
    Duration duration,
    Curve curve,
  }) : super(
         key: key,
         duration: duration,
         curve: curve,
       );

  @override
  _AnimatedTextStyleState createState() => _AnimatedTextStyleState();
}

class _AnimatedTextStyleState extends AnimatedWidgetBaseState<AnimatedTextStyle> {
  TextStyleTween _style;

  @override
  void forEachTween(TweenVisitor<dynamic> visitor) {
    _style = visitor(
      _style,
      widget.style,
      (dynamic value) => TextStyleTween(begin: value),
    );
  }

  @override
  Widget build(BuildContext context) {
    final style = _style.evaluate(animation);
    return DefaultTextStyle(
      style: style,
      child: widget.child,
    );
  }
}

애니메이션을 적용하려는 RichText 위젯과 함께 AnimatedTextStyle 위젯을 사용하여 텍스트 스타일을 동적으로 변화시킬 수 있습니다.

결론

Flutter의 RichText 위젯과 함께 애니메이션을 사용하여 텍스트의 스타일을 변화시킬 수 있습니다. 이를 통해 동적인 텍스트 스타일 변화를 표현할 수 있고, 사용자 경험을 향상시킬 수 있습니다.

더 많은 정보를 원한다면, Flutter 공식 문서를 확인해보세요.