on_click event in ft.Container not works (on_hover works fine)

[LukasSliacky]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

When i use on_click event with lambda

`# event: on click - works fine
on_click=lambda e: print('on_click_event')

event not works. Similar lambda on event ft.Container works without problems.

Code sample

Complete code, where problem will be shown

import flet as ft


def main(page: ft.Page):
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    _main_row = ft.Container(
        expand=True,
        content=ft.Row(
            alignment=ft.MainAxisAlignment.START,
            controls=[
            ],
        ),
    )

    _icons_list = [
        ft.icons.FAVORITE_ROUNDED,
        ft.icons.NOTIFICATION_ADD_ROUNDED,
    ]

    for icon in _icons_list:
        _main_row.content.controls.append(
            ft.Container(

                # event: on hover - works fine
                on_hover=lambda e: print('on_hover_event'),

                # event: on click - works fine
                on_click=lambda e: print('on_click_event'),

                content=ft.IconButton(
                    icon=icon,
                    icon_size=22,
                    style=ft.ButtonStyle(
                        color={"": "white"}),
                )
            )
        )
    _main_container = ft.Container(
        width=280,
        height=590,
        bgcolor='black',
        alignment=ft.alignment.bottom_center,
        border_radius=35,
        padding=20,
        content=_main_row
    )

    page.add(_main_container)
    page.update()


ft.app(main)

To reproduce

1. run code,
2. you will see app with two buttons,
3. in terminal: event on_hover o n icons print string "on_hover_event"
4. in terminal: click on button, string "on_click_event" is isn't printed in terminal - event probably not works

Expected behavior

According to the documentation, the event should be executed

Screenshots / Videos

Captures

[Upload media here]

Operating System

Linux

Operating system details

Xubuntu 24.04

Flet version

flet==0.24.1

Regression

No, it isn't

Suggestions

No response

Logs

No response

Additional details

No response

[InesaFitsner]

on_click doesn't work for those two containers because the content of each container is IconButton and when you click on it, it would trigger on_click event for IconButton, not Container.

You can specify on_click for the IconButton:

      content=ft.IconButton(
          icon=icon,
          icon_size=22,
          style=ft.ButtonStyle(
              color={"": "white"}),
          on_click=lambda e: print('on_click_event'),
    
      )

If you want to make sure that on_click event works for Container, try it for the _main_container:

    _main_container = ft.Container(
        width=280,
        height=590,
        bgcolor="black",
        alignment=ft.alignment.bottom_center,
        border_radius=35,
        padding=20,
        content=_main_row,
        on_hover=lambda e: print("on_hover_event"),
        on_click=lambda e: print("on_click_event"),
    )

[tanmay-bhatgare]

@LukasSliacky I understood your problem. See when you place a widget in a container, that child widget acquires entire width and height of parent widget. Same happened in this case, when you placed an Icon widget that icon inherit width and height of container(inside for loop) so when you're clicking the container, you're actually clicking icon even if you try on transparent area. The below code will help you to understand cleary. Just try to click edge of container you will get your desired output.

import flet as ft


def main(page: ft.Page):
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    _main_row = ft.Container(
        expand=True,
        content=ft.Row(
            alignment=ft.MainAxisAlignment.START,
            controls=[],
        ),
    )

    _icons_list = [
        ft.icons.FAVORITE_ROUNDED,
        ft.icons.NOTIFICATION_ADD_ROUNDED,
    ]

    for icon in _icons_list:
        _main_row.content.controls.append(
            ft.Container(
                width=100,
                height=100,
                bgcolor="red",
                padding=20, #gave the padding to lower icon size
                # event: on hover - works fine
                on_hover=lambda e: print("on_hover_event"),
                # event: on click - works fine
                on_click=lambda e: print("on_click_event"),
                content=ft.IconButton(
                    width=25,
                    height=25,
                    icon=icon,
                    icon_size=10,
                    style=ft.ButtonStyle(color={"": "white"}),
                    bgcolor="purple",
                ),
            )
        )
    _main_container = ft.Container(
        width=280,
        height=590,
        bgcolor="black",
        alignment=ft.alignment.bottom_center,
        border_radius=35,
        padding=20,
        content=_main_row,
        on_click=lambda e: print("on_click_event"),
    )

    page.add(_main_container)
    page.update()


ft.app(main)

One tip: Don't use for loops for appending any control if each of them going to have different functionality.

[LukasSliacky]

@tanmay-bhatgare, @InesaFitsner thank you for your feedback and recomandations. Of course, I use your suggestions in my project.

It is bit interesting, because i used it on my code by tutorial on youtube and on this tutorial work it fine.

Maybe different version of FLET?

[tanmay-bhatgare]

Indeed. I tried same code with flet==0.13.0 and it worked, clicking IconButton triggers on_click_event. This is some kind of changes in widget behavior. One more thing if you got your answer, consider closing this issue.