Form
Time Picker
A time picker that allows a time to be selected. The picker supports arrow key navigation. Recommended for touch devices.
The picker supports arrow key navigation:
- Up/Down arrows: Increment/decrement selected value
- Left/Right arrows: Move between wheels
Recommended for touch devices.
FTimePicker(
control: FTimePickerControl.managed(initial: FTime.now()),
hour24: false,
);CLI
To generate and customize this style:
dart run forui style create time-pickerUsage
FTimePicker(...)
FTimePicker(
control: FTimePickerControl.managed(initial: FTime.now(), onChange: (time) {}),
style: (style) => style.copyWith(...),
hour24: false,
hourInterval: 1,
minuteInterval: 1,
);Examples
24 Hour Clock
FTimePicker(
control: FTimePickerControl.managed(initial: FTime.now()),
hour24: true,
);With Custom Intervals
FTimePicker(
control: FTimePickerControl.managed(initial: FTime.now()),
hourInterval: 2,
minuteInterval: 5,
);Animated
class AnimatedTimePickerPage extends StatefulWidget {
@override
State<AnimatedTimePickerPage> createState() => _AnimatedTimePickerPageState();
}
class _AnimatedTimePickerPageState extends State<AnimatedTimePickerPage> {
static final _random = Random();
final _controller = FTimePickerController(time: FTime.now());
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 300,
child: FTimePicker(control: FTimePickerControl.managed(controller: _controller)),
),
FButton(
child: const Text('Funny button'),
onPress: () => _controller.animateTo(FTime(_random.nextInt(24), _random.nextInt(60))),
),
],
);
}