Dropdown TimePicker

dropdown_timepicker is a dropdown-based time picker for Flutter forms. It supports 12-hour and 24-hour layouts, optional field visibility, custom styling, and built-in validation.

Highlights

• 12-hour and 24-hour time selection
• Configurable hour range with startHours and endHours
• Optional hours, minutes, and AM/PM dropdowns
• Safe handling of invalid initial values
• Form validation support with custom error messages
• Example app included in the repository

Preview

Installation

Add the package to pubspec.yaml:

dependencies:
  dropdown_timepicker: ^1.0.0

Then run:

flutter pub get

Basic Usage

DropdownTimePicker(
  onChangedHours: (value) {
    debugPrint('Hours: $value');
  },
  onChangedMins: (value) {
    debugPrint('Minutes: $value');
  },
  onChangedAmPm: (value) {
    debugPrint('AM/PM: $value');
  },
)

Example With Validation

final formKey = GlobalKey<FormState>();

Form(
  key: formKey,
  child: DropdownTimePicker(
    isFormValidator: true,
    isDropdownHideUnderline: true,
    selectedHours: 9,
    selectedMins: 30,
    selectedAmPm: 'AM',
    onChangedHours: (value) {
      debugPrint('Hours: $value');
    },
    onChangedMins: (value) {
      debugPrint('Minutes: $value');
    },
    onChangedAmPm: (value) {
      debugPrint('AM/PM: $value');
    },
  ),
)

Common Configurations

24-hour mode

const DropdownTimePicker(
  is24format: true,
  selectedHours: 18,
  selectedMins: 45,
)

Limit the available hours

const DropdownTimePicker(
  startHours: 9,
  endHours: 17,
)

Hide specific selectors

const DropdownTimePicker(
  showAmPm: false,
  showMins: false,
)

Notes

• In 12-hour mode, valid hour values are 1..12.
• In 24-hour mode, valid hour values are 0..23.
• Invalid initial values are ignored instead of causing runtime issues.
• showAmPm is ignored automatically when is24format is true.

Example App

The example project lives in the repository at example.

Source and Support

• Repository: github.com/Robertrobinson777/dropdown_timepicker
• Issues: github.com/Robertrobinson777/dropdown_timepicker/issues
• Web demo: timepicker.robertrobinson.in
• Support: Buy Me a Coffee