An IconButton is a type of round button that displays an icon in the center. It is typically used to provide simple and intuitive user interactions in various interfaces, especially toolbars. These buttons respond to user touches by filling with color (or ink), providing visual feedback when clicked.

Icon buttons are incredibly versatile and can be utilized not only in toolbars but also in various UI components across applications. They can also be customized for different platforms and events, enhancing user experience.

Basic Example of Icon Buttons in Python

To implement IconButtons in your application, you can use the flet library in Python. Here’s a simple example:

import flet as ft

def main(page: ft.Page):
    page.title = "Icon buttons"
    page.add(
        ft.Row(
            [
                ft.IconButton(
                    icon=ft.Icons.PAUSE_CIRCLE_FILLED_ROUNDED,
                    icon_color="blue400",
                    icon_size=20,
                    tooltip="Pause record",
                ),
                ft.IconButton(
                    icon=ft.Icons.DELETE_FOREVER_ROUNDED,
                    icon_color="pink600",
                    icon_size=40,
                    tooltip="Delete record",
                ),
            ]
        ),
    )

ft.app(main)

 

In this example, two IconButtons are placed in a row. Each button has a different icon, size, color, and tooltip that appears when hovered over.

Adding Click Event to an Icon Button

IconButtons can also be interactive. You can handle events like button clicks by defining a custom function to react to user interactions. Here’s an example of an IconButton with a click event:

import flet as ft

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

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

    b = ft.IconButton(
        icon=ft.Icons.PLAY_CIRCLE_FILL_OUTLINED, on_click=button_clicked, data=0
    )
    t = ft.Text()

    page.add(b, t)

ft.app(main)

In this example, every time the IconButton is clicked, a counter updates the text label showing how many times the button has been clicked.

IconButton Properties

IconButtons come with a variety of properties that allow you to customize their behavior and appearance. Some of the key properties include:

  • adaptive: If set to True, the button adapts to the platform (iOS/macOS will show a Cupertino button, while other platforms will show a Material IconButton).
  • alignment: Controls the position of the icon inside the button.
  • autofocus: Sets the initial focus on the button when the page is loaded.
  • icon: Specifies the icon to be displayed on the button.
  • icon_color: Defines the color of the icon.
  • icon_size: Controls the size of the icon (in virtual pixels).
  • tooltip: Displays a tooltip when the user hovers over the button.
  • disabled_color: The color of the icon when the button is disabled.
  • highlight_color: The color when the button is pressed.

Example: IconButton as a Toggle Button

You can use the selected property to create a toggle button. Here's an example:

import flet as ft

def main(page: ft.Page):

    def toggle_icon_button(e):
        e.control.selected = not e.control.selected
        e.control.update()

    page.add(
        ft.IconButton(
            icon=ft.Icons.BATTERY_1_BAR,
            selected_icon=ft.Icons.BATTERY_FULL,
            on_click=toggle_icon_button,
            selected=False,
            style=ft.ButtonStyle(color={"selected": ft.Colors.GREEN, "": ft.Colors.RED}),
        )
    )

ft.app(main)

 

In this example, the button toggles between two icons when clicked, with a color change indicating the selected state.

IconButton Methods

IconButtons support several methods to manage focus:

  • focus(): Moves the focus to the button.

IconButton Events

Several events can be tied to the IconButton for interactivity:

  • on_blur: Fires when the control loses focus.
  • on_click: Fires when the user clicks the button.
  • on_focus: Fires when the control receives focus.

Conclusion

IconButtons are a versatile and powerful UI element that can enhance the interactivity and usability of your applications. With properties that allow for customization, you can design buttons that are responsive, adaptive, and user-friendly. Whether you are building a toolbar, a toggle button, or handling user input events, IconButtons are a simple yet effective way to improve the user experience in your app

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-icon-buttons-in-flet/

License Agreement:Attribution-NonCommercial 4.0 International License