Form

Time Field

A time field allows a time to be selected from a picker or input field.

It is recommended to use FTimeField.picker on touch devices and FTimeField.new on non-primarily touch devices.

The input field supports both arrow key navigation:

  • Up/Down arrows: Increment/decrement values
  • Left/Right arrows: Move between time segments

The input field does not support the following locales that use non-western numerals & scripts that require composing, it will default to English:

  • Arabic
  • Assamese
  • Bengali
  • Persian/Farsi
  • Marathi
  • Burmese
  • Nepali
  • Pashto
  • Tamil
  • Amharic
  • Kannada
  • Korean
  • Punjabi
  • Thai

The following locales will default to Chinese (zh):

  • Chinese (Hong Kong)
  • Chinese (Taiwan)

CLI

To generate a specific style for customization:

dart run forui style create time-field

Usage

FTimeField(...)

1FTimeField(
2 size: .md,
3 style: .delta(
4 fieldStyles: .delta([
5 .all(const .delta(labelPadding: .value(.symmetric(vertical: 7)))),
6 ]),
7 ),
8 enabled: true,
9 hour24: false,
10)

FTimeField.picker(...)

1FTimeField.picker(
2 size: .md,
3 style: .delta(
4 fieldStyles: .delta([
5 .all(const .delta(labelPadding: .value(.symmetric(vertical: 7)))),
6 ]),
7 ),
8 enabled: true,
9 hour24: false,
10)

Examples

24 Hours

Picker Only

Popover Builder

Custom Validation

Form

On this page