showStyledTimePicker function

Future<TimeOfDay?> showStyledTimePicker({ required BuildContext context, required TimeOfDay initialTime, String? helpText, })

A styled time picker following the design system.

final TimeOfDay? time = await showStyledTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
)

Implementation

Future<TimeOfDay?> showStyledTimePicker({
  required BuildContext context,
  required TimeOfDay initialTime,
  String? helpText,
}) {
  final ColorScheme scheme = Theme.of(context).colorScheme;
  return showTimePicker(
    context: context,
    initialTime: initialTime,
    helpText: helpText ?? 'SELECT TIME',
    builder: (BuildContext context, Widget? child) => Theme(
      data: Theme.of(context).copyWith(
        colorScheme: scheme,
        timePickerTheme: TimePickerThemeData(
          backgroundColor: scheme.surfaceContainerLow,
          hourMinuteColor: scheme.surfaceContainerHighest,
          dayPeriodColor: scheme.surfaceContainerHighest,
          dialHandColor: scheme.primary,
          dialBackgroundColor: scheme.surfaceContainerHighest,
          entryModeIconColor: scheme.onSurfaceVariant,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(AppRadius.extraLarge),
          ),
          hourMinuteShape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(AppRadius.medium),
          ),
          dayPeriodShape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(AppRadius.medium),
          ),
        ),
      ),
      child: child!,
    ),
  );
}