CupertinoButton

An iOS-style button.

Example:

ft.CupertinoButton("Tap me")

Basic CupertinoButton

Inherits: LayoutControl

Properties

• alignment - The alignment of this button's content.
• autofocus - Whether this button should be selected as the initial focus when no other node in its scope is currently focused.
• bgcolor - The background color of this button.
• border_radius - The radius of the button's corners when it has a background color.
• color - The color of this button's text.
• content - The content of this button.
• disabled_bgcolor - The background color of this button when disabled.
• focus_color - The color to use for the focus highlight for keyboard interactions.
• icon - An icon shown in this button.
• icon_color - The foreground color of the icon.
• min_size - The minimum size of this button.
• mouse_cursor - The cursor for a mouse pointer when it enters or is hovering over this button.
• opacity_on_click - Defines the opacity of the button when it is clicked.
• padding - The amount of space to surround the content control inside the bounds of the button.
• size - The size of this button.
• url - The URL to open when this button is clicked.

Events

• on_blur - Called when this button loses focus.
• on_click - Called when a user clicks this button.
• on_focus - Called when this button receives focus.
• on_long_press - Called when a user long-presses this button.

Methods

• focus - Requests focus for this control.

Examples

Live example

Basic Example

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.CupertinoButton(
                        bgcolor=ft.CupertinoColors.LIGHT_BACKGROUND_GRAY,
                        opacity_on_click=0.3,
                        on_click=lambda _: 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.BorderRadius.all(15),
                        opacity_on_click=0.5,
                        on_click=lambda _: 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"),
                            ],
                        ),
                    ),
                ],
            ),
        )
    )


if __name__ == "__main__":
    ft.run(main)

Properties

buildalignmentclass-attributeinstance-attribute

alignment: Optional[Alignment] = field(default_factory=(lambda: Alignment.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.

buildautofocusclass-attributeinstance-attribute

autofocus: bool = False

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

buildbgcolorclass-attributeinstance-attribute

bgcolor: Optional[ColorValue] = None

The background color of this button.

buildborder_radiusclass-attributeinstance-attribute

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

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

buildcolorclass-attributeinstance-attribute

color: Optional[ColorValue] = None

The color of this button's text.

buildcontentclass-attributeinstance-attribute

content: Optional[StrOrControl] = None

The content of this button.

builddisabled_bgcolorclass-attributeinstance-attribute

disabled_bgcolor: Optional[ColorValue] = None

The background color of this button when disabled.

buildfocus_colorclass-attributeinstance-attribute

focus_color: Optional[ColorValue] = 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 flet.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.

buildiconclass-attributeinstance-attribute

icon: Optional[IconDataOrControl] = None

An icon shown in this button.

buildicon_colorclass-attributeinstance-attribute

icon_color: Optional[ColorValue] = None

The foreground color of the icon.

buildmin_sizeclass-attributeinstance-attribute

min_size: Optional[Size] = None

The minimum size of this button.

buildmouse_cursorclass-attributeinstance-attribute

mouse_cursor: Optional[MouseCursor] = None

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

buildopacity_on_clickclass-attributeinstance-attribute

opacity_on_click: Annotated[Number, V.between(0.0, 1.0)] = 0.4

Defines the opacity of the button when it is clicked.

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

Raises:

• ValueError - If it is not between 0.0 and 1.0, inclusive.

buildpaddingclass-attributeinstance-attribute

padding: Optional[PaddingValue] = None

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

buildsizeclass-attributeinstance-attribute

size: CupertinoButtonSize = CupertinoButtonSize.LARGE

The size of this button.

buildurlclass-attributeinstance-attribute

url: Optional[Union[str, Url]] = None

The URL to open when this button is clicked.

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

Events

bolton_blurclass-attributeinstance-attribute

on_blur: Optional[ControlEventHandler[CupertinoButton]] = None

Called when this button loses focus.

bolton_clickclass-attributeinstance-attribute

on_click: Optional[ControlEventHandler[CupertinoButton]] = None

Called when a user clicks this button.

bolton_focusclass-attributeinstance-attribute

on_focus: Optional[ControlEventHandler[CupertinoButton]] = None

Called when this button receives focus.

bolton_long_pressclass-attributeinstance-attribute

on_long_press: Optional[ControlEventHandler[CupertinoButton]] = None

Called when a user long-presses this button.

Methods

deployed_codefocusasync

focus()

Requests focus for this control.