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) => const FPicker(
3  children: [
4    FPickerWheel(
5      children: [
6        Text('January'),
7        Text('February'),
8        Text('March'),
9        Text('April'),
10        Text('May'),
11        Text('June'),
12        Text('July'),
13        Text('August'),
14        Text('September'),
15        Text('October'),
16        Text('November'),
17        Text('December'),
18      ],
19    ),
20  ],
21);
22

CLI

To generate and customize this style:

dart run forui style create picker

Usage

`FPicker(...)`

1FPicker(
2  style: const .delta(spacing: 5),
3  children: [
4    FPickerWheel(children: [for (var i = 1; i <= 12; i++) Text('$i')]),
5    const Text(':'),
6    FPickerWheel(
7      children: [for (var i = 0; i < 60; i++) Text('$i'.padLeft(2, '0'))],
8    ),
9  ],
10  debugLabel: '',
11)

`FPickerWheel(...)`

1FPickerWheel(
2  loop: false,
3  flex: 1,
4  itemExtent: null,
5  children: [for (var i = 1; i <= 12; i++) Text('$i')],
6)

`FPickerWheel.builder(...)`

1FPickerWheel.builder(
2  flex: 1,
3  itemExtent: null,
4  builder: (context, index) => Text('$index'),
5)

Examples

Loop

1@override
2Widget build(BuildContext context) => const FPicker(
3  children: [
4    FPickerWheel(
5      loop: true,
6      children: [
7        Text('January'),
8        Text('February'),
9        Text('March'),
10        Text('April'),
11        Text('May'),
12        Text('June'),
13        Text('July'),
14        Text('August'),
15        Text('September'),
16        Text('October'),
17        Text('November'),
18        Text('December'),
19      ],
20    ),
21  ],
22);
23

Lazy

1@override
2Widget build(BuildContext context) => FPicker(
3  children: [FPickerWheel.builder(builder: (context, index) => Text('$index'))],
4);
5

Multiple Wheels

1@override
2Widget build(BuildContext context) => FPicker(
3  children: [
4    const FPickerWheel(
5      flex: 3,
6      loop: true,
7      children: [
8        Text('January'),
9        Text('February'),
10        Text('March'),
11        Text('April'),
12        Text('May'),
13        Text('June'),
14        Text('July'),
15        Text('August'),
16        Text('September'),
17        Text('October'),
18        Text('November'),
19        Text('December'),
20      ],
21    ),
22    FPickerWheel.builder(
23      flex: 2,
24      builder: (context, index) => Text('${(index % 31) + 1}'),
25    ),
26  ],
27);
28

With Separators

1@override
2Widget build(BuildContext context) => SizedBox(
3  width: 200,
4  child: FPicker(
5    children: [
6      FPickerWheel.builder(
7        builder: (context, index) =>
8            Text((index % 12).toString().padLeft(2, '0')),
9      ),
10      const Text(':'),
11      FPickerWheel.builder(
12        builder: (context, index) =>
13            Text((index % 60).toString().padLeft(2, '0')),
14      ),
15      const FPickerWheel(children: [Text('AM'), Text('PM')]),
16    ],
17  ),
18);
19

On this page