Как оживить цвет текста с помощью трепетания нескольких цветов

Question

Я хочу, чтобы мой текст анимировался с помощью нескольких цветов при дрожании, как я могу это сделать.

Answer 1

В приведенном ниже примере анимация цвета текста в диапазоне цветов.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{
  AnimationController controller;
  Animation animation;
  Color color;

  @override
  @mustCallSuper
  void initState() {
    super.initState();
    controller=AnimationController(
      vsync: this,
      duration: Duration(seconds: 5)
    );
    animation=ColorTween(begin:Colors.red,end: Colors.white).animate(controller);

    animation.addListener((){
      setState(() {
        color=animation.value;
      });
    });

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {

    return MaterialApp(home:Scaffold(

        appBar: AppBar(title: Text("Example")),
        body:Center(child:Text("HELLO!!!",textScaleFactor:3,style: TextStyle(color: color),))));
  }
}

Answer 2

Ответ Пабло (с использованием ColorTween) будет анимировать цвет между двумя значениями. Для перехода между несколькими цветами вы можете адаптировать это решение либо к

• построению «TweenSequence», объединяющему несколько цветовых переходов.
• используйте RainbowColor , что упрощает переход между несколькими цветами

См. мою статью Многоцветные переходы во Flutter , чтобы узнать, как это сделать.

Для справки, вот многоцветный (B-> G-> R) виджет с анимированным текстом с использованием RainbowColor.

class ColorText extends StatefulWidget {
  const ColorText({
    Key key,
  }) : super(key: key);

  @override
  _ColorTextState createState() => _ColorTextState();
}

class _ColorTextState extends State<ColorText>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Color> _colorAnim;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: Duration(seconds: 3), vsync: this);
    _colorAnim = RainbowColorTween([Colors.blue, 
                                    Colors.green, 
                                    Colors.red, 
                                    Colors.blue])
            .animate(controller)
              ..addListener(() { setState(() {}); })
              ..addStatusListener((status) {
                if (status == AnimationStatus.completed) {
                  controller.reset();
                  controller.forward();
                } else if (status == AnimationStatus.dismissed) {
                  controller.forward();
                }
              });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Text("Hello!", style: TextStyle(color: _colorAnim.value));
  }
}