A Checkbox in Flet is a UI control that allows users to select one or more items from a group or toggle between two mutually exclusive states—checked or unchecked (on or off). This makes it a versatile component for building interactive applications.

Basic Checkbox Implementation

Below is a simple example demonstrating different types of checkboxes in Flet:

Python Example

import flet as ft

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

    t = ft.Text()
    c1 = ft.Checkbox(label="Unchecked by default checkbox", value=False)
    c2 = ft.Checkbox(label="Undefined by default tristate checkbox", tristate=True)
    c3 = ft.Checkbox(label="Checked by default checkbox", value=True)
    c4 = ft.Checkbox(label="Disabled checkbox", disabled=True)
    c5 = ft.Checkbox(
        label="Checkbox 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, c5, b, t)

ft.app(main)

This example initializes multiple checkboxes with different properties and updates the text value when the button is clicked.

Handling Events with on_change

Checkboxes can trigger an event when their state changes. Here’s an example of using the on_change event:

import flet as ft

def main(page):
    def checkbox_changed(e):
        t.value = f"Checkbox value changed to {c.value}"
        t.update()

    c = ft.Checkbox(label="Checkbox with 'change' event", on_change=checkbox_changed)
    t = ft.Text()

    page.add(c, t)

ft.app(main)

In this example, whenever the checkbox is clicked, the label updates to reflect the new state.

Key Properties of Checkbox

Flet’s Checkbox component comes with multiple customization options:

Visual Customization

  • active_color – Color when the checkbox is checked.

  • border – Defines the color and width of the border when unchecked.

  • check_color – Defines the check icon’s color when checked.

  • fill_color – Defines the checkbox’s background color in different states.

  • hover_color – Defines the color when hovered.

  • shape – Determines the shape of the checkbox (default is RoundedRectangleBorder).

  • overlay_color – Defines the overlay color for different states (pressed, selected, hovered, focused).

Behavioral Properties

  • tristate – If True, allows three states: True, False, and None (displaying a dash when None).

  • value – Represents the current state of the checkbox.

  • disabled – If True, disables user interaction.

  • autofocus – If True, the checkbox is focused when the page loads.

Label Customization

  • label – Defines a clickable text label next to the checkbox.

  • label_style – Allows customization of the label's font and appearance.

  • label_position – Positions the label to the left or right of the checkbox (default is LabelPosition.RIGHT).

Events

  • on_change – Triggered when the checkbox state changes.

  • on_focus – Triggered when the checkbox gains focus.

  • on_blur – Triggered when the checkbox loses focus.

Conclusion

The Checkbox component in Flet is a powerful tool for user input and selection. With its rich set of properties and event handling capabilities, it provides flexibility in designing interactive and visually appealing applications.

Copyright Statement: Unless stated otherwise, all articles are original to this site, please credit the source when sharing.

Article link:http://pybeginners.com/python-flet/checkbox-in-flet/

License Agreement:Attribution-NonCommercial 4.0 International License