如何在颤振应用程序中显示 5 分钟不可停止的计时器？

Question

我想在我的应用程序中显示一个 5 分钟计时器，即使应用程序关闭也不会停止，并以 mm:ss 格式显示剩余时间。如何显示时间？

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 package 用于持久保存状态。
• 这个Fluttery egg timer tutorial 使用更复杂的状态管理形式。