How to stop animation duration in flutter?

499

One way you can do this is by adding a listener to the animation, like so.

Countdown(
  animation: StepTween(
    begin: levelClock,
    end: 0,
  ).animate(_controller)
    ..addListener(() {
      if (_controller.value > (4 / levelClock)) {    //4 = to stop after 5 seconds
        _controller.stop();
      }
    }),
),
Share:
499
Shammah
Author by

Shammah

Updated on December 29, 2022

Comments

  • Shammah
    Shammah over 1 year

    I have here a code about decrementing timer. I want to stop the timer after 5 seconds or at a certain time. How to achieve this with flutter? Here is a sample code.

    class MyHomePage1 extends StatefulWidget {
          MyHomePage1({Key key, this.title}) : super(key: key);
        
           final String title;
         
           @override
           _MyHomePage1State createState() => _MyHomePage1State();
         }
         
         class _MyHomePage1State extends State<MyHomePage1> with TickerProviderStateMixin {
           int _counter = 0;
           AnimationController _controller;
           int levelClock = 180;
         
           void _incrementCounter() {
             setState(() {
               _counter++;
             });
           }
         
           @override
           void dispose() {
             _controller.dispose();
             super.dispose();
           }
         
           @override
           void initState() {
             super.initState();
         
             _controller = AnimationController(vsync: this, duration: Duration(seconds: levelClock) // gameData.levelClock is a user entered number elsewhere in the applciation
                 );
         
             _controller.forward();
           }
         
           @override
           Widget build(BuildContext context) {
             return Scaffold(
               appBar: AppBar(
                 title: Text(widget.title),
               ),
               body: Center(
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: <Widget>[
                     Countdown(
                       animation: StepTween(
                         begin: levelClock, // THIS IS A USER ENTERED NUMBER
                         end: 0,
                       ).animate(_controller),
                     ),
                     Text(
                       'You have pushed the button this many times:',
                     ),
                     Text(
                       '$_counter',
                       style: Theme.of(context).textTheme.headline4,
                     ),
                   ],
                 ),
               ),
               floatingActionButton: FloatingActionButton(
                 onPressed: _incrementCounter,
                 tooltip: 'Increment',
                 child: Icon(Icons.add),
               ),
             );
           }
         }
         
         class Countdown extends AnimatedWidget {
           Countdown({Key key, this.animation}) : super(key: key, listenable: animation);
           final Animation<int> animation;
         
           @override
           build(BuildContext context) {
             Duration clockTimer = Duration(seconds: animation.value);
         
             String timerText = '${clockTimer.inMinutes.remainder(60).toString()}:${clockTimer.inSeconds.remainder(60).toString().padLeft(2, '0')}';
         
             return Column(
               children: [
                 Text(
                   "$timerText",
                   style: TextStyle(
                     fontSize: 110,
                     color: Theme.of(context).primaryColor,
                   ),
                 ),
                 ),
               ],
             );
           }
         }