Как показать 5 минут неостанавливаемого таймера в приложении флаттера?

Question

Я хочу показать 5-минутный таймер в моем приложении, который не останавливается, даже когда приложение закрыто, и отображать оставшееся время в формате мм: сс.Как я могу показать время?

Answer 1

Вот очень очень простой пример того, как может работать такой таймер, который постоянно хранит целевое время:

class TimerApp extends StatefulWidget {
  @override
  _TimerAppState createState() => _TimerAppState();
}

class _TimerAppState extends State<TimerApp> {
  SharedPreferences prefs;
  DateTime target;
  String timeLeft = "";
  bool running = true;

  @override
  void initState() async {
    super.initState();

    prefs = await SharedPreferences.getInstance();
    target = DateTime.fromMillisecondsSinceEpoch(prefs.getInt('target'));

    if (target == null || target < DateTime.now()) {
      target = DateTime.now().add(Duration(minutes: 5));
    }
    executeTimer();
  }

  @override
  void dispose() {
    prefs.setInt('target', target.millisecondsSinceEpoch);
    running = false;
    super.dispose();
  }

  void executeTimer() async {
    while (running) {
      setState(() {
        timeLeft = DateTime.now().isAfter(target)
          ? '5 min expired. Restart app to reset.'
          : target.difference(DateTime.now()).toString();
      });
      await Future.delayed(Duration(seconds: 1), () {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Text(timeLeft),
    );
  }
}

Обратите внимание, что этот пример не очень конкретизирован;некоторые функции отсутствуют, и использование цикла while (running), вероятно, не самое элегантное решение.

Вот еще несколько ресурсов, на которые вы можете взглянуть:

• пакет shared_preferences для постоянного сохранения состояния.
• Это учебное пособие по таймеру флаттерного яйца , в котором используется более сложная форма управления состоянием.