【Flutter】テキストにアニメーションを付ける方法

Flutter でテキストにアニメーションを付けて表示する方法について紹介します！
今回は、animated_text_kit パッケージを使っていきます。

パッケージのインストール
基本の実装
アニメーションの種類と実装例
各 AnimatedText の設定
まとめ
おすすめ書籍

パッケージのインストール

animated_text_kit | Flutter package

A flutter package project which contains a collection of cool and beautiful text animations.

パッケージのインストール方法は、以下の記事で紹介しています。
インストール方法がわからないという方は、ご参照ください。

【Flutter】パッケージのインストール・使用方法

今回は、Flutter でパッケージをインストールする方法や使用方法などを紹介します。パッケージとは？パッケージとは、外部に公開されている便利な機能を提供するプログラムで、様々な機能を簡単に導入して利用できます。例えば、アプリ内に様々な...

基本の実装

AnimatedTextKit は、基本は以下のように実装します。
animatedTexts の中に、次の章で紹介する各 AnimatedText を入れて使用します。

AnimatedTextKit(
  animatedTexts: [
    // 任意のAnimatedText
  ],
),

以下の例では、１文字ずつ表示する TyperAnimatedText を実装しています。

AnimatedTextKit(
  animatedTexts: [
    TyperAnimatedText('Hello World!'),
  ],
),

アニメーションの種類と実装例

animated_text_kit を使用することで、様々なアニメーション付きテキストを表示できます。
どのようなアニメーションがあるか紹介していきます。

Rotate

RotateAnimatedText は、上から下に回転させながらテキストを表示できます。

AnimatedTextKit(
  animatedTexts: [
    RotateAnimatedText('おはようございます。'),
    RotateAnimatedText('こんにちは。'),
    RotateAnimatedText('こんばんは。'),
  ],
),

Fade

FadeAnimatedText は、フェードインとフェードアウトでテキストを表示できます。

AnimatedTextKit(
  animatedTexts: [
    FadeAnimatedText('おはようございます。'),
    FadeAnimatedText('こんにちは。'),
    FadeAnimatedText('こんばんは。'),
  ],
),

Typer

TyperAnimatedText は、テキストを１文字ずつ表示できます。
speed の指定は必須ではありませんが、指定しないと速すぎたため 100ms を指定しています。

AnimatedTextKit(
  animatedTexts: [
    TyperAnimatedText(
      'Hello World!',
      speed: const Duration(milliseconds: 100),
    ),
  ],
),

Typewriter

TypewriterAnimatedText は、タイプライターで入力したようにテキストを１文字ずつ表示できます。
こちらも speed の指定は必須ではありませんが、指定しないと速すぎたため 100ms を指定しています。

AnimatedTextKit(
  animatedTexts: [
    TypewriterAnimatedText(
      'Hello World!',
      speed: const Duration(milliseconds: 100),
    ),
  ],
),

Scale

ScaleAnimatedText は、スケールアップおよびスケールダウンさせてテキストを表示できます。

AnimatedTextKit(
  animatedTexts: [
    ScaleAnimatedText('おはようございます。'),
    ScaleAnimatedText('こんにちは。'),
    ScaleAnimatedText('こんばんは。'),
  ],
),

Colorize

ColorizeAnimatedText は、色を変化させながらテキストを表示できます。

AnimatedTextKit(
  animatedTexts: [
    ColorizeAnimatedText('Hello World!',
      textStyle: const TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
      colors: [
        Colors.purple,
        Colors.blue,
        Colors.yellow,
        Colors.red,
      ],
    ),
  ],
),

TextLiquidFill

TextLiquidFill は、テキストが液体で満たされるように表示できます。
他のアニメーションと違い、AnimatedTextKit の Widget を使用しません。

TextLiquidFill(
  text: 'おはようございます。',
  textStyle: const TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
  ),
),

Wavy

WavyAnimatedText は、波打たせながらテキストを表示できます。

AnimatedTextKit(
  animatedTexts: [
    WavyAnimatedText('おはようございます。'),
    WavyAnimatedText('こんにちは。'),
    WavyAnimatedText('こんばんは。'),
  ],
),

Flicker

FlickerAnimatedText は、点滅させながらテキストを表示できます。

AnimatedTextKit(
  animatedTexts: [
    FlickerAnimatedText('おはようございます。'),
    FlickerAnimatedText('こんにちは。'),
    FlickerAnimatedText('こんばんは。'),
  ],
),

各 AnimatedText の設定

各 AnimatedText のプロパティで、設定をカスタマイズすることができます。
例えば、TyperAnimatedText では、テキストのスタイルやアニメーションのスピードなどを変更できます。
詳しくは、以下のページから、各 AnimatedText のクラスについて書かれたページをご参照ください。