[flutter] RichText에서 텍스트의 속도 조절하기

22 Dec 2023

flutter

텍스트 속도를 조절하고 싶다면, AnimatedTextKit 또는 FlutterSequenceAnimation과 같은 애니메이션 패키지를 사용하여 RichText 위젯을 생성할 수 있습니다. 일반적으로 이러한 패키지는 각 텍스트 조각을 포함하고 각각의 텍스트에 대해 지연 시간을 설정할 수 있는 기능을 제공합니다.

아래는 FlutterSequenceAnimation을 활용한 RichText 예시입니다.

import 'package:flutter/material.dart';
import 'package:sequence_animation/sequence_animation.dart';

class AnimatedRichText extends StatefulWidget {
  @override
  _AnimatedRichTextState createState() => _AnimatedRichTextState();
}

class _AnimatedRichTextState extends State<AnimatedRichText> {
  SequenceAnimation sequenceAnimation;
  
  @override
  void initState() {
    super.initState();

    sequenceAnimation = SequenceAnimationBuilder()
        .addAnimatable(
          animatable: ColorTween(begin: Colors.black, end: Colors.red),
          from: Duration.zero,
          to: const Duration(milliseconds: 500),
          tag: "color",
        )
        .addAnimatable(
          animatable: Tween<double>(begin: 24.0, end: 48.0),
          from: Duration.zero,
          to: const Duration(milliseconds: 500),
          tag: "size",
        )
        .animate(this);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: sequenceAnimation,
      builder: (context, child) {
        return RichText(
          text: TextSpan(
            text: "Hello ",
            style: TextStyle(
              color: sequenceAnimation["color"].value,
              fontSize: sequenceAnimation["size"].value,
            ),
            children: <TextSpan>[
              TextSpan(text: 'world!'),
            ],
          ),
        );
      },
    );
  }
}

이를 실행하면 “Hello” 텍스트가 시간에 따라 색상과 크기가 변하는 효과를 확인할 수 있습니다.

이렇게 하면 RichText 위젯을 사용하여 텍스트의 속도를 조절할 수 있습니다. 원하는 효과를 얻기 위해 위젯을 커스터마이징하여 해당 애니메이션 패키지와 함께 사용하는 방법을 살펴보세요.

이와 관련한 자세한 내용은 다음 문서를 참고하시기 바랍니다.

https://pub.dev/packages/sequence_animation