Pickers

FlutKit provides flexible picker utilities that integrate seamlessly with both CustomTextFormField and Flutter’s default TextFormField. This approach keeps your forms consistent while allowing rich user interactions for selecting dates, times, and colors.

Date Picker

Overview

The Date Picker is implemented as a helper method (Picker.date) and is typically triggered from a read-only input field. This pattern prevents manual text editing and ensures valid date values.

Recommended Usage Pattern

• Use readOnly: true to prevent manual input
• Use mouseCursor: SystemMouseCursors.click to signal interactivity
• Trigger the picker inside onTap

Example Implementation

CustomTextFormField(
  controller: _defController,
  readOnly: true, // set as read only
  mouseCursor: SystemMouseCursors.click, // set click cursor
  hintText: 'Choose Date',
  suffixIcon: Icons.calendar_today_outlined,
  // initialize custom date picker
  onTap: () => Picker.date(
    context,
    _defController,
  ),
),

CustomTextFormField(
  controller: _defController,
  readOnly: true, // set as read only
  mouseCursor: SystemMouseCursors.click, // set click cursor
  hintText: 'Choose Date',
  suffixIcon: Icons.calendar_today_outlined,
  // initialize custom date picker
  onTap: () => Picker.date(
    context,
    _defController,
  ),
),

Constructor

Future<void> date(
  BuildContext context,
  TextEditingController controller, {
  DateTime? initialDate,
  DateTime? firstDate,
  DateTime? lastDate,
  String format = 'EEEE, d MMMM yyyy',
  String? locale,
  dynamic Function(DateTime)? onDateSelected,
})

Future<void> date(
  BuildContext context,
  TextEditingController controller, {
  DateTime? initialDate,
  DateTime? firstDate,
  DateTime? lastDate,
  String format = 'EEEE, d MMMM yyyy',
  String? locale,
  dynamic Function(DateTime)? onDateSelected,
})

Parameter Explanation

• context: BuildContext required to show the date picker dialog
• controller: TextEditingController used to display the selected date
• initialDate: Pre-selected date when the picker opens
• firstDate: Minimum selectable date
• lastDate: Maximum selectable date
• format: Date format applied to the text field value
• locale: Optional locale override (e.g. en, id)
• onDateSelected: Callback triggered after a date is selected

Common Use Cases

• Filter forms (start / end date)
• Booking or reservation forms
• User profile (date of birth)

Time Picker

Overview

The Time Picker works similarly to the Date Picker and is triggered from a read-only input field.

Example Implementation

CustomTextFormField(
  controller: _defTimeController,
  readOnly: true, // set as read only
  mouseCursor: SystemMouseCursors.click, // set click cursor
  hintText: 'Choose Time',
  suffixIcon: Icons.timer_outlined,
  // initialize time picker
  onTap: () => Picker.time(
    context,
    _defTimeController,
  ),
),

CustomTextFormField(
  controller: _defTimeController,
  readOnly: true, // set as read only
  mouseCursor: SystemMouseCursors.click, // set click cursor
  hintText: 'Choose Time',
  suffixIcon: Icons.timer_outlined,
  // initialize time picker
  onTap: () => Picker.time(
    context,
    _defTimeController,
  ),
),

Constructor

Future<void> time(
  BuildContext context,
  TextEditingController controller, {
  TimeOfDay? initialTime,
  bool use24HourFormat = false,
  dynamic Function(TimeOfDay)? onTimeSelected,
})

Future<void> time(
  BuildContext context,
  TextEditingController controller, {
  TimeOfDay? initialTime,
  bool use24HourFormat = false,
  dynamic Function(TimeOfDay)? onTimeSelected,
})

Parameter Explanation

• context: BuildContext required to show the time picker dialog
• controller: TextEditingController used to display the selected time
• initialTime: Pre-selected time when the picker opens
• use24HourFormat: Enables 24-hour time format
• onTimeSelected: Callback triggered after a time is selected

Common Use Cases

• Scheduling forms
• Event creation
• Booking time slots

Color Picker

Overview

FlutKit also includes a built-in ColorPickerField that supports multiple picker engines and display modes.

Constructor

ColorPickerField({
  Key? key,
  TextEditingController? controller,
  required String labelText,
  Color? initialColor,
  dynamic Function(String)? onColorSelected,
  String? Function(String?)? validator,
  FormSize size = FormSize.medium,
  double radius = 4,
  ColorPickerType pickerType = ColorPickerType.flutter,
  ColorPickerDisplay displayAs = ColorPickerDisplay.textField,
})

ColorPickerField({
  Key? key,
  TextEditingController? controller,
  required String labelText,
  Color? initialColor,
  dynamic Function(String)? onColorSelected,
  String? Function(String?)? validator,
  FormSize size = FormSize.medium,
  double radius = 4,
  ColorPickerType pickerType = ColorPickerType.flutter,
  ColorPickerDisplay displayAs = ColorPickerDisplay.textField,
})

Parameter Explanation

• controller: Optional controller for the text field
• labelText: Field label displayed above or inside the input
• initialColor: Pre-selected color value
• onColorSelected: Callback returning the selected color (hex/string)
• validator: Optional form validation logic
• size: Field size (small, medium, large)
• radius: Border radius of the input field
• pickerType: Picker engine (flutter or flex)
• displayAs: Display mode (e.g. text field)

Example Implementations

Default Color Picker

ColorPickerField(
  labelText: 'Pick a Color',
  onColorSelected: (color) => debugPrint(color),
),

ColorPickerField(
  labelText: 'Pick a Color',
  onColorSelected: (color) => debugPrint(color),
),

Color Picker with Initial Color

ColorPickerField(
  labelText: 'Pick a Color',
  initialColor: kSecondaryColor,
  onColorSelected: (color) => debugPrint(color),
),

ColorPickerField(
  labelText: 'Pick a Color',
  initialColor: kSecondaryColor,
  onColorSelected: (color) => debugPrint(color),
),

Flex Color Picker

ColorPickerField(
  labelText: 'Pick a Color',
  pickerType: ColorPickerType.flex,
  initialColor: kInfoColor,
  onColorSelected: (color) => debugPrint(color),
),

ColorPickerField(
  labelText: 'Pick a Color',
  pickerType: ColorPickerType.flex,
  initialColor: kInfoColor,
  onColorSelected: (color) => debugPrint(color),
),

Best Practices

• Always use readOnly inputs for date and time pickers
• Provide clear visual indicators (icons) for picker fields
• Keep formatting consistent across the application
• Use locale-aware formatting for international apps
• Prefer ColorPickerField over custom implementations for consistency

Demo

You can view live examples of Date Picker, Time Picker, and Color Picker in:

Forms > Pickers