Skip to content

TsaiTimePicker

Wheel-style 24-hour time picker. Atoms are TsaiTimeWheelColumn, TsaiTimeColon, and TsaiTimeWheel. The wheel is 342×220 with five 44-pixel rows, an indigo highlight on the selected row, and ramped type (22 / 17 / 15). Hour and minute wheels are 60 wide with a 12-pixel colon and 12-pixel gaps on each side.

showTsaiTimePicker opens a content-sized Select time sheet with Cancel / Apply. TsaiTimeField is the input-styled control that opens that sheet. minuteStep may be 1, 5, or 15.

Open live example

TsaiTimeField(
  value: time,
  minuteStep: 5,
  onChanged: (value) => setState(() => time = value),
);