[英]flutter countdown timer (custom time)
我使用了倒数计时器的基本代码,并想知道如何让用户自定义他们想要的时间量,而不是让它成为默认值(在我的例子中是 30 分钟或 1800 秒)。我只是想让他们选择无论他们想要什么时间,比如 5 分钟、30 分钟、1 小时等。一旦单击该按钮,它可能是另一个按钮,或者可能会出现一个弹出窗口让他们选择时间? 老实说,此时有任何帮助,谢谢!
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,
));
}
}
据我了解,您需要启动一个计时器取决于用户输入,这可以通过让用户通过drop down
或textfield
选择计时器来完成,然后使用Timer class
处理结果
Timer? myTimer ;
int? userInput;
myTimerFunction(){
myTimer = Timer.periodic(const Duration(seconds: 1//or on your need), (_) =>startTimer());
}
startTimer(){
userInput++; // here will keep increase one value per 1/sec
if(userInput == put here your value that should stop timer when it arrive it){
myTimer!.cancel(); //
}
}
基本上你想用于“启动/重启”的是
_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');
},
);
}
}
您还可以将 _duration 作为参数传递给 Timer 小部件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.