subhamayd2 / day_night_time_picker

A day night time picker for Flutter. Beautiful day and night animation with Sun and Moon assets.

DayNightTimePicker

A day night time picker for Flutter with Zero Dependencies.

Default style:

IOS style:

View it on pub.dev

---

Installation

Add to pubspec.yaml.

dependencies:
  day_night_time_picker:

---

Usage

To use plugin, just import package

import 'package:day_night_time_picker/day_night_time_picker.dart';

---

Example

TextButton(
    onPressed: () {
        Navigator.of(context).push(
            showPicker(
                context: context,
                value: _time,
                sunrise: TimeOfDay(hour: 6, minute: 0), // optional
                sunset: TimeOfDay(hour: 18, minute: 0), // optional
                duskSpanInMinutes: 120, // optional
                onChange: onTimeChanged,
            ),
        );
    },
    child: Text(
        "Open time picker",
        style: TextStyle(color: Colors.white),
    ),
),

---

Props

Name	Description	Default
value	Required Display value. It takes in [Time].
onChange	Required Return the new time the user picked as [Time].
isInlinePicker	Whether to render an inline widget.	false
onChangeDateTime	Optional Return the new time the user picked as [DateTime].
onCancel	Optional Custom callback for the Cancel button. Note: if provided, it will override the default behavior of the Cancel button.
is24HrFormat	Show the time in TimePicker in 24 hour format.	false
accentColor	Accent color of the TimePicker.	Theme.of(context).accentColor
unselectedColor	Color applied unselected options (am/pm, hour/minute).	Colors.grey
cancelText	Text displayed for the Cancel button.	cancel
okText	Text displayed for the Ok button.	ok
sunAsset	Image asset used for the Sun.	Asset provided
moonAsset	Image asset used for the Moon.	Asset provided
blurredBackground	Whether to blur the background of the [Modal].	false
barrierColor	Color of the background of the [Modal].	Colors.black45
borderRadius	Border radius of the [Container] in [double].	10.0
elevation	Elevation of the [Modal] in [double].	12.0
dialogInsetPadding	Inset padding of the [Modal] in EdgeInsets.	EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0)
barrierDismissible	Whether clicking outside should dismiss the [Modal].	true
showCancelButton	Whether to show the cancel button or not	true
iosStylePicker	Whether to display a IOS style picker (Not exactly the same).	false
hourLabel	The label to be displayed for hour picker. Only for iosStylePicker.	'hours'
minuteLabel	The label to be displayed for minute picker. Only for iosStylePicker.	'minutes'
minuteInterval	Steps interval while changing minute. Accepts TimePickerInterval enum.	TimePickerInterval.ONE
secondInterval	Steps interval while changing minute. Accepts TimePickerInterval enum.	TimePickerInterval.ONE
disableMinute	Disables the minute picker.	false
disableHour	Disables the hour picker.	false
minHour	Selectable minimum hour.	Defaults to 1[12hr] or 0[24hr]
maxHour	Selectable maximum hour.	Defaults to 12[12hr] or 23[24hr]
minMinute	Selectable minimum minute.	0
minSecond	Selectable minimum second.	0
maxMinute	Selectable maximum minute.	59
maxSecond	Selectable maximum second.	59
displayHeader	Whether to display the sun moon animation.	true
isOnValueChangeMode	Whether to hide okText, cancelText and return value on every onValueChange. Only for Inline widget	false
focusMinutePicker	Whether or not the minute picker is auto focus/selected.	false
themeData	ThemeData to use for the widget.	Theme.of(context)
okStyle	Ok button's text style.	const TextStyle(fontWeight: FontWeight.bold)
cancelStyle	Cancel button's text style.	const TextStyle(fontWeight: FontWeight.bold)
buttonStyle	Button's style. If cancelButtonStyle not provided, it applies to ok and cancel buttons.	Theme.of(context).colorScheme.secondary
cancelButtonStyle	Cancel button style.	Theme.of(context).colorScheme.secondary
buttonsSpacing	Spacing between cancel and ok buttons.	0
wheelHeight	Only for createInlinePicker Height of the Wheel	240
hideButtons	Whether to hide the buttons (ok and cancel).	false
disableAutoFocusToNextInput	Whether to disable the auto focus to the next input after current input is selected.	false
width	Fixed width of the Picker container.	300 (350 for iosStyle)
height	Fixed height of the Picker container.	400
sunrise	Sunrise time.	400
sunset	Sunset time.	400
duskSpanInMinutes	Dusk span in minutes.	400
settings	Optional Data that might be useful in constructing a [Route].

