Access any Flet Control’s Parent

“A Flet Dev: How can I get the parent/ancestors of any control at any time? ” 🤔

Photo by Andrae Ricketts on Unsplash

Introduction

I mentioned in the announcement concerning the release of Flet version 0.22.0, that the ability to access the parent of any control has now been made possible.

Just for context and precision, the “parent”, as mentioned throughout this article refers to the direct ancestor of a Flet control, which is itself a Flet control.

Problem/Usecase

A member(fictive) of the Flet community asks in the Flet discord server how to build the following: a basic application with ListTile controls in a ListView where each of these tiles has a — trailing — delete icon button which when clicked should cause the deletion of its respective tile from the list view (the parent of the tiles).

In the following sections, I will first briefly explain what you need to know about the new parent property, then we will have a look at how the code for the above problem can look like with and without the new parent property.

About

The parent of any control can be accessed through the control’s parent property: Control.parent

This property is None by default and will be modified or set to its parent control only when this control is mounted (added to a page). Additionally, it is set back to None when the control is unmounted (removed from the page).

Without the Parent property

So, if you ask me to build that application without using the parent property (or before its arrival), I will do it as follows:

import flet as ft


def main(page: ft.Page):
    def handle_tile_removal(e: ft.ControlEvent):
        icon_button = e.control  # the delete-icon-button which was clicked
        tile = icon_button.data  # the tile it belongs to
        lv.controls.remove(tile)  # remove the tile from the listview
        page.update()

    lv = ft.ListView()

    for i in range(6):  # create some tiles to delete
        t = ft.ListTile(title=ft.Text(f"Click the delete icon to delete Tile {i}"))
        t.trailing = ft.IconButton(
            ft.icons.DELETE_FOREVER,
            on_click=handle_tile_removal,
            data=t,  # store the tile here to grab it later on in handle_deletion_from_parent
        )
        lv.controls.append(t)

    page.add(lv)


ft.app(target=main)

With the Parent property

If I were to build the application with the help of the parent property, I will instead do it as follows:

import flet as ft


def main(page: ft.Page):
    def handle_tile_removal(e: ft.ControlEvent):
        icon_button = e.control  # the delete-icon-button which was clicked
        tile = icon_button.parent  # the tile it belongs to
        lv = tile.parent  # the listview the tile belongs to
        lv.controls.remove(tile)  # remove the tile from the listview
        page.update()

    page.add(
        ft.ListView(
            controls=[
                ft.ListTile(
                    title=ft.Text(f"Click the delete icon to delete Tile {i}"),
                    trailing=ft.IconButton(ft.icons.DELETE_FOREVER, on_click=handle_tile_removal),
                )
                for i in range(6)  # create a some tiles to delete
            ]
        )
    )


ft.app(target=main)

Result

Comparisons

• Both methods work as expected and solve the given problem.
• Because the code in the “Without” lacks a proper way to access parent controls, one needs to manually store references of each tile in its respective icon button (using the data property) leading to the creation of several variables. This is not the case in the “With”, making it possible for you to easily create the list of tiles using a list comprehension.

Conclusion

From my point of view, the code which makes use of the parent property is more readable and easier to understand than the one which doesn’t. What is your opinion? Share it with me in a comment! :)

I hope that this new parent property we added eases your work when building Flet applications.

If you face any issues or have any requests/questions, you can hop on the Flet Discord server or open a new discussion on Flet’s GitHub repo.

By the way, I recently started a YouTube channel — have you subscribed? :)

Henri Ndonko — TheEthicalBoy

Thanks for reading — see you in the next piece!

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture | Cubed
• More content at PlainEnglish.io