Logic behind adding keyboard callback in Flet app

Question

The following code feels a bit counterintuitive (you are deleting something defined later in code) but works:

import flet as ft

def main(page: ft.Page):
    def on_keyboard(e: ft.KeyboardEvent):
        page.remove(cntnr)
        page.update()

    page.on_keyboard_event = on_keyboard

    cntnr = ft.Container(width=100, height=100, bgcolor=ft.colors.RED)
    page.add(cntnr)

if __name__ == "__main__":
    ft.app(target=main)

If I define and add a container first and add a keyboard callback to do something to that defined container later then keyboard callback suddenly doesn't work (keypresses are getting ignored and I just hear beep sounds on keypresses):

import flet as ft

def main(page: ft.Page):
    cntnr = ft.Container(width=10, height=10, bgcolor=ft.colors.RED)
    page.add(cntnr)

    def on_keyboard(e: ft.KeyboardEvent):
        page.remove(cntnr)
        page.update()

    page.on_keyboard_event = on_keyboard

if __name__ == "__main__":
    ft.app(target=main)

Why is it like this? Am I missing something in Flet documentation?

This was only tested on Mac for now but I think it's reproducible on Linux and Windows as well. Is it a bug?

https://flet.dev/docs/cookbook/keyboard-shortcuts

Answer 1

Currently, Flet is not a big project with a high quality documentation. I'm not involved in developing Flet, but reviewing the implementation(page.py and page.dart) reveals it's not a bug but a limitation. (You can post an issue here to get an accurate feedback.)

In your first code, the page.add() call in the Python client triggered the _PageControlState.build() method call in the Dart server. Because you called the page.add() after configuring the keyboard handler, the build() method configured the hardware keyboard handler. But in the second code, the build() method didn't do that because the keyboard handler was not configured at the time it was called.

To remedy this, you can call the page.update() like this.

...
def main(page: ft.Page):
    ...
    page.on_keyboard_event = on_keyboard
    page.update()
...