showNashStyledTimePicker function

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

A styled time picker following the design system.

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

Implementation

Future<TimeOfDay?> showNashStyledTimePicker({
  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!,
      ),
  );
}