Flutter How can I use setState and only change one area and leave the other as it is?

Question

I want a page that has a timer and also displays math problems. and whenever the correct answer has been entered, a new task should appear. But the problem is that whenever a new task appears, the timer is reset. How can I prevent this ?

 late Timer timer;
  double value = 45;

  void startTimer() {
    timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (value > 0) {
        setState(() {
          value--;
        });
      } else {
        setState(() {
          timer.cancel();
        });
      }
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    startTimer();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  void userTextFieldInput() {
    controller.addListener(
      () {
        String rightResult = (firstIntValue + secondIntValue).toString();
        String userResult = controller.text;

        if (rightResult == userResult) {
          setState(() {
            DatabaseHelper(
              firstUserValue: firstIntValue,
              secondUserValue: secondIntValue,
              finalUserResult: int.parse(controller.text),
            ).setDB();

            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => const CalculatePage(),
              ),
            );
          });
        } else if (controller.text.length >= 2) {
          controller.clear();
        }
      },
    );
  }

Answer 1

You should create two different state, one for timer and another one for the problems.

You can use the package flutter bloc to manage these state easily.