【Flutter】AnimatedTextKitでテキストが更新されない問題の解決方法

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

AnimatedTextKitパッケージでTextの文字列が変わらない場合に対処法

AnimatedTextKitのテキストを更新する方法

ヒーラー

FlutterのAnimatedTextKitを使ってiOS/Android共通的にテキストを1文字ずつ表示するアニメーションの対応をしたが、テキストを変更しても更新されない

はじめに

以下の記事のとおり、クイズアプリをFlutterで作るのにあたり、AnimatedTextKitを使ってタイプライターのようにテキストを１文字ずつ徐々に表示する対応をしました。

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

AnimatedTextKitパッケージ：
https://pub.dev/packages/animated_text_kit/

しかし、１度目のアニメーションはいいのですが、２度目以降、同じAnimatedTextKitを使ってテキストだけ変更して画面のリビルドがされても、アニメーションが発動せず、テキストも変わりません。

問題点

以下のとおり、次の問題に進んでも、問題文が更新されずに、そのまま残ってしまいます。
問題文のテキストは更新され、描画リビルド時にはきちんと渡ってきていることは確認できています。

この際のソースコードは以下のとおりです。

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,
  ),
),

このquestionTextが更新されても、AnimatedTextKitの描画は更新されません。
リピート回数を1にしているせいかと思い、totalRepeatCountを変えてみましたが解決しません。

questionTextが変化しても、どうやらAnimatedTextKitはそれを検知して再構築してはくれないようです。

対処方法

AnimatedTextKitはStatefulWidgetを継承しているのですが、どうやらanimatedTextsの中のAnimatedTextのテキストが変わったとしても、AnimatedTextKitのsetStateは反応せず、更新はされないようです。

したがって、AnimatedTextKitを強制的に更新させる必要があります。
そのため、AnimatedTextKitのKeyを利用します。

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

上記のコードのとおり、AnimatedTextKitのkeyプロパティにValueKey<String>(questionText)として、テキストをKeyにさせて、AnimatedTextKitを再構築させます。

これにより、次の問題に進んだ際に、テキストが更新されてアニメーションされることが確認できました。