Time 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)

1@override
2Widget build(BuildContext _) => const FTimeField(
3  label: Text('Appointment Time'),
4  description: Text('Select a Time for your appointment.'),
5);
6

CLI

To generate and customize this style:

dart run forui style create time-field

Usage

`FTimeField(...)`

1FTimeField(
2  style: const .delta(
3    fieldStyle: .delta(labelPadding: .symmetric(vertical: 7)),
4  ),
5  enabled: true,
6  hour24: false,
7)

`FTimeField.picker(...)`

1FTimeField.picker(
2  style: const .delta(
3    fieldStyle: .delta(labelPadding: .symmetric(vertical: 7)),
4  ),
5  enabled: true,
6  hour24: false,
7)

Examples

24 Hours

1@override
2Widget build(BuildContext _) => const FTimeField(
3  label: Text('Appointment Time'),
4  description: Text('Select a Time for your appointment.'),
5  hour24: true,
6);
7

Picker Only

1@override
2Widget build(BuildContext _) => const FTimeField.picker(
3  label: Text('Appointment Time'),
4  description: Text('Select a time for your appointment.'),
5);
6

Custom Validation

1@override
2Widget build(BuildContext context) => FTimeField(
3  control: .managed(
4    validator: (time) => time?.hour == 12 ? 'Time cannot be noon.' : null,
5  ),
6  label: const Text('Appointment Time'),
7  description: const Text('Select a time for your appointment.'),
8);
9

Form

1class FormTimeFieldExample extends StatefulWidget {
2  @override
3  State<FormTimeFieldExample> createState() => _FormTimeFieldExampleState();
4}
5
6class _FormTimeFieldExampleState extends State<FormTimeFieldExample> {
7  final _key = GlobalKey<FormState>();
8  late final _startController = FTimeFieldController(
9    validator: (time) => switch (time) {
10      null => 'Please select a start time.',
11      _ when time < .now() => 'Start Time must be in the future.',
12      _ => null,
13    },
14  );
15
16  @override
17  void dispose() {
18    _startController.dispose();
19    super.dispose();
20  }
21
22  @override
23  Widget build(BuildContext _) => Form(
24    key: _key,
25    child: Column(
26      children: [
27        FTimeField(
28          control: .managed(controller: _startController),
29          label: const Text('Start Time'),
30          description: const Text('Select a start time.'),
31          autovalidateMode: .disabled,
32        ),
33        const SizedBox(height: 20),
34        FTimeField(
35          control: .managed(
36            validator: (time) => switch (time) {
37              null => 'Please select an end time.',
38              _
39                  when _startController.value != null &&
40                      time < _startController.value! =>
41                'End Time must be after start time.',
42              _ => null,
43            },
44          ),
45          label: const Text('End Time'),
46          description: const Text('Select an end time.'),
47          autovalidateMode: .disabled,
48        ),
49        const SizedBox(height: 25),
50        FButton(
51          child: const Text('Submit'),
52          onPress: () {
53            if (_key.currentState!.validate()) {
54              // Form is valid, process the dates
55            }
56          },
57        ),
58      ],
59    ),
60  );
61}
62

On this page