CustomTimePicker

CustomTimePicker is a flexible and reusable time selection widget that wraps Flutter's native time picker with enhanced customization options. It provides a simple way to add time picking functionality to any widget while maintaining consistent styling with your app's theme.

✨ Key Features

Simple integration with any widget as trigger
Customizable color scheme (primary, background, text)
12-hour and 24-hour format support
Theme-aware styling
Lightweight implementation (no unnecessary dependencies)
Flexible usage (works with icons, text, or custom widgets)

🚀 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_time_picker: ^0.0.1
  intl: ^0.20.2

t 'package:your_app/custom_time_picker.dart';


## **💡 Basic Usage**

### **With Icon Trigger**
```dart
CustomTimePicker(
  onTimeSelected: (time) => print(time),
  child: Icon(Icons.access_time),
)

With Text Button

CustomTimePicker(
  onTimeSelected: (time) => print(time),
  child: Text('Select Time'),
)

With Custom Styled Button

CustomTimePicker(
  onTimeSelected: (time) => print(time),
  child: Container(
    padding: EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Row(
      children: [
        Icon(Icons.schedule),
        Text('Choose Time'),
      ],
    ),
  ),
)

⚙️ Configuration Options

Parameter	Type	Description	Default
`initialTime`	`TimeOfDay?`	Pre-selected time	`null`
`onTimeSelected`	`ValueChanged<TimeOfDay>`	Required callback	-
`child`	`Widget`	Required trigger widget	-
`use24HourFormat`	`bool`	24-hour time format	`false`
`primaryColor`	`Color?`	Picker accent color	Theme primary
`backgroundColor`	`Color?`	Picker background	Theme background
`textColor`	`Color?`	Picker text color	Theme contrast

🌟 Best Practices

Consistent Styling

// Define a reusable style
Widget timePickerButton(TimeOfDay? time, ValueChanged<TimeOfDay> onSelected) {
  return CustomTimePicker(
    initialTime: time,
    primaryColor: Colors.blue,
    backgroundColor: Colors.white,
    onTimeSelected: onSelected,
    child: Container(
      // Your consistent button style
    ),
  );
}

Accessibility
- Ensure sufficient contrast in your trigger widget
- Provide clear visual feedback on selection
- Include both text and icon when possible

Error Handling

TimeOfDay? selectedTime;
   
CustomTimePicker(
  initialTime: selectedTime,
  onTimeSelected: (time) {
    if (time.hour < 9) {
      showDialog(...); // Show error for times before 9am
    } else {
      setState(() => selectedTime = time);
    }
  },
  // ...
)