Skip to content

CupertinoButton

An iOS-style button.

ft.CupertinoButton("Tap me")

CupertinoButton

Basic CupertinoButton

Inherits: LayoutControl

Properties

Events

Methods

Examples#

Live example

Basic Example#

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.CupertinoButton(
            bgcolor=ft.CupertinoColors.LIGHT_BACKGROUND_GRAY,
            opacity_on_click=0.3,
            on_click=lambda e: print("Normal CupertinoButton clicked!"),
            content=ft.Text(
                value="Normal CupertinoButton",
                color=ft.CupertinoColors.DESTRUCTIVE_RED,
            ),
        ),
        ft.CupertinoButton(
            bgcolor=ft.Colors.PRIMARY,
            alignment=ft.Alignment.TOP_LEFT,
            border_radius=ft.border_radius.all(15),
            opacity_on_click=0.5,
            on_click=lambda e: print("Filled CupertinoButton clicked!"),
            content=ft.Text("Filled CupertinoButton", color=ft.Colors.YELLOW),
        ),
        ft.CupertinoButton(
            bgcolor=ft.Colors.PRIMARY,
            disabled=True,
            alignment=ft.Alignment.TOP_LEFT,
            opacity_on_click=0.5,
            content=ft.Text("Disabled CupertinoButton"),
        ),
        ft.Button(
            adaptive=True,
            bgcolor=ft.CupertinoColors.SYSTEM_TEAL,
            content=ft.Row(
                tight=True,
                controls=[
                    ft.Icon(ft.Icons.FAVORITE, color="pink"),
                    ft.Text("Button+adaptive"),
                ],
            ),
        ),
    )


ft.run(main)

basic

Properties#

alignment class-attribute instance-attribute #

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

The alignment of this button's content.

Typically buttons are sized to be just big enough to contain the child and its padding. If the button's size is constrained to a fixed size, this property defines how the child is aligned within the available space.

autofocus class-attribute instance-attribute #

autofocus: bool = False

Whether this button should be selected as the initial focus when no other node in its scope is currently focused.

bgcolor class-attribute instance-attribute #

bgcolor: ColorValue | None = None

The background color of this button.

border_radius class-attribute instance-attribute #

border_radius: BorderRadiusValue = field(
    default_factory=lambda: all(8.0)
)

The radius of the button's corners when it has a background color.

color class-attribute instance-attribute #

color: ColorValue | None = None

The color of this button's text.

content class-attribute instance-attribute #

content: StrOrControl | None = None

The content of this button.

disabled_bgcolor class-attribute instance-attribute #

disabled_bgcolor: ColorValue | None = None

The background color of this button when disabled.

focus_color class-attribute instance-attribute #

focus_color: ColorValue | None = None

The color to use for the focus highlight for keyboard interactions.

Defaults to a slightly transparent bgcolor. If bgcolor is None, defaults to a slightly transparent CupertinoColors.ACTIVE_BLUE. 'Slightly transparent' in this context means the color is used with an opacity of 0.80, a brightness of 0.69 and a saturation of 0.835.

icon class-attribute instance-attribute #

icon: IconDataOrControl | None = None

An icon shown in this button.

icon_color class-attribute instance-attribute #

icon_color: ColorValue | None = None

The foreground color of the icon.

min_size class-attribute instance-attribute #

min_size: Size | None = None

The minimum size of this button.

mouse_cursor class-attribute instance-attribute #

mouse_cursor: MouseCursor | None = None

The cursor for a mouse pointer when it enters or is hovering over this button.

opacity_on_click class-attribute instance-attribute #

opacity_on_click: Number = 0.4

Defines the opacity of the button when it is clicked.

When not pressed, the button has an opacity of 1.0.

Raises:

padding class-attribute instance-attribute #

padding: PaddingValue | None = None

The amount of space to surround the content control inside the bounds of the button.

size class-attribute instance-attribute #

size: CupertinoButtonSize = LARGE

The size of this button.

url class-attribute instance-attribute #

url: str | Url | None = None

The URL to open when this button is clicked.

Additionally, if on_click event callback is provided, it is fired after that.

Events#

on_blur class-attribute instance-attribute #

on_blur: ControlEventHandler[CupertinoButton] | None = None

Called when this button loses focus.

on_click class-attribute instance-attribute #

on_click: ControlEventHandler[CupertinoButton] | None = None

Called when a user clicks this button.

on_focus class-attribute instance-attribute #

on_focus: ControlEventHandler[CupertinoButton] | None = None

Called when this button receives focus.

on_long_press class-attribute instance-attribute #

on_long_press: (
    ControlEventHandler[CupertinoButton] | None
) = None

Called when a user long-presses this button.

Methods#

focus async #

focus()