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

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

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

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

はじめに

やりたいこと

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

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

tsubasa2q-loop
「翼ⅡQ」アプリより クイズ出題画面

これらはiOSとAndroid両方のアプリで対応しており、Swiftおよび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でタイプライタ風のテキストアニメーションを対応することができました。

詳しい説明は以下の公式動画にもあります。

なお、この後に起きた問題と解決方法については以下の記事で詳しく書かれています。


スポンサーリンク

Twitterでフォローしよう

おすすめの記事