Time Picker

The picker supports arrow key navigation:

Up/Down arrows: Increment/decrement selected value
Left/Right arrows: Move between wheels

Recommended for touch devices.

1@override
2Widget build(BuildContext context) =>
3    FTimePicker(control: .managed(initial: .now()));
4

CLI

To generate and customize this style:

dart run forui style create time-picker

Usage

`FTimePicker(...)`

1FTimePicker(
2  style: .delta(padding: .all(5)),
3  hour24: false,
4  hourInterval: 1,
5  minuteInterval: 1,
6)

Examples

24 Hour Clock

1@override
2Widget build(BuildContext context) => FTimePicker(
3  control: .managed(initial: .now()),
4  hour24: true,
5);
6

With Custom Intervals

1@override
2Widget build(BuildContext context) => FTimePicker(
3  control: .managed(initial: .now()),
4  hourInterval: 2,
5  minuteInterval: 5,
6);
7

Animated

1class AnimatedTimePickerExample extends StatefulWidget {
2  @override
3  State<AnimatedTimePickerExample> createState() =>
4      _AnimatedTimePickerExampleState();
5}
6
7class _AnimatedTimePickerExampleState extends State<AnimatedTimePickerExample> {
8  static final _random = Random();
9  final _controller = FTimePickerController(time: .now());
10
11  @override
12  void dispose() {
13    _controller.dispose();
14    super.dispose();
15  }
16
17  @override
18  Widget build(BuildContext context) => Column(
19    mainAxisSize: .min,
20    children: [
21      SizedBox(
22        height: 300,
23        child: FTimePicker(control: .managed(controller: _controller)),
24      ),
25      FButton(
26        child: const Text('Funny button'),
27        onPress: () => _controller.animateTo(
28          FTime(_random.nextInt(24), _random.nextInt(60)),
29        ),
30      ),
31    ],
32  );
33}
34

CLI

Usage

FTimePicker(...)

Examples

24 Hour Clock

With Custom Intervals

Animated

On this page

`FTimePicker(...)`