CupertinoTimerPicker

A countdown timer picker in iOS style.

It can show a countdown duration with hour, minute and second spinners. The duration is bound between 0 and 23 hours 59 minutes 59 seconds.

Inherits: LayoutControl

Properties

• alignment(Alignment) –

  Defines how this picker should be positioned within its parent.

• bgcolor(ColorValue | None) –

  The background color of this picker.

• item_extent(Number) –

  The uniform height of all children.

• minute_interval(int) –

  The granularity of the minute spinner.

• mode(CupertinoTimerPickerMode) –

  The mode of this picker.

• second_interval(int) –

  The granularity of the second spinner.

• value(DurationValue) –

  The initial duration of the countdown timer.

Events

• on_change(ControlEventHandler[CupertinoTimerPicker] | None) –

  Called when the timer's duration changes.

Examples

Live example

Basic Example

import time

import flet as ft


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    timer_picker_value_ref = ft.Ref[ft.Text]()

    def handle_timer_picker_change(e: ft.Event[ft.CupertinoTimerPicker]):
        timer_picker_value_ref.current.value = time.strftime(
            "%H:%M:%S", time.gmtime(e.data.in_seconds)
        )
        # timer_picker_value_ref.current.value = f"{e.data.in_hours}:{(e.data.in_minutes % 60)}:{(e.data.in_seconds % 60) % 60}"
        page.update()

    timer_picker = ft.CupertinoTimerPicker(
        value=300,
        second_interval=10,
        minute_interval=1,
        mode=ft.CupertinoTimerPickerMode.HOUR_MINUTE_SECONDS,
        on_change=handle_timer_picker_change,
    )

    page.add(
        ft.Row(
            tight=True,
            controls=[
                ft.Text("TimerPicker Value:", size=23),
                ft.CupertinoButton(
                    content=ft.Text(
                        ref=timer_picker_value_ref,
                        value="00:01:10",
                        size=23,
                        color=ft.CupertinoColors.DESTRUCTIVE_RED,
                    ),
                    on_click=lambda e: page.show_dialog(
                        ft.CupertinoBottomSheet(
                            content=timer_picker,
                            height=216,
                            padding=ft.Padding.only(top=6),
                        )
                    ),
                ),
            ],
        ),
    )


ft.run(main)

Properties

alignment class-attribute instance-attribute

alignment: Alignment = field(default_factory=lambda: CENTER)

Defines how this picker should be positioned within its parent.

bgcolor class-attribute instance-attribute

bgcolor: ColorValue | None = None

The background color of this picker.

item_extent class-attribute instance-attribute

item_extent: Number = 32.0

The uniform height of all children.

Raises:

• ValueError –

  If item_extent is not strictly greater than 0.0.

minute_interval class-attribute instance-attribute

minute_interval: int = 1

The granularity of the minute spinner.

Note

Must be a positive integer factor of 60.

Raises:

• ValueError –

  If minute_interval is not a positive integer factor of 60.

mode class-attribute instance-attribute

mode: CupertinoTimerPickerMode = HOUR_MINUTE_SECONDS

The mode of this picker.

second_interval class-attribute instance-attribute

second_interval: int = 1

The granularity of the second spinner.

Note

Must be a positive integer factor of 60.

Raises:

• ValueError –

  If second_interval is not a positive integer factor of 60.

value class-attribute instance-attribute

value: DurationValue = field(
    default_factory=lambda: Duration()
)

The initial duration of the countdown timer.

If specified as an integer, it will be assumed to be in seconds.

Raises:

• ValueError –

  If value is negative or 24 hours or more.

• ValueError –

  If value is not a multiple of minute_interval or second_interval.

Events

on_change class-attribute instance-attribute

on_change: (
    ControlEventHandler[CupertinoTimerPicker] | None
) = None

Called when the timer's duration changes.

The data property of the event handler contains the new duration value. Its type matches value: if value is a Duration, then data is also a Duration; otherwise, it is an int (seconds).