showTimePicker function Null safety
- {required BuildContext context,
- required TimeOfDay initialTime,
- TransitionBuilder? builder,
- TimePickerEntryMode initialEntryMode = TimePickerEntryMode.dial,
- String? cancelText,
- String? confirmText,
- String? helpText,
- String? errorInvalidText,
- String? hourLabelText,
- String? minuteLabelText,
- RouteSettings? routeSettings,
- EntryModeChangeCallback? onEntryModeChanged,
- Offset? anchorPoint}
Shows a dialog containing a Material Design time picker.
The returned Future resolves to the time selected by the user when the user closes the dialog. If the user cancels the dialog, null is returned.
initialTime
equal to the current time.
Future<TimeOfDay?> selectedTime = showTimePicker(
initialTime: TimeOfDay.now(),
context: context,
);
The context
, useRootNavigator
and routeSettings
arguments are passed to
showDialog, the documentation for which discusses how it is used.
The builder
parameter can be used to wrap the dialog widget
to add inherited widgets like Localizations.override,
Directionality, or MediaQuery.
The initialEntryMode
parameter can be used to
determine the initial time entry selection of the picker (either a clock
dial or text input).
Optional strings for the helpText
, cancelText
, errorInvalidText
,
hourLabelText
, minuteLabelText
and confirmText
can be provided to
override the default values.
A DisplayFeature can split the screen into sub-screens. The closest one to
anchorPoint
is used to render the content.
If no anchorPoint
is provided, then Directionality is used:
- for TextDirection.ltr,
anchorPoint
isOffset.zero
, which will cause the content to appear in the top-left sub-screen. - for TextDirection.rtl,
anchorPoint
isOffset(double.maxFinite, 0)
, which will cause the content to appear in the top-right sub-screen.
If no anchorPoint
is provided, and there is no Directionality ancestor
widget in the tree, then the widget asserts during build in debug mode.
By default, the time picker gets its colors from the overall theme's ColorScheme. The time picker can be further customized by providing a TimePickerThemeData to the overall theme.
Future<TimeOfDay?> selectedTimeRTL = showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
builder: (BuildContext context, Widget? child) {
return Directionality(
textDirection: TextDirection.rtl,
child: child!,
);
},
);
Future<TimeOfDay?> selectedTime24Hour = showTimePicker(
context: context,
initialTime: const TimeOfDay(hour: 10, minute: 47),
builder: (BuildContext context, Widget? child) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
child: child!,
);
},
);
See also:
- showDatePicker, which shows a dialog that contains a Material Design date picker.
- TimePickerThemeData, which allows you to customize the colors, typography, and shape of the time picker.
- DisplayFeatureSubScreen, which documents the specifics of how DisplayFeatures can split the screen into sub-screens.
Implementation
Future<TimeOfDay?> showTimePicker({
required BuildContext context,
required TimeOfDay initialTime,
TransitionBuilder? builder,
bool useRootNavigator = true,
TimePickerEntryMode initialEntryMode = TimePickerEntryMode.dial,
String? cancelText,
String? confirmText,
String? helpText,
String? errorInvalidText,
String? hourLabelText,
String? minuteLabelText,
RouteSettings? routeSettings,
EntryModeChangeCallback? onEntryModeChanged,
Offset? anchorPoint,
}) async {
assert(context != null);
assert(initialTime != null);
assert(useRootNavigator != null);
assert(initialEntryMode != null);
assert(debugCheckHasMaterialLocalizations(context));
final Widget dialog = TimePickerDialog(
initialTime: initialTime,
initialEntryMode: initialEntryMode,
cancelText: cancelText,
confirmText: confirmText,
helpText: helpText,
errorInvalidText: errorInvalidText,
hourLabelText: hourLabelText,
minuteLabelText: minuteLabelText,
onEntryModeChanged: onEntryModeChanged,
);
return showDialog<TimeOfDay>(
context: context,
useRootNavigator: useRootNavigator,
builder: (BuildContext context) {
return builder == null ? dialog : builder(context, dialog);
},
routeSettings: routeSettings,
anchorPoint: anchorPoint,
);
}