Skip to main content

Switch

A toggle represents a physical switch that allows someone to choose between two mutually exclusive options.

For example, "On/Off", "Show/Hide". Choosing an option should produce an immediate result.

Examples

Live example

Basic switches

import flet as ft

def main(page):
def button_clicked(e):
t.value = (
f"Switch values are: {c1.value}, {c2.value}, {c3.value}, {c4.value}."
)
page.update()

t = ft.Text()
c1 = ft.Switch(label="Unchecked switch", value=False)
c2 = ft.Switch(label="Checked switch", value=True)
c3 = ft.Switch(label="Disabled switch", disabled=True)
c4 = ft.Switch(
label="Switch with rendered label_position='left'", label_position=ft.LabelPosition.LEFT
)
b = ft.ElevatedButton(text="Submit", on_click=button_clicked)
page.add(c1, c2, c3, c4, b, t)

ft.app(target=main, view=ft.AppView.WEB_BROWSER)

Switch with on_change event

import flet as ft

def main(page: ft.Page):
def theme_changed(e):
page.theme_mode = (
ft.ThemeMode.DARK
if page.theme_mode == ft.ThemeMode.LIGHT
else ft.ThemeMode.LIGHT
)
c.label = (
"Light theme" if page.theme_mode == ft.ThemeMode.LIGHT else "Dark theme"
)
page.update()

page.theme_mode = ft.ThemeMode.LIGHT
c = ft.Switch(label="Light theme", on_change=theme_changed)
page.add(c)

ft.app(target=main)

Properties

active_color

The color to use when this switch is on.

active_track_color

The color to use on the track when this switch is on.

If track_color returns a non-null color in the selected state, it will be used instead of this color.

adaptive

If the value is True, an adaptive Switch is created based on whether the target platform is iOS/macOS.

On iOS and macOS, a CupertinoSwitch is created, which has matching functionality and presentation as Switch, and the graphics as expected on iOS. On other platforms, a Material Switch is created.

The default value is False. See the example of usage here.

autofocus

True if the control will be selected as the initial focus. If there is more than one control on a page with autofocus set, then the first one added to the page will get focus.

focus_color

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

hover_color

The color to be used when it is being hovered over by the mouse pointer.

inactive_thumb_color

The color to use on the thumb when this switch is off.

If thumb_color returns a non-null color in the default state, it will be used instead of this color.

inactive_track_color

The color to use on the track when this switch is off.

If track_color returns a non-null color in the default state, it will be used instead of this color.

label

The clickable label to display on the right of the Switch.

label_style

The label's style. An instance of type TextStyle.

label_position

Property value is LabelPosition enum with LabelPosition.RIGHT as default.

mouse_cursor

The cursor to be displayed when a mouse pointer enters or is hovering over this control. See MouseCursor for possible values.

overlay_color

The color for the switch's Material in various material states. The following MaterialState values are supported: PRESSED, SELECTED, HOVERED, FOCUSED and DEFAULT (fallback).

See Radio.fill_color for usage example.

splash_radius

The radius of the splash effect when the switch is pressed.

thumb_color

The color of this switch's thumb in various material states. The following MaterialState values are supported: SELECTED, HOVERED, DISABLED, FOCUSED and DEFAULT (fallback).

See Radio.fill_color for usage example.

thumb_icon

The icon of this Switch's thumb in various material states. The following MaterialState values are supported: SELECTED, HOVERED, DISABLED, FOCUSED and DEFAULT (fallback).

See Radio.fill_color for usage example.

track_color

The color of this switch's track in various material states. The following MaterialState values are supported: SELECTED, HOVERED, DISABLED, FOCUSED and DEFAULT (fallback).

See Radio.fill_color for usage example.

track_outline_color

The outline color of this switch's track in various material states. The following MaterialState values are supported: SELECTED, HOVERED, DISABLED, FOCUSED and DEFAULT (fallback).

See Radio.fill_color for usage example.

value

Current value of the Switch.

Events

on_blur

Fires when the control has lost focus.

on_change

Fires when the state of the Switch is changed.

on_focus

Fires when the control has received focus.