Flutter: Perform an action when a countdown timer reaches 0

Question

I've created a screen in Flutter that displays a countdown timer. I'm able to play, pause and restart the timer, but I am trying to figure out how to perform an action when the timer reaches 0 (for example, restart itself).

As the dart file is fairly lengthy, I'm just copying below what I believe to be the relevant portions here. But I can add more if needed.

First I create a widget/class for the countdown timer:

class Countdown extends AnimatedWidget {
  Countdown({ Key key, this.animation }) : super(key: key, listenable: animation);
  Animation<int> animation;

  @override

  build(BuildContext context){
    return Text(
      animation.value.toString(),
      style: TextStyle(         
        fontSize: 120,
        color: Colors.deepOrange
      ),
    );
  }
}

I then have a stateful widget which creates the controller and also imports some data (gameData.countdownClock is the countdown timer's start time, it comes from user input at an earlier screen):


class _GameScreenState extends State<GameScreen> with TickerProviderStateMixin {

AnimationController _controller;

  _GameScreenState(this.gameData);
  GameData gameData;

  @override


  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: gameData.countdownClock),
    );
  }

And then the container that displays the clock:

Container(
                                          child: Countdown(
                                            animation: StepTween(
                                              begin: gameData.countdownClock,
                                              end: 0,
                                            ).animate(_controller),
                                          ),
                                        ),

Do I have to add a listener in that last container? Or somewhere else? (Or something else entirely!)

Any help is appreciated. Thank you

score 1 · Accepted Answer · answered Dec 25 '19 at 15:55

I found the answer on this page:

After complete the widget animation run a function in Flutter

I needed to add .addStatusListener to the animation controller in the initState().

So the new initState() code looks like this:

void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: gameData.countdownClock),
    );

    _controller.addStatusListener((status){
      if(status == AnimationStatus.completed){
        _controller.reset();
      }
    }
    );
  }

score 0 · Answer 2 · answered Dec 25 '19 at 05:36

Possible value of Animation controller is between 0 to 1. So I think you have to add listener on gamedata.countDownClock Please check the below code you might get some idea from it.

import 'dart:async';
import 'package:flutter/material.dart';

class GameScreen extends StatefulWidget {
  @override
  _GameScreenState createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> with SingleTickerProviderStateMixin {

  int countdownClock = 10;

  @override
  void initState() {
    super.initState();

    // Your Game Data Counter Change every one Second
    const oneSec = const Duration(seconds:1);
    new Timer.periodic(oneSec, (Timer t) {
      // Restart The Counter Logic
      if (countdownClock == 0)
        countdownClock = 11;
      setState(() { countdownClock = countdownClock - 1; });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("")),
      body: Center(
        child: Text('$countdownClock')
      ),
    );
  }
}

Thanks, this looks like a good solution. For my code I realized the best answer was to add `.addStatusListener` to the controller in `initState()`. — stfn3000, Dec 25 '19 at 15:56

Flutter: Perform an action when a countdown timer reaches 0

2 Answers2