CupertinoSlidingSegmentedButton

Examples

Live example

Basic Example

import flet as ft


def main(page: ft.Page):
    page.title = "CupertinoSlidingSegmentedButton Example"
    page.theme_mode = ft.ThemeMode.LIGHT

    def handle_selection_change(e: ft.Event[ft.CupertinoSlidingSegmentedButton]):
        page.show_dialog(
            ft.SnackBar(ft.Text(f"Segment {e.control.selected_index + 1} was chosen!"))
        )

    page.add(
        ft.CupertinoSlidingSegmentedButton(
            selected_index=1,
            thumb_color=ft.Colors.BLUE_400,
            on_change=handle_selection_change,
            controls=[
                ft.Text("One"),
                ft.Text("Two"),
                ft.Text("Three"),
            ],
        ),
    )


ft.run(main)

CupertinoSlidingSegmentedButton

Bases: LayoutControl

A cupertino sliding segmented button.

RAISES	DESCRIPTION
AssertionError	If controls does not contain at least two visible controls.
IndexError	If selected_index is out of range.

bgcolor

bgcolor: ColorValue = TERTIARY_SYSTEM_FILL

The background color of this button.

controls

controls: list[Control]

The list of segments to be displayed.

Note

Must contain at least two visible Controls.

on_change

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

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

padding

padding: PaddingValue = field(
    default_factory=lambda: symmetric(
        vertical=2, horizontal=3
    )
)

The amount of space by which to inset the controls.

proportional_width

proportional_width: bool = False

Determine whether segments have proportional widths based on their content.

If False, all segments will have the same width, determined by the longest segment. If True, each segment's width will be determined by its individual content.

If the max width of parent constraints is smaller than the width that this control needs, the segment widths will scale down proportionally to ensure this control fits within the boundaries; similarly, if the min width of parent constraints is larger, the segment width will scales up to meet the min width requirement.

selected_index

selected_index: int = 0

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

thumb_color

thumb_color: ColorValue | None = None

The color of this button when it is not selected.

before_update

before_update()