【Flutter】簡単にアニメーション付きのテキスト(animated_text_kit)を実装する方法について解説

2024年2月26日2024年4月2日

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

animated_text_kitパッケージを使用したアニメーション付きテキストの基本的な実装方法
タイピングアニメーションの実装方法
フェードアニメーションの実装方法

開発環境

Dart 3.0.0
Flutter 3.10.0
animated_text_kit 4.2.2

アニメーション付きテキスト表示の事前準備

`animated_text_kit` パッケージの追加

まずはじめに、animated_text_kitパッケージをプロジェクトに追加する必要があります。これを行うには、プロジェクトのpubspec.yamlファイルを編集し、以下の依存関係を追加します。

dependencies:
  flutter:
    sdk: flutter
  animated_text_kit: ^4.2.2

このコードは、Flutterプロジェクトにanimated_text_kit パッケージのバージョン 4.2.2を追加するためのものです。pubspec.yamlファイルにこの依存関係を記述した後、ターミナルまたはコマンドプロンプトでflutter pub getコマンドを実行して、パッケージをプロジェクトにインストールします。

基本的なアニメーション付きテキストの実装

概要

animated_text_kitを使用すると、簡単に様々なアニメーション付きテキストを実装することができます。ここでは、基本的なテキストアニメーションの一つとして、「ウィンク」アニメーションの実装方法を紹介します。

サンプルコード

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: Text('Animated Text Kit Demo'),
        ),
        body: Center(
          child: AnimatedTextKit(
            animatedTexts: [
              WavyAnimatedText('こんにちは、Flutter!'),
            ],
            isRepeatingAnimation: true,
            onTap: () {
              print("Tap Event");
            },
          ),
        ),
      ),
    );
  }
}

サンプルコードの解説

このサンプルコードでは、WavyAnimatedTextを使用して「こんにちは、Flutter!」というテキストにウェーブアニメーションを適用しています。主なポイントは以下の通りです。

import文でanimated_text_kitパッケージをインポートしています（1-2行目）。
AnimatedTextKitウィジェットを使用して、アニメーション付きテキストを定義しています（14-22行目）。
animatedTextsプロパティにWavyAnimatedTextを設定し、表示するテキストを指定しています（16-18行目）。
isRepeatingAnimation: trueを設定することで、アニメーションを繰り返し実行させています（19行目）。
onTapプロパティを使用して、テキストアニメーションをタップした際のイベントを定義しています（20-22行目）。

動作確認

いちの

それでは、動作を確認してみましょ〜

タイピングアニメーションの実装

概要

タイピングアニメーションは、テキストがタイプされているかのように一文字ずつ表示されるアニメーションです。animated_text_kitではTyperAnimatedTextを使用して、このようなアニメーションを実装することができます。

サンプルコード

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: Text('タイピングアニメーションデモ'),
        ),
        body: Center(
          child: AnimatedTextKit(
            animatedTexts: [
              TyperAnimatedText(
                '一文字ずつ表示されます。',
                textStyle: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
                speed: Duration(milliseconds: 100),
              ),
            ],
            totalRepeatCount: 4,
            pause: Duration(milliseconds: 1000),
            displayFullTextOnTap: true,
            stopPauseOnTap: true,
          ),
        ),
      ),
    );
  }
}

サンプルコードの解説

TyperAnimatedTextをanimatedTextsプロパティに設定しています。これにより、テキストが一文字ずつ表示されるアニメーションが実現されます（17-21行目）。
textStyleプロパティでテキストのスタイル（フォントサイズ、太字）を設定しています（19行目）。
speedプロパティで各文字の表示速度を設定しています（20行目）。
totalRepeatCountでアニメーションの繰り返し回数を設定しています（23行目）。
pauseでアニメーションの間の一時停止時間を設定しています（24行目）。

動作確認

いちの

それでは、動作を確認してみましょ〜

フェードアニメーションの実装

概要

フェードアニメーションは、テキストが徐々に現れたり消えたりするアニメーションです。FadeAnimatedTextKitを使用して、このようなアニメーションを実装します。

サンプルコード

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: Text('フェードアニメーションデモ'),
        ),
        body: Center(
          child: AnimatedTextKit(
            animatedTexts: [
              FadeAnimatedText('フェードイン'),
              FadeAnimatedText('そして'),
              FadeAnimatedText('フェードアウト'),
            ],
            repeatForever: true,
          ),
        ),
      ),
    );
  }
}

サンプルコードの解説

FadeAnimatedTextを使用して、テキストにフェードインとフェードアウトのアニメーションを適用しています（17-19行目）。
animatedTextsプロパティに複数のFadeAnimatedTextを設定することで、複数のテキストにフェードアニメーションを適用しています。
repeatForever: trueを設定することで、アニメーションを無限に繰り返します（21行目）。

動作確認

いちの

それでは、動作を確認してみましょ〜

まとめ

いかがでしたでしょうか？今回は、簡単にアニメーション付きのテキスト(animated_text_kit)を実装する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。