I'd like to animate a text between two colors using BlocBuilder instead of a Stateful Widget

This is how I am doing it using a Stateful widget

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(
        body:Center(child:Text("HELLO!!!",textScaleFactor:3,style: TextStyle(color: color),))));
  }
}

I need an animated transition between the two colors so I can't just use :

    BlocBuilder<SubjectBloc, SubjectState>(
      builder: (context, state) {
        return Text(
          _label,
          style: TextStyle.labelSmallRegular.copyWith(
              color: state.value
                  ? Color(0xFF2EFFFF)
                  : Color(0xFF61557C),
              ),
        );

CodePudding user response：

You supposed to look at this class : AnimatedDefaultTextStyle

more explain is available at this article

SizedBox(
  height: 210,
  child: AnimatedDefaultTextStyle(
    curve: Curves.bounceOut,
    duration: const Duration(milliseconds: 350),
    style: TextStyle(
      fontSize: _fontSize,
      color: _color,
      fontWeight: FontWeight.bold,
    ),
    child: Column(
      children: [
        Image.asset(
          'assets/logo.png',
          height: _height,
          width: 280,
        ),
        const SizedBox(
          height: 10,
        ),
        const Text("Flutter Dev's"),
      ],
    ),
  ),
),