No animation on linear progress indicator when adding statuslistener

Issue

My LinearProgressIndicator does not animate forward when I add AddStatusListener. I get the build method re-rendering after the animation is completed, but there is no linear animation happening. I want the animation to run and just after it is completed I need a widget to appear, here in this case the Text widget.

Here is my code –

class _AuthenticationPageState extends State<AuthenticationPage> with TickerProviderStateMixin {

  late AnimationController controller;
  bool test = false;
    @override
      void initState() {
        controller = AnimationController(
          vsync: this,
          duration: const Duration(seconds: 5),
        )..addStatusListener((AnimationStatus status) {
          setState(() {
            if(status == AnimationStatus.completed) test = true;
          });
        });
        controller.forward();
        super.initState();
      }
    
      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Padding(
            padding: const EdgeInsets.fromLTRB(30,50,10,30),
            child: Column(
              children: [
                const Text('Hello, Welcome', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 60),),
                LinearProgressIndicator(
                  value: controller.value,
                  semanticsLabel: 'Linear progress indicator',
                ),
                if(test == true) const Text('Test is true')
              ],
            )
          ),
        );
      }

Solution

There’s nothing changing because you are not listening every tick, you’re only listening to when its done, as pskink tried to explain in the comments.

 void initState() {
        controller = AnimationController(
          vsync: this,
          duration: const Duration(seconds: 5),
        )
          ..addStatusListener((AnimationStatus status) {
            setState(() {
              if (status == AnimationStatus.completed) test = true;
            });
          })
          ..addListener(() {
            setState(() {});
          });
        controller.forward();
        super.initState();
      }

Answered By – Yasine Romdhane

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *