apptomate_custom_date_picker 0.0.1

CustomDatePicker is an enhanced date selection widget that provides more flexibility and customization options than Flutter's built-in date picker.

CustomDatePicker

CustomDatePicker is an enhanced date selection widget that provides more flexibility and customization options than Flutter's built-in date picker. It offers multiple display formats, clear button functionality, and full theming support while maintaining all the standard date selection features.

✨ Key Features

• Multiple display formats (custom date formatting)
• Customizable UI (colors, borders, icons)
• Clear date functionality
• Flexible input options (text field or custom widget)
• Label support for form integration
• Theme-aware styling
• Formatted date callback
• Responsive design for all screen sizes

🚀 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_date_picker: ^0.0.1
  intl: ^0.20.2

💡 Basic Usage

Basic TextField Implementation

CustomDatePicker(
  initialDate: selectedDate,
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  onDateSelected: (date) => setState(() => selectedDate = date),
)

With Custom Formatting

CustomDatePicker(
  dateFormat: 'MMMM dd, yyyy',
  // ... other params
)

Custom Button Style

CustomDatePicker(
  dateWidget: Container(
    padding: EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Row(
      children: [
        Icon(Icons.calendar_today, color: Colors.white),
        Text('Select Date', style: TextStyle(color: Colors.white)),
      ],
    ),
  ),
  // ... other params
)

⚙️ Configuration Options

Parameter	Type	Description	Default
initialDate	DateTime?	Pre-selected date	null
firstDate	DateTime	Earliest selectable date	Required
lastDate	DateTime	Latest selectable date	Required
onDateSelected	ValueChanged<DateTime?>	Date selection callback	Required
dateFormat	String	Display format pattern	'yyyy-MM-dd'
buttonColor	Color?	Calendar button color	Theme primary
textColor	Color?	Text color	Theme contrast
backgroundColor	Color?	Background color	Theme background
showClearButton	bool	Show clear date option	false
showIcon	bool	Show calendar icon	true
dateWidget	Widget?	Custom trigger widget	null
showLabel	bool	Show form label	false

🌟 Best Practices

1. Date Formatting

   // Common formats:
   'MM/dd/yyyy' → 12/31/2023
   'MMMM dd, yyyy' → December 31, 2023
   'EEE, MMM d' → Sun, Dec 31
   

2. Form Integration

   CustomDatePicker(
     showLabel: true,
     labelText: 'Birth Date',
     hintText: 'Select your birth date',
     // ... other params
   )
   

3. Validation Handling

   final formKey = GlobalKey<FormState>();
      
   Form(
     key: formKey,
     child: Column(
       children: [
         CustomDatePicker(
           initialDate: _selectedDate,
           // ... other params
         ),
         ElevatedButton(
           onPressed: () {
             if (_selectedDate == null) {
               ScaffoldMessenger.of(context).showSnackBar(
                 SnackBar(content: Text('Please select a date')),
               );
             }
           },
           child: Text('Submit'),
         ),
       ],
     ),
   )
   

4. Accessibility

   • Ensure sufficient color contrast
   • Provide clear labels
   • Support screen readers with semantic widgets

🔄 Comparison with Flutter's showDatePicker

Feature	CustomDatePicker	showDatePicker
UI Customization	Extensive	Limited
Clear Button	Supported	Not supported
Date Formatting	Flexible	Fixed
Input Options	TextField or custom	Button only
Label Support	Yes	No
Theme Integration	Full control	Partial
Form Integration	Easy	Requires wrapper