Emitting events from UserControl?

[cneumann]

Question

I have a UserControl that combines a button to bring up a file picker and a text field to show the selected file name. When the selected file changes I want it to emit a custom 'changed' event, that other controls can listen to and update their content. Is there a way to utilize the same event mechanism as the built in controls for this? Thanks!

If cobbled together the below by looking into the implementation of FilePicker, but I'm not really sure about the arguments for the FileSelectorFileChangedEvent ctor.
Aside: for some reason FilePickerResultEvent doesn't call it's base class __init__ and I suspect that means an event handler would not be able to access e.g. e.control to get the control that sent the event?

Code sample

class FileSelectorFileChangedEvent(ControlEvent):
    def __init__(self, path: Optional[str], control: ft.Control, page: ft.Page):
        super().__init__(
            target=control.uid,
            name="FileSelectorFileChangedEvent",
            data="",
            control=control,
            page=page,
        )
        self._path = path

    @property
    def path(self):
        return self._path


class GLTFFileSelector(ft.UserControl):
    def __init__(self, on_file_changed=None):
        super().__init__()
        # create event handler and subscribe passed in callback function
        self._on_file_changed = EventHandler()
        self.on_file_changed = on_file_changed

    @property
    def on_file_changed(self):
        return self._on_file_changed

    @on_file_changed.setter
    def on_file_changed(self, handler):
        self._on_file_changed.subscribe(handler)

    def build(self):
        picker_btn = ft.FilledButton(
            text="Select file...", on_click=self._handle_picker_btn_on_click
        )
        self._file_path_text = ft.Text(value="No file selected...")

        return ft.Row(controls=[picker_btn, self._file_path_text])

    def _handle_picker_btn_on_click(self, e):
        file_picker = ft.FilePicker(on_result=self._handle_file_picker_on_result)
        self.page.overlay.append(file_picker)
        self.page.update()
        file_picker.pick_files(
            allow_multiple=False,
            allowed_extensions=["gltf"],
            dialog_title="Select source .glTF file...",
        )

    def _handle_file_picker_on_result(self, e: ft.FilePickerResultEvent):
        if e.files and len(e.files) > 0:
            self._file_path_text.value = e.files[0].path
            # invoke callbacks with custom event
            self._on_file_changed.get_handler()(
                FileSelectorFileChangedEvent(
                    e.files[0].path, control=self, page=self.page
                )
            )
            self.update()

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[kira607]

I think user event handlers are not implemented yet.
As a workaround you can simply assign a function object to a control attribute.
E.g.:

import typing as t

import flet as ft


class MyControl(ft.UserControl):
    def __init__(self, on_stuff: t.Callable[[str], None]) -> None:
        super().__init__()
        self._count = 0
        self._on_stuff = on_stuff

    def build(self) -> ft.Control:
        return ft.TextButton("Fire on_stuff event", on_click=self._handle_stuff_event)

    def _handle_stuff_event(self, e: ft.ControlEvent) -> None:
        self._count += 1
        self._on_stuff(f"Stuff has been fired {self._count} times!")


def main(page: ft.Page) -> None:
    def do_stuff(message: str) -> None:
        page.add(ft.Text(message))

    page.add(MyControl(on_stuff=do_stuff))


ft.app(target=main)