Flutter 在提供程序包更改通知程序中构建倒计时时钟

我已经构建了一个工作倒计时时钟，它以小时:分钟:秒的格式显示剩余时间.在有状态窗口小部件中.它使用全屏墨水池来启动和停止它. 我想要做的是将此代码传输到更改通知程序.(我已经安装了一个名为Countdown Timers的更改通知程序)，这样我就可以在应用程序的多个页面上看到这个倒计时.

以下是有状态小部件中工作倒计时时钟的代码:

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

  @override
  State<ChessClock2> createState() => _ChessClock2State();
}

class _ChessClock2State extends State<ChessClock2> {
  static const countdownDuration = Duration(hours: 5, minutes: 10, seconds: 10);
  Duration duration = Duration();
  Timer? timer;

  bool beenPressed = false;

  @override
  void initState() {
    super.initState();
    Reset();
  }

  void Reset() {
    setState(() => duration = countdownDuration);
  }

  void AddTime() {
    final minusSeconds = -1;
    setState(() {
      final seconds = duration.inSeconds + minusSeconds;
      if (seconds < 0) {
        timer?.cancel();
      } else {
        duration = Duration(seconds: seconds);
      }
    });
  }

  void StartTimer() {
    timer = Timer.periodic(
      Duration(seconds: 1),
      (_) => AddTime(),
    );
  }

  void StopTimer() {
    setState(() => timer?.cancel());
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: InkWell(
          onTap: () {
            setState(() {
              beenPressed = !beenPressed;
            });
            beenPressed ? StartTimer() : StopTimer();
          },
          child: Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
              color: beenPressed ? kOrange : kBlueGrey900,
              borderRadius: BorderRadius.circular(30),
            ),
            child: Center(
              child: TimeDisplay(),
            ),
          ),
        ),
      ),
    );
  }

  Widget TimeDisplay() {
    String twoDigits(int n) => n.toString().padLeft(2, '0');
    final hours = twoDigits(
      duration.inHours.remainder(60),
    );
    final minutes = twoDigits(
      duration.inMinutes.remainder(60),
    );
    final seconds = twoDigits(
      duration.inSeconds.remainder(60),
    );
    return Text(
      '$hours:$minutes:$seconds',
      style: TextStyle(fontSize: 50),
    );
  }
}

当我传输代码时，我遇到了麻烦，因为我不能在更改通知程序中使用setState，而且我不确定如何转换代码以使其工作. 到目前为止，通过移动各个变量以及小部件TimDisplay，我能够让计时器从更改通知器中正确显示，但不确定如何从更改通知器中使其工作. 这就是我现在的处境:

type hereclass ChessClock3 extends StatefulWidget {
  const ChessClock3({Key? key}) : super(key: key);

  @override
  State<ChessClock3> createState() => _ChessClock3State();
}

class _ChessClock3State extends State<ChessClock3> {
  @override
  void initState() {
    super.initState();
    Reset();
  }

  void Reset() {
    setState(() => duration = countdownDuration);
  }

  void AddTime() {
    final minusSeconds = -1;

    setState(() {
      final seconds = duration.inSeconds + minusSeconds;
      if (seconds < 0) {
        timer?.cancel();
      } else {
        duration = Duration(seconds: seconds);
      }
    });
  }

  void StartTimer() {
    timer = Timer.periodic(
      Duration(seconds: 1),
      (_) => AddTime(),
    );
  }

  void StopTimer() {
    setState(() => timer?.cancel());
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: InkWell(
          onTap: () {
            setState(() {
              context.read<CountdownTimers>().BeenPressed();
            });
            context.read<CountdownTimers>().beenPressed
                ? StartTimer()
                : StopTimer();
          },
          child: Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
              color: context.watch<CountdownTimers>().beenPressed
                  ? kKillTeamOrange
                  : kBlueGrey900,
              borderRadius: BorderRadius.circular(30),
            ),
            child: Center(
              child: context.read<CountdownTimers>().TimeDisplay(),
            ),
          ),
        ),
      ),
    );
  }
}

class CountdownTimers with ChangeNotifier {
  Duration _countdownDuration = Duration(hours: 5, minutes: 10, seconds: 10);
  Duration _duration = Duration();
  Timer? timer;
  bool _beenPressed = false;

  Duration get countdownDuration => _countdownDuration;
  Duration get duration => _duration;
  bool get beenPressed => _beenPressed;

  void BeenPressed() {
    _beenPressed = !_beenPressed;
  }

  Widget TimeDisplay() {
    String twoDigits(int n) => n.toString().padLeft(2, '0');
    final hours = twoDigits(
      _duration.inHours.remainder(60),
    );
    final minutes = twoDigits(
      _duration.inMinutes.remainder(60),
    );
    final seconds = twoDigits(
      _duration.inSeconds.remainder(60),
    );
    return Text(
      '$hours:$minutes:$seconds',
      style: TextStyle(fontSize: 50),
    );
  }
}

如果有人能告诉我如何翻译代码，将不胜感激. 非常感谢！