Introducing the Stopwatch class

The Stopwatch class (from dart:core) provides much of the functionality needed for this feature, as shown in this small command-line application:

main() {
  Stopwatch sw = new Stopwatch();
  sw.start();
  print(sw.elapsed);
  sw.stop();
  print(sw.elapsed);
}

The elapsed property can be checked at any time to give the current duration. This is a very useful class as, for example, it can be used to compare different functions to see which is the fastest.

Implementing the presentation timer

The clock will be stopped and started with a single button handled by the toggleTimer method. A recurring timer will update the duration text on the screen, as follows:

If the timer is running, the update Timer and the Stopwatch in the field slidesTime is stopped. No update to the display is required as the user will need to see the final time:

void toggleTimer(Event event) {
  if (slidesTime.isRunning) {
    slidesTime.stop();
    updateTimer.cancel();
  } else {
    updateTimer = new Timer.periodic(new Duration(seconds: 1), (timer) {
      String seconds = (slidesTime.elapsed.inSeconds % 60).toString();
      seconds = seconds.padLeft(2, "0");
      timerDisplay.text = "${slidesTime.elapsed.inMinutes}:$seconds";
    });

    slidesTime
    ..reset()
    ..start();
  }
}

The Stopwatch class provides properties for retrieving the elapsed time in minutes and seconds. To format this to minutes and seconds, the seconds portion is determined with the modular division operator % and padded with the string function padLeft.

Dart's string interpolation feature is used to build the final string, and as the elapsed and inMinutes properties are being accessed, the {} brackets are required so that the single value is returned.