我使用了倒数计时器的基本代码,并想知道如何让用户自定义他们想要的时间量,而不是将其设为默认值(在我的情况下为30分钟或1800秒).我只想让他们 Select 他们想要的任何时间,比如5分钟、30分钟、1小时等等.单击该按钮后,可能会出现另一个按钮,或者可能会出现一个弹出窗口,让他们 Select 时间?老实说,在这一点上有任何帮助,谢谢!

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

  @override
  State<timer> createState() => _timerState();
}

class _timerState extends State<timer> {
   final int _duration = 1800;
  final CountDownController _controller = CountDownController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: CircularCountDownTimer(
        // Countdown duration in Seconds.
        duration: _duration,

        // Countdown initial elapsed Duration in Seconds.
        initialDuration: 0,

        // Controls (i.e Start, Pause, Resume, Restart) the Countdown Timer.
        controller: _controller,

        // Width of the Countdown Widget.
        width: MediaQuery.of(context).size.width / 2,

        // Height of the Countdown Widget.
        height: MediaQuery.of(context).size.height / 2,

        // Ring Color for Countdown Widget.
        ringColor: Colors.grey[300]!,

        // Ring Gradient for Countdown Widget.
        ringGradient: null,

        // Filling Color for Countdown Widget.
        fillColor: Color(0XFFffadad),

        // Filling Gradient for Countdown Widget.
        fillGradient: null,

        // Background Color for Countdown Widget.
        backgroundColor: Color(0XFFFDE2E4),

        // Background Gradient for Countdown Widget.
        backgroundGradient: null,

        // Border Thickness of the Countdown Ring.
        strokeWidth: 20.0,

        // Begin and end contours with a flat edge and no extension.
        strokeCap: StrokeCap.round,

        // Text Style for Countdown Text.
        textStyle: const TextStyle(
          fontSize: 33.0,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),

        // Format for the Countdown Text.
        textFormat: CountdownTextFormat.S,

        // Handles Countdown Timer (true for Reverse Countdown (max to 0), false for Forward Countdown (0 to max)).
        isReverse: false,

        // Handles Animation Direction (true for Reverse Animation, false for Forward Animation).
        isReverseAnimation: false,

        // Handles visibility of the Countdown Text.
        isTimerTextShown: true,

        // Handles the timer start.
        autoStart: false,

        // This Callback will execute when the Countdown Starts.
        onStart: () {
          // Here, do whatever you want
          debugPrint('Countdown Started');
        },

        // This Callback will execute when the Countdown Ends.
        onComplete: () {
          // Here, do whatever you want
          debugPrint('Countdown Ended');
        },
      )),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const SizedBox(
            width: 30,
          ),
          _button(title: "Start", onPressed: () => _controller.start()),
          const SizedBox(
            width: 10,
            height: 200
          ),
          _button(title: "Pause", onPressed: () => _controller.pause()),
          const SizedBox(
            width: 10,
            height: 200
          ),
          _button(title: "Resume", onPressed: () => _controller.resume()),
          const SizedBox(
            width: 10,
            height: 200
          ),
          _button(title: "Restart",onPressed: () => _controller.restart(duration: _duration)),
          const SizedBox(
            width: 10,
            height: 200
          ),
        ],
      ),
    );
  }

  Widget _button({required String title, VoidCallback? onPressed}) {
    return Expanded(
        child: ElevatedButton(
      child: Text(
        title,
        style: const TextStyle(color: Colors.white),
      ),
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Color(0XFFBCD4E6)),
      ),
      onPressed: onPressed,
    ));
  }
}

推荐答案

基本上,"启动/重启"要使用的是

_controller.restart(duration: (_duration).round()),
          

判断此示例:

import 'package:circular_countdown_timer/circular_countdown_timer.dart';
import 'package:flutter/material.dart';

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

  @override
  State<TimerWidget> createState() => _TimerWidgetState();
}

class _TimerWidgetState extends State<TimerWidget> {
  double _duration = 10;
  final CountDownController _controller = CountDownController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Slider(
            min: 1,
            max: 20,
            divisions: 9,
            label: _duration.round().toString(),
            value: _duration,
            onChanged: (value) {
              setState(() {
                _duration = value;
              });
            },
          ),
          getCircularCountDownTimer(),
          Row(
            children: [
              _button(
                title: "Start",
                onPressed: () =>
                    _controller.restart(duration: (_duration).round()),
              ),
              const SizedBox(width: 10, height: 200),
              _button(
                title: "Pause",
                onPressed: () => _controller.pause(),
              ),
              const SizedBox(width: 10, height: 200),
              _button(
                title: "Resume",
                onPressed: () => _controller.resume(),
              ),
              const SizedBox(width: 10, height: 200),
              _button(
                title: "Restart",
                onPressed: () =>
                    _controller.restart(duration: (_duration).round()),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _button({required String title, VoidCallback? onPressed}) {
    return Expanded(
      child: ElevatedButton(
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(const Color(0XFFBCD4E6)),
        ),
        onPressed: onPressed,
        child: Text(
          title,
          style: const TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  CircularCountDownTimer getCircularCountDownTimer() {
    return CircularCountDownTimer(
      duration: (_duration).round(),
      initialDuration: 0,
      controller: _controller,
      width: MediaQuery.of(context).size.width / 2,
      height: MediaQuery.of(context).size.height / 2,
      ringColor: Colors.grey[300]!,
      ringGradient: null,
      fillColor: Color(0XFFffadad),
      fillGradient: null,
      backgroundColor: Color(0XFFFDE2E4),
      backgroundGradient: null,
      strokeWidth: 20.0,
      strokeCap: StrokeCap.round,
      textStyle: const TextStyle(
        fontSize: 33.0,
        color: Colors.white,
        fontWeight: FontWeight.bold,
      ),
      textFormat: CountdownTextFormat.S,
      isReverse: false,
      isReverseAnimation: false,
      isTimerTextShown: true,
      autoStart: false,
      onStart: () {
        debugPrint('Countdown Started');
      },
      onComplete: () {
        debugPrint('Countdown Ended');
      },
    );
  }
}

您还可以将\u持续时间作为参数传递给计时器小部件

Flutter相关问答推荐

错误:找不到字体功能类型.Ffltter Google_Fonts包错误

DART 3.3:为什么扩展类型不起作用?

如何在FiRestore中正确编写OR查询

如何在Flutter 中不从getX库中初始化GetxController中的变量

Android Studio中的Ffltter&;Couchbase:进程C:/Program Files/Git/bin/bash以非零退出值35结束

Flutter API请求BadState响应

如何使页面浏览量达到活动页面所要求的高度?

任务';:app:check DebugDuplicateClasss';的Ffltter Share_plus抛出执行失败

在 flutter 吧蜂巢中拯救主题

Flutter 中的 setState() 内部是如何工作的?

无状态和有状态小部件,我可以同时使用吗?

'type' Icon '不是类型' IconData '的子类型

Flutter开发中,如何通过'nfc_manager'插件在Android设备上避免默认的New Tag Scanned弹出窗口?

在我使用 flutter_riverpod stateprovider 重新保存代码之前,UI 主题状态不会更新

Dart 撕掉 const 构造函数

在 Flutter 中使用 HardwareKeyboard 时所有键都没有响应

我可以定义一次 sharedPreferences 并在需要数据显示到 flutter 应用程序时调用它吗?

如何在 flutter 的alert 对话框中实现进度指示器?

如何获得Flutter 的时差?

小部件库捕获的 Flutter 异常