apptomate_custom_time_picker 0.0.1

CustomTimePicker is an enhanced time selection widget that extends Flutter's built-in time picker with additional customization options and features.

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

1. 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
       ),
     );
   }
   

2. Accessibility

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

3. Error Handling

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