chris1234567899 / flutter_time_range_picker Goto Github PK

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.

in example first button, ticks is "12", but TimeRangePicker receive wrong ticks number

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());
},

Using the latest version.

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! :)

I can't select 12pm hour from the picker. I attached screenshot. As you see in the screenshot, I selected pm for the time still it is showing am in the header.

use24HourFormat not working ! I can't hide am/pm.

How can I customize the header in general? I want to customize the background color and text color of "from" and "to". I already tried changing the ThemeData.

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.

• 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../../.fvm/versions/2.10.5-stable/packages/flutter/lib/src/widgets/binding.dart').
  Try calling using ?. instead.
  WidgetsBinding.instance.addObserver(this);
  ^^^^^^^^^^^
  ../../../.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:308:29: Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null.
• 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../../.fvm/versions/2.10.5-stable/packages/flutter/lib/src/widgets/binding.dart').
  Try calling using ?. instead.
  WidgetsBinding.instance.addPostFrameCallback((_) => setRadius());
  ^^^^^^^^^^^^^^^^^^^^
  ../../../.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:315:29: Error: Method 'removeObserver' cannot be called on 'WidgetsBinding?' because it is potentially null.
• 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../../.fvm/versions/2.10.5-stable/packages/flutter/lib/src/widgets/binding.dart').
  Try calling using ?. instead.
  WidgetsBinding.instance.removeObserver(this);
  ^^^^^^^^^^^^^^
  ../../../.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:322:29: Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null.
• 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../../.fvm/versions/2.10.5-stable/packages/flutter/lib/src/widgets/binding.dart').
  Try calling using ?. instead.
  WidgetsBinding.instance.addPostFrameCallback((_) => setRadius());
  ^^^^^^^^^^^^^^^^^^^^

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.

hey Chris, really like your package, I am currently using this in a web project but it's looking so weirdly large, i would like to know if there is an option to manage the size of it, thank you.

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.

• 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/C:/src/flutter/packages/flutter/lib/src/widgets/binding.dart').
  package:flutter/…/widgets/binding.dart:1
  WidgetsBinding.instance!.addPostFrameCallback((_) => setRadius());

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.

When I click the cancel button it gives

type 'Null' is not a subtype of type 'TimeRange'

error.
I went through the plugin code and found that your cancel method is also requesting TimeRange

Please check this out and waiting for a update. Thank you.

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.