hi i'm new to flutter and i'm trying to make this work but i encountered some problem. The problem is when i press the button to start the timer the timer work but then when i switch pages (i.e to my home page) and i go back to the timer page the timer restart from the start how do i fix this. Thank you.

here are the codes for the controller

  late AnimationController animationController; 

and here are the custom timer controller codes

        padding: const EdgeInsets.fromLTRB(30, 0, 80, 0),
                   child: CustomTimer(
                       from: const Duration(days: 14),
                       to: const Duration(seconds: 0),
                       controller: timerController,
                       builder: (CustomTimerRemainingTime remaining) {
                         return Text(
                             "Semangat!\nHanya\n${remaining.days} Hari ${remaining.hours} jam ${remaining.minutes} Menit",
                             style: (const TextStyle(
                               color: Color.fromRGBO(227, 248, 251, 1),
                               fontSize: 26,
                               fontFamily: 'Kanit',
                             )));
                       })), 

and the button that i use to start the countdown

                padding: const EdgeInsets.fromLTRB(30, 0, 80, 0),
                child: ElevatedButton(
                    onPressed: () {
                      timerController.start();
                      animationController.forward();
                      animationController.dispose();
                    },
                    child: const Text("Start ISOMAN",
                        style: TextStyle(
                            fontFamily: 'kanit', color: Colors.white)))) 

and here are my full codes

import 'package:custom_timer/custom_timer.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/widgets.dart';
import 'bottom_nav_screen.dart';
import 'dart:math' as math;

class Timer extends StatefulWidget {
  const Timer({Key? key}) : super(key: key);

  @override
  _TimerState createState() => _TimerState();
}

class _TimerState extends State<Timer> with TickerProviderStateMixin {
  late CustomTimerController timerController = CustomTimerController();
  late AnimationController animationController;

  @override
  void initState() {
    animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 4000),
    );

    super.initState();
    animationController.addListener(() {
      setState(() {
        if (animationController.status == AnimationStatus.completed) {
          animationController.repeat();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          scaffoldBackgroundColor: const Color.fromRGBO(73, 97, 222, 100)),
      home: Scaffold(
          body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Padding(
                padding: const EdgeInsets.fromLTRB(0, 30, 350, 0),
                child: IconButton(
                    color: Colors.white,
                    onPressed: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const BottomNavScreen()));
                    },
                    icon: const Icon(Icons.arrow_back))),
            Padding(
                padding: const EdgeInsets.fromLTRB(30, 0, 80, 0),
                child: CustomTimer(
                    from: const Duration(days: 14),
                    to: const Duration(seconds: 0),
                    controller: timerController,
                    builder: (CustomTimerRemainingTime remaining) {
                      return Text(
                          "Semangat!\nHanya\n${remaining.days} Hari ${remaining.hours} jam ${remaining.minutes} Menit",
                          style: (const TextStyle(
                            color: Color.fromRGBO(227, 248, 251, 1),
                            fontSize: 26,
                            fontFamily: 'Kanit',
                          )));
                    })),
            Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: AnimatedBuilder(
                  animation: animationController,
                  builder: (_, child) {
                    return Transform.rotate(
                      angle: animationController.value * 2 * math.pi,
                      child: child,
                    );
                  },
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Image.asset('assets/images/timerpage/hourglass1.png'),
                    ],
                  ),
                )),
            const Padding(
                padding: EdgeInsets.fromLTRB(30, 10, 100, 0),
                child: Text(
                  "Sampai Isolasi Mandiri \nSelesai",
                  style: TextStyle(
                    color: Color.fromRGBO(227, 248, 251, 1),
                    fontWeight: FontWeight.bold,
                    fontSize: 24,
                    fontFamily: 'Kanit',
                  ),
                )),
            Padding(
                padding: const EdgeInsets.fromLTRB(30, 0, 80, 0),
                child: ElevatedButton(
                    onPressed: () {
                      timerController.start();
                      animationController.forward();
                      animationController.dispose();
                    },
                    child: const Text("Start ISOMAN",
                        style: TextStyle(
                            fontFamily: 'kanit', color: Colors.white))))
          ],
        ),
      )),
    );
  }
}

CodePudding user response：

The state doesn't preserve when you navigate back to the previous page. It gets disposed.

You can store the controller in the state of the previous widget, and pass it as a parameter to the Timer widget.

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  late CustomTimerController timerController = CustomTimerController();
  late AnimationController animationController;

  ...init

  @override
  Widget build(BuildContext context) {
    // Then you would be able to init Timer:
    // final timer = Timer(timerController: timerController, animationController: animationController);
    return ...;
  }
}

class Timer extends StatelessWidget {
  final CustomTimerController timerController;
  final AnimationController animationController;

  const Timer({ Key? key, required this.timerController, required this.animationController, }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ...;
  }
}