[Flutter]テキストを切り変えてローテーションするアニメーション

プログラミング・IT

2021.10.10

どうも、ちょげ(@chogetarou)です。

テキストを切り替えていきローテーションするアニメーションをする方法を紹介します。

方法
1. パッケージ
2. ローテーションするアニメーション

方法

パッケージ

まず、「pubspec.yaml」ファイルに次のコードを追加し、「animated_text_kit」パッケージを「pub get」します。

dependencies:
  animated_text_kit: ^4.2.1

そして、パッケージをインポートします。

import 'package:animated_text_kit/animated_text_kit.dart';

ローテーションするアニメーション

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sample'),
        ),
        body: Center(
          child: AnimatedTextKit(
              repeatForever: true,
              isRepeatingAnimation: true,
              animatedTexts: [
                RotateAnimatedText('こんにちは'),
                RotateAnimatedText('Hello'),
                RotateAnimatedText('Halo'),
              ]
            ),
        ));
  }

AnimatedTextKitウェジェットの引数「animatedTexts」にローテーションするテキストをリストで指定します。

テキストのウェジェットは、「RotateAnimatedText」を使います。

あとは、「repeatForever」と「isRepeatingAnimation」に「true」を指定すれば、完成です。