Flutter Animation no duration

Question

I have a stateful widget which I am attempted to transition the textStyle like below.

AnimatedDefaultTextStyle(
                duration: Duration(seconds: 3),
                child: Text(word),
                style: hideWord
                    ? TextStyle(
                        color: Colors.white,
                        fontSize: 40,
                        fontWeight: FontWeight.w300)
                    : TextStyle(
                        color: Colors.black,
                        fontSize: 40,
                        fontWeight: FontWeight.w300),
              ),

However the animation is instant and doesn't take the defined 3 seconds to complete, in fact there is no animation at all just a change from black to white text rather than the duration set in the animationDefaultTextStyle.

I am triggering the animation via the following from another stateful widget on click event.

cardlist[currentCardIndex].hideWord = true;

What am I missing here? I could implement BLOC and add a listener to the card widget and then setState, but that seems like overkill for what should be a basic trigger.

"However the animation happens as soon as the widget loads," - duration: Duration(seconds: 3) means the duration of the animation, not when it starts — pskink
Sorry, my explanation was incorrect. The transition from black to white is instant. It doesn't take 3 seconds. — Yonkee
class FooText extends StatefulWidget { @override _FooTextState createState() => _FooTextState(); } class _FooTextState extends State<FooText> { var colors = [Colors.black, Colors.orange]; var idx = 0; @override Widget build(BuildContext context) { return AnimatedDefaultTextStyle( child: InkWell( onTap: () => setState(() => idx ^= 1), child: Center(child: Text('click me')), ), style: TextStyle( color: colors[idx], fontSize: 64, ), duration: 500.milliseconds, ); } } — pskink

mohandesR mohandesR · Accepted Answer · 2020-10-02T07:00:38

if you want to start your animation 3 second after widget load .. you can use below code...

Animation Duration is one Second

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  var hideWord = true;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 3)).then((value) {
      setState(() {
        hideWord = false;
      });
    });
  }


  @override
  Widget build(BuildContext context) {

    return Scaffold(
        backgroundColor: Colors.white,
        body: AnimatedDefaultTextStyle(
          duration: Duration(seconds: 1),
          child: Text("word"),
          style: hideWord
              ? TextStyle(
              color: Colors.white,
              fontSize: 40,
              fontWeight: FontWeight.w300)
              : TextStyle(
              color: Colors.black,
              fontSize: 40,
              fontWeight: FontWeight.w300),
        ));
  }
}

Flutter Animation no duration

1 Answers