【Flutter】タイプライタのようなアニメーションで徐々にテキストを表示させる方法

2024年8月5日 2024年8月6日

Textの文字列を段階的に表示する方法

アニメーションのように文字列を時間差で徐々に表示する方法

ヒーラー

Flutterを使ってiOS/Android共通的にクイズ番組の問題文のアニメーションのように、少しずつテキストを表示するようにしたい

はじめに

やりたいこと

クイズアプリをFlutterで作るのにあたり、タイプライターのようにテキストを１文字ずつ徐々に表示する必要がありました。
テキストに動きを付けることで、伝えたいメッセージを強調したり注目を得ることができます。

以下は従来のクイズの問題文を表示する際に、問題を読み上げているような雰囲気を出す具体例です。
文字列を一発で表示するよりもクイズの臨場感が表現することができます。

これらはiOSとAndroid両方のアプリで対応しており、SwiftおよびKotlinでの対応方法としては以下の記事にあります。

【iOS】テレビのクイズ問題テロップのように1文字ずつテキスト表示する方法（Swift）

【Android】タイプライターのように1文字ずつ表示するTextViewを作る方法（Kotlin）

対処方法

Flutterのパッケージ「animated_text_kit」を使用することで解決できました。

https://pub.dev/packages/animated_text_kit

以下のサンプルコードのとおり、AnimatedTextKitのanimatedTextsの中に、TypewriterAnimatedText()を追加すれば、タイプライタ風のアニメーションのテキストを表示することができます。

return SizedBox(
  width: 250.0,
  child: DefaultTextStyle(
    style: const TextStyle(
      fontSize: 30.0,
      fontFamily: 'Agne',
    ),
    child: AnimatedTextKit(
      animatedTexts: [
        TypewriterAnimatedText('Discipline is the best tool'),
        TypewriterAnimatedText('Design first, then code'),
        TypewriterAnimatedText('Do not patch bugs out, rewrite them'),
        TypewriterAnimatedText('Do not test bugs out, design them out'),
      ],
      onTap: () {
        print("Tap Event");
      },
    ),
  ),
);

サンプルでは複数のテキストを順番にタイプライタ風に表示していますが、今回は1つのテキストのみを表示したいので以下のとおりです。

アニメーションのリピート回数がデフォルト3回なのですが、今回は1度きりでよいため、AnimatedTextKitのtotalRepeatCountプロパティは1に指定しています。

また、タイプライタ風のアニメーションのため、デフォルトではアニメーションが進むごとにテキスト末尾にカーソルが表示されます。今回はこの演出も不要だったため、TypewriterAnimatedTextのcursorプロパティを空文字にしています。

return Container(
  alignment: Alignment.centerLeft,
  child: AnimatedTextKit(
    animatedTexts: [
      TypewriterAnimatedText(
        questionText,
        textStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),
        speed: const Duration(milliseconds: 100),
        cursor: '',
      ),
    ],
    totalRepeatCount: 1,
  ),
),

これで以下のようにFlutterでタイプライタ風のテキストアニメーションを対応することができました。