import 'package:flutter/material.dart'; import 'package:test_sa/extensions/context_extension.dart'; import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/text_extensions.dart'; import 'package:test_sa/extensions/widget_extensions.dart'; import 'package:test_sa/new_views/app_style/app_color.dart'; Future showThemedTimePicker({ required BuildContext context, required TimeOfDay initialTime, String? helpText, String? cancelText, String? confirmText, TimePickerEntryMode initialEntryMode = TimePickerEntryMode.dial, }) async { return await showTimePicker( context: context, initialTime: initialTime, helpText: helpText, cancelText: cancelText, confirmText: confirmText, initialEntryMode: initialEntryMode, builder: (BuildContext context, Widget? child) { return Theme( data: Theme.of(context).copyWith( timePickerTheme: TimePickerThemeData( // Background color backgroundColor: AppColor.bottomSheetColor(context), // Hour/Minute input boxes styling hourMinuteShape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), side: BorderSide(color: AppColor.borderColor(context)), ), // AM/PM selector border dayPeriodBorderSide: BorderSide(color: AppColor.borderColor(context)), // AM/PM selector background color dayPeriodColor: WidgetStateColor.resolveWith((states) { if (states.contains(WidgetState.selected)) { return AppColor.primary10; } return Colors.transparent; }), // AM/PM selector text color dayPeriodTextColor: WidgetStateColor.resolveWith((states) { if (states.contains(WidgetState.selected)) { return Colors.white; } return AppColor.textStyleColor(context); }), // Clock dial hand color dialHandColor: AppColor.primary10, // Clock dial background dialBackgroundColor: AppColor.scaffoldBackground(context), // Hour/Minute box background color hourMinuteColor: WidgetStateColor.resolveWith((states) { if (states.contains(WidgetState.selected)) { return AppColor.primary10; } return AppColor.scaffoldBackground(context); }), // Hour/Minute box text color hourMinuteTextColor: WidgetStateColor.resolveWith((states) { if (states.contains(WidgetState.selected)) { return Colors.white; } return AppColor.textStyleColor(context); }), // Clock dial numbers text color dialTextColor: WidgetStateColor.resolveWith((states) { if (states.contains(WidgetState.selected)) { return Colors.white; } return AppColor.textStyleColor(context); }), // Entry mode switch icon color entryModeIconColor: AppColor.primary10, // Help text styling helpTextStyle: TextStyle( color: AppColor.textStyleColor(context), ), // Dialog shape shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(16), ), ), // Action buttons (Cancel/OK) styling textButtonTheme: TextButtonThemeData( style: TextButton.styleFrom( foregroundColor: AppColor.primary10, textStyle: const TextStyle( fontWeight: FontWeight.w600, fontSize: 14, ), ), ), ), child: child!, ); }, ); } class ATimePicker extends StatelessWidget { final TimeOfDay? time; final String label; final String? icon; final String? hint; final Function(TimeOfDay)? onTimePicker; final bool enable, withBorder, withIcon; final Color? backgroundColor; final double? height; const ATimePicker({ Key? key, required this.label, this.withBorder = true, this.icon, this.withIcon = true, this.height, this.backgroundColor, this.hint, this.time, this.onTimePicker, this.enable = true, }) : super(key: key); @override Widget build(BuildContext context) { return Container( height: height, decoration: BoxDecoration( color: backgroundColor ?? (context.isDark && (enable == false) ? AppColor.neutral50 : (enable == false) ? AppColor.neutral40 : AppColor.background(context)), borderRadius: BorderRadius.circular(10), border: withBorder ? Border.all(width: 1, color: Theme.of(context).scaffoldBackgroundColor) : const Border(), boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10)], ), padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth, vertical: 8.toScreenHeight), child: Row( children: [ Column( crossAxisAlignment: CrossAxisAlignment.stretch, mainAxisSize: MainAxisSize.min, children: [ label.tinyFont(context), (time == null ? hint ?? context.translation.pickTime : (time?.format(context) ?? context.translation.pickADate)) .bodyText(context) .custom(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50), ], ).expanded, enable ? 16.width : const Spacer(), withIcon ? icon != null ? icon!.toSvgAsset(width: 20, color: context.isDark ? AppColor.neutral10 : null) : "calender".toSvgAsset(width: 20, color: context.isDark ? AppColor.neutral10 : null) : const SizedBox(), ], ), ).onPress(enable ? () async { // Use the unified themed time picker TimeOfDay? pickedTime = await showThemedTimePicker( context: context, initialTime: time ?? TimeOfDay.now(), ); if (pickedTime != null) { if (onTimePicker != null) onTimePicker!(pickedTime); } } : null); } }