Skip to main content
Cupertino controls provide native iOS look and feel, following Apple’s Human Interface Guidelines. These controls are perfect for building apps that feel at home on iPhone and iPad.

​
Overview

Cupertino controls feature:
  • Flat design with minimal elevation
  • Subtle, refined animations
  • iOS-native colors and typography
  • Characteristic iOS interactions (swipes, long press)
  • Accessibility features built-in

​
Buttons

Cupertino provides iOS-style button controls:

CupertinoButton

Standard iOS button with opacity feedback

CupertinoFilledButton

Filled button with background color

CupertinoTintedButton

Button with tinted background

​
Example

import flet as ft
from flet import cupertino_icons

def main(page: ft.Page):
    page.add(
        ft.CupertinoButton(
            content=ft.Text("Standard Button"),
            on_click=lambda e: print("Clicked!")
        ),
        ft.CupertinoFilledButton(
            content=ft.Text("Filled Button"),
            icon=cupertino_icons.SHARE,
            on_click=lambda e: print("Share clicked")
        ),
        ft.CupertinoTintedButton(
            content=ft.Text("Tinted Button"),
            icon=cupertino_icons.ADD,
            on_click=lambda e: print("Add clicked")
        ),
    )

ft.app(target=main)

​
Input Controls

CupertinoTextField

iOS-style text input field

CupertinoCheckbox

iOS-style checkbox

CupertinoRadio

iOS-style radio button

CupertinoSwitch

iOS-style toggle switch

CupertinoSlider

iOS-style slider control

​
CupertinoTextField Example

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.CupertinoTextField(
            placeholder_text="Enter your name",
            prefix=ft.Icon(ft.cupertino_icons.PERSON),
            on_change=lambda e: print(f"Text: {e.control.value}")
        ),
        ft.CupertinoTextField(
            placeholder_text="Search",
            prefix=ft.Icon(ft.cupertino_icons.SEARCH),
            suffix=ft.Icon(ft.cupertino_icons.CLEAR_CIRCLED),
            clear_button_visibility_mode=ft.OverlayVisibilityMode.EDITING,
        ),
        ft.CupertinoTextField(
            placeholder_text="Password",
            password=True,
            prefix=ft.Icon(ft.cupertino_icons.LOCK),
        ),
    )

ft.app(target=main)

​
CupertinoSwitch Example

import flet as ft

def main(page: ft.Page):
    def switch_changed(e):
        print(f"Switch value: {e.control.value}")
    
    page.add(
        ft.Row([
            ft.Text("Enable Notifications"),
            ft.CupertinoSwitch(
                value=True,
                on_change=switch_changed
            ),
        ]),
        ft.Row([
            ft.Text("Dark Mode"),
            ft.CupertinoSwitch(
                value=False,
                on_change=switch_changed
            ),
        ]),
    )

ft.app(target=main)

CupertinoAppBar

iOS-style navigation bar at the top

CupertinoNavigationBar

Bottom tab bar navigation

​
CupertinoAppBar Example

import flet as ft
from flet import cupertino_icons

def main(page: ft.Page):
    page.appbar = ft.CupertinoAppBar(
        leading=ft.Icon(cupertino_icons.BACK),
        middle=ft.Text("My App"),
        trailing=ft.Icon(cupertino_icons.ELLIPSIS),
        bgcolor=ft.Colors.SURFACE_VARIANT,
    )
    
    page.add(ft.Text("Content goes here"))

ft.app(target=main)

​
Display Controls

CupertinoActivityIndicator

iOS-style loading spinner

CupertinoListTile

iOS-style list item

​
CupertinoListTile Example

import flet as ft
from flet import cupertino_icons

def main(page: ft.Page):
    page.add(
        ft.CupertinoListTile(
            leading=ft.Icon(cupertino_icons.SETTINGS),
            title=ft.Text("Settings"),
            trailing=ft.Icon(cupertino_icons.CHEVRON_RIGHT),
            on_click=lambda e: print("Settings clicked")
        ),
        ft.CupertinoListTile(
            leading=ft.Icon(cupertino_icons.PERSON),
            title=ft.Text("Profile"),
            subtitle=ft.Text("Manage your account"),
            trailing=ft.Icon(cupertino_icons.CHEVRON_RIGHT),
            on_click=lambda e: print("Profile clicked")
        ),
    )

ft.app(target=main)

​
Dialogs and Overlays

CupertinoAlertDialog

iOS-style alert dialog

CupertinoActionSheet

Bottom sheet with action options

CupertinoBottomSheet

Modal sheet from bottom

CupertinoContextMenu

Long-press context menu

​
CupertinoAlertDialog Example

import flet as ft

