Understanding TextButton in Flet

 Text buttons are a crucial part of user interfaces, providing lightweight and non-intrusive options for user interactions. In Flet, the TextButton control allows developers to create buttons with text, icons, click events, and custom content while maintaining a clean and adaptable design. This article explores the features, usage, and properties of TextButton in Flet.

Basic Text Buttons

A TextButton is a simple button with text that remains invisible until interacted with. Below is an example demonstrating a basic text button and a disabled button in Flet:

import flet as ft

def main(page: ft.Page):
    page.title = "Basic text buttons"
    page.add(
        ft.TextButton(text="Text button"),
        ft.TextButton("Disabled button", disabled=True),
    )

ft.app(main)

Text Buttons with Icons

You can add icons to TextButton to improve visibility and interaction. The example below demonstrates text buttons with different icons:

import flet as ft

def main(page: ft.Page):
    page.title = "Text buttons with icons"
    page.add(
        ft.TextButton("Button with icon", icon="chair_outlined"),
        ft.TextButton(
            "Button with colorful icon",
            icon="park_rounded",
            icon_color="green400",
        ),
    )

ft.app(main)

Text Button with Click Event

You can attach an event listener to a TextButton to perform actions when it is clicked. The example below demonstrates how to update text when the button is clicked:

import flet as ft

def main(page: ft.Page):
    page.title = "Text button with 'click' event"

    def button_clicked(e):
        b.data += 1
        t.value = f"Button clicked {b.data} time(s)"
        page.update()

    b = ft.TextButton("Button with 'click' event", on_click=button_clicked, data=0)
    t = ft.Text()

    page.add(b, t)

ft.app(main)

Text Button with Custom Content

A TextButton can also contain custom elements, such as rows of icons or stacked text elements. The example below shows buttons with rich content:

import flet as ft

def main(page: ft.Page):
    page.title = "Text buttons with custom content"
    page.add(
        ft.TextButton(
            width=150,
            content=ft.Row(
                [
                    ft.Icon(name=ft.Icons.FAVORITE, color="pink"),
                    ft.Icon(name=ft.Icons.AUDIOTRACK, color="green"),
                    ft.Icon(name=ft.Icons.BEACH_ACCESS, color="blue"),
                ],
                alignment=ft.MainAxisAlignment.SPACE_AROUND,
            ),
        ),
        ft.TextButton(
            content=ft.Container(
                content=ft.Column(
                    [
                        ft.Text(value="Compound button", size=20),
                        ft.Text(value="This is secondary text"),
                    ],
                    alignment=ft.MainAxisAlignment.CENTER,
                    spacing=5,
                ),
                padding=ft.padding.all(10),
            ),
        ),
    )

ft.app(main)

Properties of TextButton

The TextButton control comes with several customizable properties:

• adaptive: If True, the button adapts to the platform (iOS/macOS: CupertinoButton, others: Material TextButton).

• autofocus: If True, the button is automatically focused when the page loads.

• content: Custom content inside the button.

• clip_behavior: Defines how the content should be clipped (default: HARD_EDGE).

• icon: Displays an icon next to the text.

• icon_color: Sets the color of the icon.

• style: Defines the button’s visual style.

• text: The text displayed on the button.

• tooltip: Text displayed when hovering over the button.

• url: Opens a specified URL when clicked.

• url_target: Specifies where to open the URL (default: BLANK).

Methods

• focus(): Moves focus to the button.

Events

• on_blur: Triggered when the button loses focus.

• on_click: Triggered when the button is clicked.

• on_focus: Triggered when the button gains focus.

• on_hover: Triggered when the mouse pointer enters or exits the button’s area.

• on_long_press: Triggered when the button is long-pressed.

Conclusion

TextButton in Flet provides a versatile and customizable way to create buttons with text, icons, event handling, and custom content. With its flexible properties and event-driven behavior, developers can create intuitive and user-friendly applications. Whether you need a simple button or a more advanced interactive element, TextButton is a powerful tool to enhance your Flet 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/understanding-textbutton-in-flet/

License Agreement:Attribution-NonCommercial 4.0 International License