---

Contributors

Thanks goes to these wonderful people:

Subhamay Dutta 💻 📖	Andrew Zuo 💻	Mohammad Odeh 💻	Hashem Alayan 💻	gohdong 💻	nohli 💻	sander102907 💻
Sobhan Moradi 🎨	Omar Dahhane 💻	Fatih Yaman 🎨	JerryShen 💻	本多健也 💻	Tempelritter 💻 📖	Silfalion 💻
Chengxi Gu 💻	Saif Billah 💻	Mark Szente 💻	Juan Carlos Ramón Condezo 🎨	Chuanyi 📖	Leon Schwanitz 🎨	Liam DeCoste 🐛
qqjjjj 💻	Moshe Yamini 💻	Ryota Kobayashi 💻	Asraful Islam 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

---

LICENCE

Copyright 2023 Subhamay Dutta

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

day_night_time_picker's Issues

exception when setting minMinute and maxMinute properties to 0

There is an exception when I run this code
it happens when I set minMinute and maxMinute properties to 0

showPicker(
  value: value,
  onChange: onChanged,
  is24HrFormat: is24HoursFormat,
  maxHour: 11,
  minHour: 4,
  minMinute: 0,
  maxMinute: 0,
)

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building DayNightTimePickerAndroid(dirty, dependencies: [_LocalizationsScope-[GlobalKey#6d8b2], _InheritedTheme], state: _DayNightTimePickerAndroidState#919cd):
'package:flutter/src/material/slider.dart': Failed assertion: line 167 pos 15: 'divisions == null || divisions > 0': is not true.

When the exception was thrown, this was the stack
#2      new Slider
package:flutter/…/material/slider.dart:167
#3      _DayNightTimePickerAndroidState.build
package:day_night_time_picker/lib/day_night_timepicker_android.dart:335
#4      StatefulElement.build
package:flutter/…/widgets/framework.dart:4744
#5      ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4627
#6      StatefulElement.performRebuild
package:flutter/…/widgets/framework.dart:4800
...
════════════════════════════════════════════════════════════════

Does not work in Flutter 3.0

This repo is unsupported in Flutter 3.0

Please fix it.

Thanks

Possibility to return Duration

Would be nice if we could get Duration from this dialog and setting maxHours to 24, not old Java time format 0-23.

Failed assertion: line 166 pos 15: 'value >= min && value <= max': is not true.

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
'package:flutter/src/material/slider.dart': Failed assertion: line 166 pos 15: 'value >= min && value <= max': is not true.
The relevant error-causing widget was:

Using the picker as a standalone widget

Could you allow to use the picker as a widget instead of a dialog?

How to disable specific time?

I want to make an appointment app.

I want to disable time slots which are altready booked so user are unable to select it.

For ex:
if an appointment is already been made for 9:30.
I want the slider to jump from 9:20 to 9:40 skipping 9:30.

Any idea on how can i acheive this?

Issue with inline widget

I'm facing an issues in fitting the inline widget using fittedBox, Flexible and Expanded. What should I do?

[Feature request] - Select minutes before

Hello. @subhamayd2 Congratulations on the component.

Would it be possible to have some parameter (by default false so as not to affect normal behavior) that would allow first to choose the minutes before the hours?

I am going to use the component with displayHeader:false to model the use case of choosing a duration that, in general, will always be expressed in minutes and not hours. Having the minutes preselected would help with the usability of the component.

Regards.

Syntax Errors

• overAndUnderCenterOpacity is no longer supported in ListWheelScrollView.useDelegate Class
• headline2 is replaced with display2

set is24HrFormat as true not work

it starts with 12 and not ends with 23 but with 11

cant change text in a InlinePicker

Thanks for all your work, the picker is awesome, but i got a problem , the inline widget only use the reset and apply text by default and cant be changed

Issue with meridiems for ios style

As you can see in the video, my phone is set to 20:04, so the meridiem should continue to display p.m instead of a.m as the hour changes.

Here is the code.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('Open Time Picker'),
          onPressed: () {
            Navigator.of(context).push(
              showPicker(
                context: context,
                value: TimeOfDay.now(),
                iosStylePicker: true,
                onChange: (value) {
                  print(value.toString());
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

Working on Flutter 3.0.0 but throwing this error

Hello,

Love your plugin. It is working well, however, on Flutter 3.0.0, it is throwing the following error:

../../.pub-cache/hosted/pub.dartlang.org/day_night_time_picker-1.0.5/lib/lib/day_night_timepicker_ios.dart:72:28: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../fvm/versions/2.5.3/packages/flutter/lib/src/widgets/binding.dart').
            WidgetsBinding.instance!.addPostFrameCallback((_) {
                           ^
../../.pub-cache/hosted/pub.dartlang.org/day_night_time_picker-1.0.5/lib/lib/day_night_timepicker_ios.dart:80:30: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../fvm/versions/2.5.3/packages/flutter/lib/src/widgets/binding.dart').
              WidgetsBinding.instance!.addPostFrameCallback((_) {
                             ^
../../.pub-cache/hosted/pub.dartlang.org/day_night_time_picker-1.0.5/lib/lib/day_night_timepicker_ios.dart:91:28: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../fvm/versions/2.5.3/packages/flutter/lib/src/widgets/binding.dart').
            WidgetsBinding.instance!.addPostFrameCallback((_) {
                           ^
../../.pub-cache/hosted/pub.dartlang.org/day_night_time_picker-1.0.5/lib/lib/day_night_timepicker_ios.dart:103:30: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../fvm/versions/2.5.3/packages/flutter/lib/src/widgets/binding.dart').
              WidgetsBinding.instance!.addPostFrameCallback((_) {`
```

maybe about some animations

I set up a controlled widget wrapping the picker to controll its value and i occurs below error:

onChangeDateTime call on null

The method 'call' was called on null.
Receiver: null
Tried calling: call(Instance of 'TimeOfDay')

ERROR when min hour = 11 pm

if you wanted to make the min hour ,time_of_Day.now.hour , but then hour is 11 pm , it will throw a error , because of slider

Make "ok" and "cancel" text optional

There will be many scenarios regarding the inline picker where the Ok and Cancel text will not be needed. There can be other widgets below them, and a common submit button like in the design below

https://imgur.com/Klgy9tp

I have given empty text for both of them, but they are still taking up spaces in the design as you can see

Nullsafety migration

If this library could be migrated to sound null-safety that would be great! :)

Breaking changes

Hi. Thanks for the really handy package.

Please can you increment the package to v2 next time you introduce breaking changes. Causes lots of issues for people using the standard package dependency management stuff otherwise. Thanks.

Any way to add a max width or height constraint to the popups?

TimeOfDay time = TimeOfDay.fromDateTime(_mondayStart); Navigator.of(context).push( showPicker( context: context, value: time, onChange: (_) {}, minuteInterval: MinuteInterval.FIFTEEN, onChangeDateTime: (DateTime dateTime) { setState(() { _mondayStart = dateTime; }); }, ), );

I would like to add a maximum width to the popup. If an app needs to adapt from mobile to web (desktop), it can look quite weird to fill up a whole desktop/laptop monitor screen. It's the right approach for mobile devices, however. I can't figure out how to put a max width constraint for large screens.

SUN/MOON images dissapair when you change the minutes in 24 hour format

When you change the minutes in 24 hour format the SUN/MOON changes the position to the end of the widget.

Nice component!!

return value when tab OK button

Hello, your project is very beautiful and very helpful to me. Thank you for making it.

There is a part of the project that would be good for improvement, so I open the issue.

It would be better if we could get the value from the pop that is performed when we press the OK button.

onOk() {
    var time = TimeOfDay(
      hour: getHours(hour, a, widget.is24HrFormat),
      minute: minute,
    );
    widget.onChange(time);
    if (widget.onChangeDateTime != null) {
      final now = DateTime.now();
      final dateTime =
      DateTime(now.year, now.month, now.day, time.hour, time.minute);
      widget.onChangeDateTime(dateTime);
    }
    onCancel(result: widget.value); //if we tab ok, it will return TimeOfDay.
  }

  /// Handler to close the picker
  onCancel({var result}) {  // add optional parameter
    if (!widget.isInlineWidget) {
      Navigator.of(context).pop(result);  //so if we tap cancel, it will return null.
    } else {
      separateHoursAndMinutes();
    }
  }

Then we can use value like this.

Navigator.of(context).push(
      showPicker(
        context: context,
        iosStylePicker: true,
        value: fromTime,
        is24HrFormat: true,
        minuteInterval: MinuteInterval.FIFTEEN,
        onChange: (TimeOfDay value) {
          
        },
      ),
    ).then((value) {
      if(value == null){
        // what we can do after cancel
      }
      else{
        // what we can do after ok
      }
    });

I wil make PR.

Thank you

time limit

Hello, and thank for the plugin, very elegant and nice

can you please add a feature that limits the time user can select. for example I wanted user to select time only between 7 AM to 5 PM.
Also with the ability to allow time selection for every hour or every half hour or every quarter of hour. i.e they have to either select 7 , 8 , 9 ..etc.
or 7:30 , 8:30 .. etc.
or 7:15, 7:30 , 7:45 .. etc

I hope to see these features in this nice time picker

TimeOfDay easily format to DateTime

Is there any chance to get a method for this?

Provide a way to override Cancel button behavior

What

I suggest adding an optional onCancel parameter to override Cancel button behavior.

Why

In my use case, I had to use the rootNavigator to show the dialog. Since the hard-coded behavior of the Cancel button is currently to call Navigator.of(context).pop();, it didn't work for me.

I have already implemented these changes in my fork, so I could submit a PR if you wish.

Keyboard input for web/desktop

Would be a better UX if web/desktop users were able to input using the keyboard.

setState called while scrolling and closing Dialog

The Method setState is called while scrolling and closing the Dialog this will throw setState() called after dispose(): _DayNightTimePickerIosState#92c3a(lifecycle state: defunct, not mounted)

AM / PM selector doesn't trigger onchange event

If isOnChangeValueMode = true, when selecting AM / PM without touching slider, the datetime value doesn't update.

Can you have AM / PM selection trigger an onchange event so that the value updates? Also, is there a way to get the datetime value (potential workaround when user proceeds to another screen to fetch datetime value as AM / PM doesn't trigger yet)?

FlatButton in readme is deprecated

FlatButton in readme example is deprecated.

As the IDE warrns

FlatButton' is deprecated and shouldn't be used. Use TextButton instead. See the migration guide in flutter.dev/go/material-button-migration-guide). This feature was deprecated after v1.26.0-18.0

Start and end time or with Title features

Could be better if you support start and end time, and add header title feature :D

Screen is shifted when opening the dialog on iOS

I got the following result when I try to execute the code bellow:

  final rout = showPicker(
      context: context,
      value: TimeOfDay.now().replacing(minute: 30),
      iosStylePicker: !true,
      onChange: (t) => print(t),
      sunAsset: Image.asset('lib/images/sun.png'),
      moonAsset: Image.asset('lib/images/moon.png'),
      okText: 'ok'.tr,
      cancelText: 'cancel'.tr,
    );

    Navigator.of(context).push(rout);

It's worth noting that:

• Couldn't reproduce on Android.
• I'm using iOS simulator iPhone Pro 12 Max 14.1.
• I'm using GetMaterialApp instead of MaterialApp as my main widget.
• Device locale is set to Arabic (which is an RTL language).

Half screen goes black when clicking on showPicker

the screen goes half black
when using the showPicker() method
i am using GetX state management
and i used the same example in the Pub.dev page

onTap: () async {

                                    Navigator.of(context).push(
            showPicker(
                context: context,
                value: managerController.initialSelectedVacStartTime,
                onChange: null,
            ),
        );

                                  },

Bottom overflow in landscape on small phones (ie 720x1480)

Hi,

I encountered an issue on small phones. When used in landscape mode the date picker popup window is too large for the screen. A RenderFlex overflow error message is shown.

Steps to reproduce:

1. use a virtual device with a low resolution (Galaxy Nexus or something with 720x1280 or lower)
2. open the time picker as a popup (I used the example code)
3. turn device to landscape

Best regards,

Sam

Auto-focus minutes after clicking/releasing hours slider

Thanks for the lovely library.
I was wondering if it would be possible to make it so AFTER choosing the desired hour it automatically changes to choosing minutes.

This is how default TimePicker works. The user is picking hour, upon mouse/finger click/release the dial changes to picking minutes. this is just a Quality of Life change for users.

Default TimePicker :

This Library

User has to go all the way back to minutes to click then go back to Slider to change minutes :

Desired Effect

Auto-change

Getting minutes with a 0 at front displays 9:5

When you select the Time and at the Minutes are set to 05 then it will be saved as 5 Minutes.

Is there an option to be able to pick seconds too?

If there isnt, WOuld you be interested in a pull request including it?

Expected a value of type 'SkDeletable', but got one of type 'Null' in Web

This happens when clicking in time picker when running in web

The following TypeErrorImpl was thrown building DayNightTimePickerAndroid(dirty, dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#25815]], state: _DayNightTimePickerAndroidState#f0eed):
Expected a value of type 'SkDeletable', but got one of type 'Null'

The relevant error-causing widget was
MaterialApp
lib/main.dart:86

It would be nice to be able to style both OK text and cancel text

I will work on this issue if I have time.

upgrade to flutter 3.0

WidgetsBinding.instance!.addPostFrameCallback 'WidgetsBinding' which excludes null

add background color option

would be nice if you could change the default white bg color. for example via a property like "backgroundColor" accepting a color

Min - Max Hour for 12 Hour Format

Hi, how can I set the min max hour for the 12 hour format?

Our timings should be 10AM to 9PM.

I tried puttingminHour: 10 and maxHour: 21

but it doesn't accept it using the 12 hour format.

How can I make this work?

How to change splash/hover color of cancel/ok button?

I don't see properties of the cancel/ok button. Is it possible to change splash/hover color?

Picker not reacting to new TimeOfDay-Value

Hallo folks :)

I just found your package and I really like it. I'm want to use the inline version of it. Then I got the idea to change to cancel-button to a new-button to quickly reset the value to now:

Everytime I click the now-Button, I get this in the console:

So I am assuming that this should work.

Unfortunately, the value in the inline-picker does not change. It stays at the previously set value.

What am I doing wrong?

How to decrease the height of the picker box

Hi，
Thanks for your great work. I have one question how to decrease the height? I didn't find the parameter in the doc

RTL app direction

OS: android
OS Version: 8.0
Device: oneplus 3T

The picked time in RTL app layout isn't display right

instead of displaying:
HH:MM (24 hours format)
H:MM (12 hours format)

it displaying:
MM:HH (24 hours format)
MM:H (12 hours format)

UPDATE:
So this is my solution for this problem until it will be fixed:

Navigator.of(context).push(
  PageRouteBuilder(
	pageBuilder: (context, _, __) {
	  return Directionality(
		textDirection: TextDirection.ltr,
		child: showPicker(
		  value: value,
		  onChange: onChanged,
		  is24HrFormat: true,
		).buildPage(context, _, __),
	  );
	},
	transitionDuration: Duration(milliseconds: 200),
	transitionsBuilder: (context, anim, secondAnim, child) => SlideTransition(
	  position: anim.drive(
		Tween(
		  begin: const Offset(0, 0.15),
		  end: const Offset(0, 0),
		).chain(
		  CurveTween(curve: Curves.ease),
		),
	  ),
	  child: FadeTransition(
		opacity: anim,
		child: child,
	  ),
	),
	barrierDismissible: true,
	opaque: false,
	barrierColor: Colors.black45,
  ),

basically I just wrapped the time pick dialog with PageRouteBuilder and Directionality and I set the textDirection property to LRT.
The rest of the PageRouteBuilder properties is the same of the original time pick dialog, I just copied it to maintain the same look and feel of the original dialog

Sorry for bad english

[Feature Request] Minute interval option

really like it. would be awesome if you had an interval option on the minutes. 0, 15, 30, 45

Independent button style for cancel button and spacing between them

Nice package!

Problem

1. As buttonStyle applies to both ok and cancel button style, we can't provide a specific button style to cancel button.
2. Giving some spacing between ok and cancel buttons is not possible

Example

Solution

1. Add optional cancel button style, if not provided use buttonStyle.
   Cancel button style hierarchy: cancelButtonStyle -> buttonStyle -> default button style
2. Add optional buttons spacing, defaults to 0 if not provided

Preview

setState() called after dispose():

After updating to 1.2.0 .when ever any picker changes it shows the error

════════ Exception caught by scheduler library ═════════════════════════════════
setState() called after dispose(): TimeModelBindingState#f28dc(lifecycle state: defunct, not mounted)

Option to hide the buttons

Hey,
is there an option to hide the buttons (OK and cancel) in the inline dialog?

Flag to disable seconds

Hey there, great work with this package!
Could you add a flag to disable the newly introduced seconds like you have for disabling hours/minutes?