Skip to main content

CupertinoSegmentedButton

An iOS-style segmented button.

Examples​

Live example

Basic Example​

import flet as ft

def main(page):
    page.theme_mode = ft.ThemeMode.LIGHT

    page.add(
        ft.CupertinoSegmentedButton(
            selected_index=1,
            selected_color=ft.colors.RED_400,
            on_change=lambda e: print(f"selected_index: {e.data}"),
            controls=[
                ft.Text("One"),
                ft.Container(
                    padding=ft.padding.symmetric(0, 30),
                    content=ft.Text("Two"),
                ),
                ft.Container(
                    padding=ft.padding.symmetric(0, 10),
                    content=ft.Text("Three"),
                ),
            ],
        ),
    )

ft.app(main)

Properties​

border_color​

The color of the button's border.

click_color​

The color used to fill the background of this control when temporarily interacting with through a long press or drag.

Defaults to the selected_color at 20% opacity.

controls​

A list of Controls to display as segments inside the CupertinoSegmentedButton.

padding​

The button's padding. See Container.padding for more details.

selected_color​

The color of the button when it is selected.

selected_index​

The index (starting from 0) of the selected segment in the controls list.

text​

The text to be shown in the button. In case both text and content are provided, then content will be used.

trailing_icon​

An optional icon to display at the right of the text or content control.

unselected_color​

The color of the button when it is not selected.

Events​

on_change​

Fires when the state of the button is changed - when one of the controls is clicked.