Flutter でテキストにアニメーションを付けて表示する方法について紹介します！
今回は、animated_text_kit パッケージを使っていきます。
パッケージのインストール
まずは、animated_text_kit パッケージをインストールしましょう。
https://pub.dev/packages/animated_text_kit
パッケージのインストール方法は、以下の記事で紹介しています。
インストール方法がわからないという方は、ご参照ください。
基本の実装
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 のクラスについて書かれたページをご参照ください。
まとめ
Flutter で、アニメーション付テキストを表示する方法について紹介しました！
以上で、【Flutter】テキストにアニメーションを付ける方法 は終わりです。
