Picker

The picker supports arrow key navigation:

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

Recommended for touch devices.

const FPicker(
  children: [
    FPickerWheel(
      children: [
        Text('January'),
        Text('February'),
        Text('March'),
        Text('April'),
        Text('May'),
        Text('June'),
        Text('July'),
        Text('August'),
        Text('September'),
        Text('October'),
        Text('November'),
        Text('December'),
      ],
    ),
  ],
);

CLI

To generate and customize this style:

dart run forui style create picker

Usage

`FPicker(...)`

const FPicker(
  controller: FPickerController(initialIndexes: []),
  style: FPickerStyle(...),
  onChange: (indexes) {},
  children: [
    FPickerWheel(
      flex: 2,
      loop: true,
      autofocus: true,
      focusNode: FocusNode(),
      onFocusChange: (focused) {},
      children: const [
        Text('1'),
        Text('2'),
      ],
    ),
    FPickerWheel.builder(
      flex: 2,
      autofocus: true,
      focusNode: FocusNode(),
      onFocusChange: (focused) {},
      builder: (context, index) => Text('$index'),
    ),
  ],
);

Examples

Loop

const FPicker(
  children: [
    FPickerWheel(
      loop: true,
      children: [
        Text('January'),
        Text('February'),
        Text('March'),
        Text('April'),
        Text('May'),
        Text('June'),
        Text('July'),
        Text('August'),
        Text('September'),
        Text('October'),
        Text('November'),
        Text('December'),
      ],
    ),
  ],
);

Lazy

FPicker(
  children: [
    FPickerWheel.builder(
      builder: (context, index) => Text('$index'),
    ),
  ],
);

Multiple Wheels

SizedBox(
  width: 200,
  child: FPicker(
    children: [
      const FPickerWheel(
        flex: 3,
        loop: true,
        children: [
          Text('January'),
          Text('February'),
          Text('March'),
          Text('April'),
          Text('May'),
          Text('June'),
          Text('July'),
          Text('August'),
          Text('September'),
          Text('October'),
          Text('November'),
          Text('December'),
        ],
      ),
      FPickerWheel.builder(
        flex: 2,
        builder: (context, index) => Text('${(index % 31) + 1}'),
      ),
    ],
  ),
);

With Separators

SizedBox(
  width: 200,
  child: FPicker(
    children: [
      FPickerWheel.builder(
        builder: (context, index) => Text((index % 12).toString().padLeft(2, '0')),
      ),
      const Text(':'),
      FPickerWheel.builder(
        builder: (context, index) => Text((index % 60).toString().padLeft(2, '0')),
      ),
      const FPickerWheel(
        children: [
          Text('AM'),
          Text('PM'),
        ],
      ),
    ],
  ),
);

On this page