chris1234567899 / flutter_time_range_picker Goto Github PK
View Code? Open in Web Editor NEWA time range picker for Flutter
License: Other
A time range picker for Flutter
License: Other
Hello, thank you for this great plugin!
I am currently having trouble updating the the TimeRangePicker widget from outside of it.
My use case is that I use onStartChange
and onEndChange
to update some "external" DateTime variables. These variables are what initial sets the TimeRangePicker (which works fine). However when updating these variables from other sources like the showTimePicker I cant for the life of me update the state of this widget. I have tried all kinds of setState and force redrawn of the widget (I use the widget mode usecase), but no luck.
Am I missing something here? Is it not possible? A controller would be nice :)
Gesture Detector with background widget isn't working
first of all, many thanks for this great package and great support. Β ππ
I thought of something. Is it possible to make the UI adaptive? For IOS and Android?
I don't know if Apple would say anything if you want to release an app with this package.
A suggestion and a question at the same time. π
Greetings and thaaanks!
This is a feature proposal.
It would be nice for the widget to be able to keep the duration when updating the start time (ie duration is 8 hours from 8:00 to 16:00, if I slide the start to 10:00 the end slides to 18:00 automatically), but not when updating the end time.
Hi, I am working on a project which requires the time picker to disable multiple time slots. can you integrate this feature into this package?
When choosing a time I can choose both 0:00 and 24:00 as the time for midnight (2 different steps). The time 24:00 is barely used anymore and should be removed.
From my case, i have start time and end time(8:30-18h30), from that how can i handle to get disable time so that user can't pick outside this range time? thanks.
it would be great if you can see in the examples how to use the result in a text widget.
Hi, is it possible for the start and end handles to have different colors?
Hi,
i dont think it works.
i have always time steps of 5 minutes.
onPressed: () async {
TimeRange result = await showTimeRangePicker(
selectedColor: Theme.of(context).accentColor,
use24HourFormat: true,
interval: Duration(minutes: 15),
context: context,
);
print("result " + result.toString());
},
Hi :),
i have a question. How i edit the "Ok" and "Cancel" buttons? I want to edit the color (or the font) but its not possible.
Hope u can help me.
Thanks in advance! :)
use24HourFormat not working ! I can't hide am/pm.
As you can see, I select the last time, and normally my starting point ("start") should be 15 after the previous period (Thursday 19:30 - 22:30), i.e. 22:45 and my end point ("end") half an hour after the previous time span (Thursday 19:30 - 22:30) i.e. 23:00, but somehow that doesn't always seem to work reliably. why?
thanks in advance... :)
If we include 12Am from label it is not working properly. For example if i pick a range from 10pm/22 to 1am it is not working, gives wrong time interval. If i disable the time 12am to lets say 2. Everything is working fine. Please fix this issue as soon as possible.
Dart 2.12 and flutter 2.0.0 are now in stable with the null-safety feature.
Any plan to support Null Safety @Chris1234567899 .
Here's an official guide from dart doc
https://dart.dev/null-safety/migration-guide
the behavior that I get when the user reaches the disabled time which is in my case from 23:59 to 00:00 instead of stoping the picker there it skips it and start a new picker that starts from 00:00, what I want is that to stop the picker on 23:59 instead of skipping it and starts new picker from 00:00.
can you please fix it ππ»
thank you
Can you please add onConfirm(TimeOfDay startTime, TimeOfDay endTime)?
I would like to set the maximal interval a user can choose. If the user hits the maximum, the start time shifts forward (or the the end time backwards) to match the maximal duration.
: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
../β¦/src/time-range-dialog.dart:306
../β¦/src/time-range-dialog.dart:334
../β¦/src/time-range-dialog.dart:341
../β¦/src/time-range-dialog.dart:348
hideButtons property is ignored as it is not passed to TimeRangePicker.
I was testing my app where I'm using this library but it was throwing the failed assertion error. It was around 10:13 PM when i was doing the test. Below is the method where assertion was failing
TimeOfDay replacing({ int hour, int minute }) {
assert(hour == null || (hour >= 0 && hour < hoursPerDay));
assert(minute == null || (minute >= 0 && minute < minutesPerHour));
return TimeOfDay(hour: hour ?? this.hour, minute: minute ?? this.minute);
}
I followed where the above method was being called and i found one of it usages below.
void initState() {
var startTime = widget.start ?? TimeOfDay.now();
var endTime = widget.end ?? startTime.replacing(hour: startTime.hour + 3);
Something interesting above. Since it was 10 PM (22 in 24hr clock system), if you add three hours, you get 22+3 = 25
. Thus the value that will be passed to startTime.replacing(hour: startTime.hour + 3)
is 25
hence causing the failure.
I think the solution is after adding the 3 hours, we should check if the hour is >= 24, we return 23.
Hi,
If the values ββin the variables change, the variables in the background widget method do not change, although they were changed in the SetState.
thanks in advance! :)
../../../.fvm/versions/2.10.5-stable/.pub-cache/hosted/http%2558%2547%2547mirrors.cnnic.cn%2547dart-pub%2547/time_range_picker-2.2.0/lib/src/time-range-dialog.dart:306:29: Error: Method 'addObserver' cannot be called on 'WidgetsBinding?' because it is potentially null.
FAILURE: Build failed with an exception.
Can we set max duration selection only to two hours ?
hi how cheng ok and cancel text ?
Hi :),
i test the cupertinoTheme but i see a bug. In this case: "TimeRange? result = await showCupertinoDialog()" the result.endTime has the same value with result.startTime. It would be cool if u can fix that.
A suggestion:
It would be cool if i can set the padding property in the TimeRangePicker class more individual. For example i want to have a padding on the top of the circle but if i write a value in the padding property the whole circle shrinks.
Thanks in advance and happy christmas :)!
It would be great to have option to pass a list or a set of time ranges that would be visually shown on the circle.
Hi there! :)
Thank you for creating and maintaining this nice package!
Unfortunately we have found an issue, that is bugging us:
When calling showTimeRangePicker with start = 0:00 and end = 23:59, the endTime is changed to 24:00. This seems to happen in time-range-dialog.dart in initState() of _TimeRangePickerState.
If I'm not mistaken, it is not required to manipulate the end time, we can simply use it as it is:
Line 300 should be _endTime = endTime;
instead of _endTime = _roundMinutes(endTime.hour * 60 + endTime.minute * 1.0)
;
It might be related to this issue?
Thank you!
it can support many disableTimes like this:
8:00-9:00 disable
12:3:00 disableγ
Local/Pub/Cache/hosted/pub.dartlang.org/time_range_picker-2.1.0/lib/src/time-range-dialog.dart:348:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
My flutter version : 3.0.1
Im creating a opening hours for a store where users expected to list their Working Hours on days of week.
The problem is i want to disable the user from creating times like 10 PM to 3 AM because the user shouldn't pass 24 hours.
The user should select their time within 24 hours of a day but should not pass to the next day like example i mentioned.
This is a bug I faced. how can I fix it?
This is what I have done with no success:
Added onStartChange
and onEndChange
to handle this problem:
InkWell(
splashFactory: NoSplash.splashFactory,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () async {
var partialTime = await showTimeRangePicker(
context: context,
start: startTime,
end: endTime,
// Added this
onStartChange: (TimeOfDay start) {
if (toDouble(startTime) >= toDouble(endTime)) {
endTime =
TimeOfDay(hour: start.hour, minute: start.minute + 5);
} else {
startTime = start;
}
setState(() {});
},
// And this
onEndChange: (TimeOfDay end) {
if (toDouble(startTime) >= toDouble(endTime)) {
startTime = TimeOfDay(hour: end.hour, minute: end.minute - 5);
setState(() {});
} else {
endTime = end;
}
setState(() {});
},
disabledTime: TimeRange(
startTime: const TimeOfDay(hour: 20, minute: 0),
endTime: const TimeOfDay(hour: 8, minute: 0),
),
disabledColor: Colors.red.withOpacity(0.5),
minDuration: const Duration(minutes: 5),
strokeWidth: 5,
ticks: 24,
ticksOffset: -20,
ticksLength: 15,
ticksColor: Colors.grey,
labels: [
"12 am",
"3 am",
"6 am",
"9 am",
"12 pm",
"3 pm",
"6 pm",
"9 pm"
].asMap().entries.map((e) {
return ClockLabel.fromIndex(
idx: e.key, length: 8, text: e.value);
}).toList(),
labelOffset: 35,
rotateLabels: false,
padding: 60,
snap: true,
);
},
child: const Icon(
Icons.add_circle_outline,
size: 22,
color: Colors.grey,
),
),
Hello! What do you think about adding new type of widget named DurationPicker?
Something like this plugin but it's abandoned.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.