CustomDatePicker

CustomDatePicker is a highly customizable date selection widget that provides a clean, reusable implementation of Flutter's date picker with enhanced styling options and callbacks. It simplifies date selection while offering full control over the picker's appearance and behavior.

✨ Key Features

Customizable UI (colors, borders, shapes)
Flexible date formatting
Initial date selection
Date range constraints
Dual callback system (returns both DateTime and formatted string)
Works with any trigger widget
Theme integration

🚀 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_date_picker: ^0.0.2

💡 Basic Usage

Default Button Implementation

CustomDatePicker(
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  onDateSelected: (date) => print(date),
  formattedDate: (formatted) => print(formatted),
)

CustomDatePicker(
  dateWidget: Icon(Icons.calendar_today),
  // ... other params
)

With Custom Styling

CustomDatePicker(
  buttonColor: Colors.green,
  textColor: Colors.white,
  backgroundColor: Colors.grey[200]!,
  borderRadius: 12,
  // ... 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
`formattedDate`	`ValueChanged<String?>`	Formatted date callback	Required
`dateFormat`	`String`	Display format pattern	`'yyyy-MM-dd'`
`buttonColor`	`Color`	Picker button color	`Colors.blue`
`textColor`	`Color`	Picker text color	`Colors.white`
`backgroundColor`	`Color`	Picker background	`Colors.white`
`borderRadius`	`double`	Button corner radius	`8.0`
`dateWidget`	`Widget?`	Custom trigger widget	`null`

🌟 Best Practices

Date Formatting

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

Form Integration

TextFormField(
  controller: TextEditingController(
    text: _selectedDate != null 
      ? DateFormat('dd/MM/yyyy').format(_selectedDate!)
      : ''
  ),
  readOnly: true,
  onTap: () => CustomDatePicker(...),
  decoration: InputDecoration(
    labelText: 'Select Date',
    suffixIcon: Icon(Icons.calendar_today),
  ),
)

Validation

CustomDatePicker(
  firstDate: DateTime.now(),
  lastDate: DateTime.now().add(Duration(days: 30)),
  // Only allow dates in next 30 days
)

Accessibility
- Ensure sufficient contrast in colors
- Provide clear visual feedback
- Include both icon and text when possible

📱 Example App Included

The implementation includes examples for:

Default button implementation
Icon trigger widget
Formatted date display
Snackbar feedback

Pro Tip: For production apps, create a consistent date picker style:

class AppDatePicker {
  static CustomDatePicker standard({
    required ValueChanged<DateTime?> onDateSelected,
    required ValueChanged<String?> formattedDate,
    DateTime? initialDate,
  }) {
    return CustomDatePicker(
      initialDate: initialDate,
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
      buttonColor: Colors.blue,
      textColor: Colors.white,
      backgroundColor: Colors.grey[100]!,
      borderRadius: 8,
      dateFormat: 'dd MMM yyyy',
      onDateSelected: onDateSelected,
      formattedDate: formattedDate,
    );
  }
}