MuhammadUsamaSiddiqui
timer duration does not change when feeding duration using TextField.
timer duration always takes the 1st value from the TextField even when we change the value from TextField. Code:
` import 'package:circular_countdown_timer/circular_countdown_timer.dart'; import 'package:flutter/material.dart'; // import 'package:get/get.dart';
class Testing extends StatefulWidget { @override _TestingState createState() => _TestingState(); }
class _TestingState extends State<Testing> { CountDownController _controller = CountDownController(); TextEditingController timeTextCtrl = TextEditingController(); @override void initState() { super.initState(); timeTextCtrl.text = 50.toString(); }
@override Widget build(BuildContext context) { return Scaffold( body: ListView( // shrinkWrap: true, // width: 360, // height: 640, // color: Colors.white, children: [ Center( child: CircularCountDownTimer( // Countdown duration in Seconds. duration: int.parse(timeTextCtrl.text),
// 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: Colors.purpleAccent[100],
// Filling Gradient for Countdown Widget.
fillGradient: null,
// Background Color for Countdown Widget.
backgroundColor: Colors.purple[500],
// 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: 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: true,
// Handles Animation Direction (true for Reverse Animation, false for Forward Animation).
isReverseAnimation: true,
// 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
print('Countdown Started');
},
// This Callback will execute when the Countdown Ends.
onComplete: () {
// Here, do whatever you want
print('Countdown Ended');
},
),
),
TextField(
controller: timeTextCtrl,
),
ElevatedButton(
onPressed: () {
setState(() {
_controller.start();
});
},
child: Text("Start"),
), ],
),
);
} } `
eg. In the initState we feed the timeTextCtrl.text =50. now if we hit the start button, timer starts from 50 but if we change value of timeTextCtrl.text with let's say 15, and hit the start button, timer starts from 50 only. It should start form 15. Any Idea how can I achieve this? Help Please!
timer duration always takes the 1st value from the TextField even when we change the value from TextField. Code:
` import 'package:circular_countdown_timer/circular_countdown_timer.dart'; import 'package:flutter/material.dart'; // import 'package:get/get.dart';
class Testing extends StatefulWidget { @override _TestingState createState() => _TestingState(); }
class _TestingState extends State { CountDownController _controller = CountDownController(); TextEditingController timeTextCtrl = TextEditingController(); @override void initState() { super.initState(); timeTextCtrl.text = 50.toString(); }
@override Widget build(BuildContext context) { return Scaffold( body: ListView( // shrinkWrap: true, // width: 360, // height: 640, // color: Colors.white, children: [ Center( child: CircularCountDownTimer( // Countdown duration in Seconds. duration: int.parse(timeTextCtrl.text),
// 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: Colors.purpleAccent[100], // Filling Gradient for Countdown Widget. fillGradient: null, // Background Color for Countdown Widget. backgroundColor: Colors.purple[500], // 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: 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: true, // Handles Animation Direction (true for Reverse Animation, false for Forward Animation). isReverseAnimation: true, // 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 print('Countdown Started'); }, // This Callback will execute when the Countdown Ends. onComplete: () { // Here, do whatever you want print('Countdown Ended'); }, ), ), TextField( controller: timeTextCtrl, ), ElevatedButton( onPressed: () { setState(() { _controller.start(); }); }, child: Text("Start"), ), ], ), );} } `
eg. In the initState we feed the timeTextCtrl.text =50. now if we hit the start button, timer starts from 50 but if we change value of timeTextCtrl.text with let's say 15, and hit the start button, timer starts from 50 only. It should start form 15. Any Idea how can I achieve this? Help Please!
What I was doing in my project is taking a user input for the timer value from a dialog and trying to set the new duration and the timer would always start from the previous duration. Seems like you might be having a similar problem. For me I want the timer to start immediately after setting the new timer value, so the way I got it to work is right after setting the new value I called:
_controller.restart(duration: _duration);
_duration being populated with the new timer value and it worked! Hope this helps your case too.
@moderndevgirl thank you! This really helped. I was struggling with a similar issue. wanted to reward my user with 5 extra seconds on completing a task and i had not added the restart command!
Thanks a ton!
How do you change in your example the value of timeTextCtrl.text?
I'll close this issue as there is no clear reproduction and (apparently) a fix.
