Flutterでテキストにタイピングアニメーションをつける

はじめに

本記事ではanimated_text_kitパッケージを利用して、タイピングアニメーションのついたテキストを作成してみます。

作るもの

以下のようにタイピングアニメーション付きのテキストを表示します。

環境

Flutter 3.22.1

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

animated_text_kit をインストールします。

flutter pub add animated_text_kit

ソース

AnimatedTextKitウィジェットを使ってタイピングアニメーションを適用したテキストを表示します。
テキストのアニメーションは2回繰り返され、各表示の間に1秒の一時停止を設定。
タップするとアニメーションがスキップされ、全てのテキストが即座に表示されます。

main.dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('サンプル画面'),
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Align(
                alignment: Alignment.center,
                child: SizedBox(
                  width: 250.0,
                  child: DefaultTextStyle(
                    style: const TextStyle(
                      fontSize: 19.0,
                      color: Colors.black,
                    ),
                    child: AnimatedTextKit(
                      animatedTexts: [
                        TyperAnimatedText(
                          'サンプルアニメーションです',  // アニメーションをつけるテキスト
                          textAlign: TextAlign.center,
                        ),
                      ],
                      totalRepeatCount: 2, // アニメーションの繰り返し回数を設定
                      pause: const Duration(
                          milliseconds: 1000), // アニメーションの各テキスト間の一時停止時間
                      displayFullTextOnTap: true, // タップで全テキスト表示
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

動かしてみる

デバッグして確認すると、次のようにタイピングアニメーションのついたテキストが表示できている事を確認できます。

参考