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

                                  },

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?

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

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

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?

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((_) {`
```

Issue details here: https://github.com/subhamayd2/day_night_time_picker/issues/54

Replicating the bug

• Show time picker widget with the following values
  • iosStylePicker set to true
  • value of TimeOfDay in the P.M. time period (ie: 4 PM)
• Swipe on the "hours" wheel -> Notice am/pm change

Why does this happen

Notice that when you adjust the hours, the "am" text gets selected. This is because the hour is initialized with respect to the time period (meaning, out of 12 instead of 24). However, the wheel itself has 24 options, not 12.

How to fix this

Simply disregrard the time period when calculating the "initial hour" for the DisplayWheel

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

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.

I was trying to create time picker by day_night_time_picker in my app style like below image.

But I could not remove Modal padding (below image) with the available parameters and features of day_night_time_picker.

I added dialogInsetPadding to your widget for this approach.

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
...
════════════════════════════════════════════════════════════════

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.