Control event transparency

[mikaelho]

Often there is a need to place a control on top of another, and control which control gets e.g. a mouse click.

I just tested placing Text on top of ElevatedButton, and observed that the Text blocked the click event as well as "semantics" (changing the cursor indicating that a click is possible).

While I would like this to be a parameter on all Controls, flutter's answer seems to be yet another separate wrapping Control, IgnorePointer.

But this stackoverflow answer does point to an alternative using a custom hit detection algorithm.

[FeodorFitsner]

Could you drop a simple repro code please?

[mikaelho]

Hmm, slightly confusing, in some contexts the text blocks the event, in another it does not. Stack did not change the behaviour here.

import flet
from flet import Column, Container, ElevatedButton, Page, Stack, Text, colors

def clicked(e):
    print(f"{e.control} clicked")

def main(page: Page):

    root = Column(
        [
            Container(
                Text(value="This text does not block Container clicks"),
                bgcolor=colors.BLUE_GREY_100,
                on_click=clicked,
            ),
            Stack(
                [
                    ElevatedButton(text="This is a button", on_click=clicked),
                    Text(value="This text blocks ElevatedButton clicks"),
                ]
            ),
        ]
    )

    page.add(root)
    page.update()

flet.app(target=main)

[mikaelho]

After a moment of thought, I understand the difference between the two cases above.

My mistake is always thinking of Container as a separate Control, when it is really only applying characteristics to the contained Control.

Thus in the example above, Text in a Container is not event-transparent; instead, the Container makes the Text clickable.

(Part of my confusion comes from the fact that the event.control in this case is the Container, not Text.)

[Animedecoder]

I think we could implement it using Dropdown but there is no way to remove the trailing arrows at the end of dropdown option.

[mikaelho]

I think we could implement it using Dropdown but there is no way to remove the trailing arrows at the end of dropdown option.

Please note that this issue is not about the dropdown menu, but about event handling in general. Please create another issue about adding text to PopupMenuButton.

[FeodorFitsner]

Did you know that you can properly put Text (or anything) inside ElevatedButton.content?

[mikaelho]

Did you know that you can properly put Text (or anything) inside ElevatedButton.content?

No, I do not think I had looked at that, and thanks, that's a solid practical tip. 🙂

Also, now that I look at it, PopupMenuButton documentation says that it has content as well, but I was initially looking at the code, where I do not see the content included.

But this issue is still intended to be about managing event handling for overlapping controls.

[FeodorFitsner]

It's PopupMenuItem has content property, not PopupMenuButton. Don't see any issues adding PopupMenuButton.content though. Will do it in the next release.