【Flutter】レインボーテキスト

はじめに

ゲームをクリアした時とかでユーザーを褒めてあげたい時、
「おめでとうございます」みたいなテキストを表示しますが、
これを七色レインボーに輝かせたかった。
そうしたらユーザーが喜ぶと思った。

完成品

こんな感じ。

がんばってクリアした時にこんなの表示されたら絶対うれしいですよね。

ソース

非常に無理やりな方法で実現してますごめんなさい。
うまくすれば、AnimationControllerは1つで良いと思う。

//AnimationControllerを3つ使うので、TickerProviderStateMixinをwith参照
class _Test extends State<Test> with TickerProviderStateMixin {
  //RGBそれぞれの色変更周期msecを定数で定義
  //それぞれ周期を適当にずらすといい感じになる
  static const R_DIRATION = 224;
  static const G_DIRATION = 203;
  static const B_DIRATION = 1180;

  //RGBそれぞれのAnimationController
  late AnimationController _rColorAnimationController;
  late Animation<double> _rColorValue;
  late AnimationController _gColorAnimationController;
  late Animation<double> _gColorValue;
  late AnimationController _bColorAnimationController;
  late Animation<double> _bColorValue;

  @override
  void initState() {
    //RのAnimationController設定
    _rColorAnimationController =
        AnimationController(duration: Duration(milliseconds: R_DIRATION), vsync: this);
    _rColorValue =
        Tween(begin: 0.0, end: 1.0).animate(_rColorAnimationController)
          ..addListener(() {
            setState(() {});
          });
    _rColorAnimationController.repeat(reverse: true);
    //GのAnimationController設定
    _gColorAnimationController =
        AnimationController(duration: Duration(milliseconds: G_DIRATION), vsync: this);
    _gColorValue =
        Tween(begin: 0.0, end: 1.0).animate(_gColorAnimationController)
          ..addListener(() {
            setState(() {});
          });
    _gColorAnimationController.repeat(reverse: true);
    //BのAnimationController設定
    _bColorAnimationController = AnimationController(
        duration: Duration(milliseconds: B_DIRATION), vsync: this);
    _bColorValue =
        Tween(begin: 0.0, end: 1.0).animate(_bColorAnimationController)
          ..addListener(() {
            setState(() {});
          });
    _bColorAnimationController.repeat(reverse: true);

    super.initState();
  }

  @override
  void dispose() {
    //AnimationController解放
    _rColorAnimationController.dispose();
    _gColorAnimationController.dispose();
    _bColorAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    //RGB数値を0～255の範囲で作成
    int r = (255 * _rColorValue.value).floor();
    int g = (255 * _gColorValue.value).floor();
    int b = (255 * _bColorValue.value).floor();
    return Scaffold(
      body: Container(
        child: Text("おめでとうございます！",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20,
              //テキストに色を反映
              color: Color.fromRGBO(r, g, b, 1.0),
            )),
      ),
    );
  }
}

こんなことができるぞ

がんばってクリアした時にこんなの表示されたら絶対うれしいですよね。