I want to convert my flutter timer output to MM:SS format

Question

So below is my timer function and its output (all within the same page) and I would like any help in just figuring out how I would change the output into miniutes and seconds. As it currently stands it is only in seconds.

class _TimerPageState extends State<TimerPage> {
  int _counter = 0;
  Timer _timer;
  bool _vibrationActive = false;

  void _startTimer() {
    _counter = Duration(minutes: 25).inMinutes;
    if (_timer != null) {
      _timer.cancel();
    }
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        if (_counter > 0) {
          _counter--;
        } else {
          _timer.cancel();
          vibrate();
          print(
              "I'm picking up good vibrations"); //test print to chceck if method gets past vibartion
        } //meaning that vibration function is called and working
      });
    });
  }

and here is where it is output

Widget _buildVerticalLayout(_counter, _startTimer, _pauseTimer) {
  return Scaffold(
    body: Padding(
      padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 60.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Text(
            'Pomo Timer',
            style: TextStyle(
                color: Colors.black,
                fontSize: 40.0,
                fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 140.0),
          Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              (_counter > 0) ? Text("") : Text("5 minute break!",
                      style: TextStyle(
                        color: Colors.green,
                        fontWeight: FontWeight.bold,
                        fontSize: 48,
                      ),
                    ),
              Text(
                '$_counter',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 48,
                ),
              ),
              ElevatedButton(
                onPressed: () => _startTimer(),
                child: Text("Pomo Start"),
              ),
              ElevatedButton(
                onPressed: () {
                  _pauseTimer();
                },
                child: Text("Pomo Pasue"),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

I am just at a loss based on everything I've read so far, I think I'm just looking at this too closely. I do hope this isn't just a repeat question and I'll have wasted time. Cheers to whoever responds!

Answer 1

As @mkobuolys points out, you’re converting a duration of 25 minutes into an integer of 25 and then subtracting from it every second. So I’m going to assume you meant to convert that to seconds (you could just do minutes*60).

To provide an alternative, a simple way to handle this yourself is with the built-in dart:math functions and a tiny bit of simple math:

'${(seconds/60).floor()}:'+'${seconds%60}'.padLeft(2, '0')

Or if you want the trailing zero in the minutes section:

'${(seconds/60).floor()}'.padLeft(2, '0')+':'+'${seconds%60}'.padLeft(2, '0')

You’re getting the minutes by dividing the seconds by 60 (seconds/60), then using floor to remove the remainder. Then you get the seconds by getting the previously discarded remainder with the modulo operator (seconds%60). Finally, you use padLeft to provide the trailing zero if the number is a single digit.

Answer 2

I would recommend you keeping the _counter value as a Duration object:

  void _startTimer() {
    _counter = Duration(minutes: 25);
    ...
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        if (_counter > 0) {
          _counter -= Duration(seconds: 1);
        } else {
          ...
        }
      });
    });
  }

Then, in your UI, you could use Duration class methods to achieve your goal:

Widget _buildVerticalLayout(_counter, _startTimer, _pauseTimer) {
  final minutes = _counter.inMinutes;
  final seconds = _counter.inSeconds - minutes * Duration.secondsPerMinute;

  ...
  Text(
    '$minutes:$seconds',
    style: TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 48,
    ),
  ),
  ...
}