def main(page: ft.Page):
    def close_dialog(e):
        dialog.open = False
        page.update()
    
    dialog = ft.CupertinoAlertDialog(
        title=ft.Text("Delete Item"),
        content=ft.Text("This action cannot be undone."),
        actions=[
            ft.CupertinoDialogAction(
                text="Cancel",
                on_click=close_dialog
            ),
            ft.CupertinoDialogAction(
                text="Delete",
                is_destructive_action=True,
                on_click=close_dialog
            ),
        ],
    )
    
    page.overlay.append(dialog)
    
    page.add(
        ft.CupertinoButton(
            content=ft.Text("Show Dialog"),
            on_click=lambda e: (setattr(dialog, 'open', True), page.update())
        )
    )

ft.app(target=main)

​
CupertinoActionSheet Example

import flet as ft

def main(page: ft.Page):
    def close_sheet(e):
        sheet.open = False
        page.update()
    
    sheet = ft.CupertinoActionSheet(
        title=ft.Text("Choose an action"),
        message=ft.Text("Select one of the options below"),
        actions=[
            ft.CupertinoActionSheetAction(
                content=ft.Text("Share"),
                on_click=lambda e: print("Share")
            ),
            ft.CupertinoActionSheetAction(
                content=ft.Text("Copy"),
                on_click=lambda e: print("Copy")
            ),
            ft.CupertinoActionSheetAction(
                content=ft.Text("Delete"),
                is_destructive_action=True,
                on_click=lambda e: print("Delete")
            ),
        ],
        cancel=ft.CupertinoActionSheetAction(
            content=ft.Text("Cancel"),
            on_click=close_sheet
        ),
    )
    
    page.overlay.append(sheet)
    
    page.add(
        ft.CupertinoButton(
            content=ft.Text("Show Action Sheet"),
            on_click=lambda e: (setattr(sheet, 'open', True), page.update())
        )
    )

ft.app(target=main)

​
Pickers

CupertinoPicker

iOS-style scrolling picker

CupertinoDatePicker

iOS-style date and time picker

CupertinoTimerPicker

iOS-style timer duration picker

​
CupertinoDatePicker Example

import flet as ft
import datetime

def main(page: ft.Page):
    def date_changed(e):
        print(f"Selected: {e.control.value}")
    
    page.add(
        ft.CupertinoDatePicker(
            value=datetime.datetime.now(),
            on_change=date_changed,
        )
    )

ft.app(target=main)

​
Segmented Controls

CupertinoSegmentedButton

Multiple choice segmented control

CupertinoSlidingSegmentedButton

Segmented control with sliding indicator

​
CupertinoSegmentedButton Example

import flet as ft

def main(page: ft.Page):
    def segment_changed(e):
        print(f"Selected: {e.control.selected_index}")
    
    page.add(
        ft.CupertinoSegmentedButton(
            selected_index=0,
            on_change=segment_changed,
            controls=[
                ft.Text("Day"),
                ft.Text("Week"),
                ft.Text("Month"),
            ],
        )
    )

ft.app(target=main)

​
Context Menus

​
CupertinoContextMenu Example

import flet as ft
from flet import cupertino_icons

def main(page: ft.Page):
    page.add(
        ft.CupertinoContextMenu(
            content=ft.Container(
                content=ft.Text("Long press me"),
                bgcolor=ft.Colors.BLUE_100,
                padding=20,
                border_radius=10,
            ),
            actions=[
                ft.CupertinoContextMenuAction(
                    text="Copy",
                    trailing_icon=cupertino_icons.COPY,
                    on_click=lambda e: print("Copy")
                ),
                ft.CupertinoContextMenuAction(
                    text="Share",
                    trailing_icon=cupertino_icons.SHARE,
                    on_click=lambda e: print("Share")
                ),
                ft.CupertinoContextMenuAction(
                    text="Delete",
                    is_destructive_action=True,
                    trailing_icon=cupertino_icons.DELETE,
                    on_click=lambda e: print("Delete")
                ),
            ],
        )
    )

ft.app(target=main)

​
Comparing Material vs Cupertino

import flet as ft

# Material Design
ft.ElevatedButton(
    "Click Me",
    icon=ft.Icons.ADD
)

ft.TextField(
    label="Name",
    hint_text="Enter name"
)

ft.Switch(
    label="Enable",
    value=True
)

​
Cupertino Icons

Cupertino controls use SF Symbols-inspired icons: 
import flet as ft
from flet import cupertino_icons

# Some common Cupertino icons
icons = [
    cupertino_icons.HOME,
    cupertino_icons.SEARCH,
    cupertino_icons.SETTINGS,
    cupertino_icons.PERSON,
    cupertino_icons.HEART,
    cupertino_icons.SHARE,
    cupertino_icons.CAMERA,
    cupertino_icons.PHOTO,
]

for icon in icons:
    ft.Icon(icon, size=30)

​
Next Steps

​
API Reference

For detailed properties and methods:

Build docs developers (and LLMs) love

Get started for freeTalk to us