Search code examples
flutterbloc

Change & animate a text color between two values using Bloc


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),
              ),
        );

Solution

  • 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"),
          ],
        ),
      ),
    ),