Circularcountdowntimer doesn’t change the time when I change the page

Question

I’m new to flutter and I’m creating a fitness app for a school project. However, I have a problem with my Circularcountdowntimer, because when I press the button to change the exercise the time remains the same as what was not supposed.

What’s happening is this:

My code is this::

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

class Screen extends StatefulWidget {
  @override
  _ScreenState createState() => _ScreenState();
}

class ScreenData {
  final String title;
  final String subtitle;
  final String image;
  final int duration;

  const ScreenData(this.title, this.subtitle, this.image, this.duration);
}

class _ScreenState extends State<Screen> {
  bool startStop = true;

  static const List<ScreenData> _data = [
    ScreenData("Saltar à corda", "Próximo: Subir à cadeira",
        "assets/images/1.gif", 15),
    ScreenData("Subir à cadeira", "Próximo: Flexões",
        "assets/images/2.gif", 10),
    ScreenData(
        "Flexões", "Próximo: Abdominais", "assets/images/1.gif", 10),
    ScreenData("Abdominais", "Próximo: Prancha", "assets/images/2.gif", 10),
    ScreenData("Prancha", "", "assets/images/1.gif", 25),
  ];
  int _currentIndex = 0;
  ScreenData get _currentData => _data[_currentIndex];

  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    CountDownController _controller = CountDownController();
    return Column(children: [
    Stack(...),
    Container(
    padding: EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 20.0),
    height: size.height - 270.0,
    width: size.width,
    color: Colors.white,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Column(...),
            Padding(
            padding: const EdgeInsets.only(top: 0),
            child: CircularCountDownTimer(
              duration: _currentData.duration,
              controller: _controller,
              width: MediaQuery.of(context).size.width / 5,
              height: MediaQuery.of(context).size.height / 5,
              color: Colors.white,
              fillColor: Colors.red,
              backgroundColor: null,
              strokeWidth: 5.0,
              strokeCap: StrokeCap.butt,
              textStyle: TextStyle(
                  decoration: TextDecoration.none,
                  fontSize: 22.0,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
              isReverse: true,
              isReverseAnimation: true,
              isTimerTextShown: true,
            )),
            Row(...),
          ],
        ),
      ),
       ]);
     }
   }

Can someone help me?

Answer 1

You don’t need (and I don’t think you should) to create the controller in the function build, since she will be called several times.

I don’t know what you’re doing at the "Next" button event, but here’s mine:

ElevatedButton(
  onPressed: () {
    setState(() {
      if (++_currentIndex >= _data.length) {
        _currentIndex = 0;
      }
    });

    // Passei a duração como parâmetro.
    _controller.restart(duration: _data[_currentIndex].duration);
  },
  child: Text('Próximo')
)

The result:

Edit: The full source you can see here -> https://gist.github.com/MestreKarin/f57926b072c7f2d6abc0fec52977711c

PS. I am using null-Safety.