Component GridView of UserControl not updated

[mmartinortiz]

Question

Hi,

I'm building a small application that allows the user to select a folder and then shows the pictures of that folder in a GridView. I had the application working before I encapsulated the code within a UserControl. Now, after the directory is selected, the images are not shown, even though the rest of componentes (like the Text that shows the selected folder) of my custom UserControl are updated.

My ultimate purpose is to have a GridView of Images, and allow the user to edit some EXIF attributes of the selected image. I'm using UserControl for keeping track of what image of the grid has been selected by the user. If there is a different way to achieve my goal, I'll be happy to hear :-)

Update: I have also noticed that I cannot click with the mouse on the ElevatedButton. To activate the button, I use tab and then space. I guess I'm doing something obviously wrong when using UserControl, but I do not know what.

Update 2: In this gist it is the same code but without using an UserControl. In the gist, the code works as expected. However, I'm not sure how to get control over the clicked image for, for example, make them visually selected, offer the user with options for renaming, editing as image, etc.

Code sample

from pathlib import Path

import flet as ft
from flet import (
    Column,
    ElevatedButton,
    FilePicker,
    FilePickerResultEvent,
    GridView,
    Image,
    Page,
    Row,
    Text,
    TextField,
    UserControl,
)


class ImageInfo(UserControl):
    def build(self, image_path):
        self.image_path = image_path

        return Row(
            controls=[
                Column(
                    controls=[
                        Text(self.image_path),
                        TextField(
                            label="Comment", multiline=True, min_lines=5, max_lines=5
                        ),
                    ]
                ),
                Column(controls=[TextField(label="Year")]),
            ]
        )


class ImageViewer(UserControl):
    def __init__(
        self,
    ):
        super().__init__()
        self.folder: Text
        self.images: GridView
        self.folder_picker_button: ElevatedButton
        self.folder_picker: FilePicker

    def build(self):
        self.folder = Text("Empty")
        self.images = GridView(
            expand=1,
            runs_count=5,
            max_extent=150,
            child_aspect_ratio=1.0,
            spacing=5,
            run_spacing=5,
        )

        self.folder_picker_button = ElevatedButton(
            "Select Folder",
            icon=ft.icons.FOLDER_OPEN,
            on_click=lambda _: self.folder_picker.get_directory_path(),
        )

        return Row(
            [
                Row(
                    [
                        self.folder_picker_button,
                        self.folder,
                    ]
                ),
                Row([self.images]),
            ]
        )

    def did_mount(self):
        self.folder_picker = FilePicker(on_result=self.update_image_folder)
        self.page.overlay.append(self.folder_picker)
        self.folder_picker_button.disabled = self.page.web

    def update_image_folder(self, event: FilePickerResultEvent):
        self.folder.value = event.path if event.path else None

        if self.folder.value is not None:
            self.images.controls.clear()
            for file in Path(self.folder.value).iterdir():
                if file.name.lower().endswith("jpg"):
                    print(file.absolute().as_posix())
                    self.images.controls.append(
                        ft.Container(
                            content=Image(
                                src=file.absolute().as_posix(),
                                fit=ft.ImageFit.CONTAIN,
                                repeat=ft.ImageRepeat.NO_REPEAT,
                                border_radius=ft.border_radius.all(10),
                            )
                        )
                    )

        self.update()


def main(page: Page):
    page.title = "Flet EXIF Editor"

    page.add(ImageViewer())
    page.update()


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

Error message

No response

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

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

[gbrandt]

A few small suggestions:

• no need to make self.page = page in the init, self.page will be filled before did_mount() is called. Any code that needs page can move to did_mount()
• maybe define the types in init but create them in build() so you have a clean separation

I don't think that will fix the issue, but it cleans up the code nicely

[mmartinortiz]

Thanks for you suggestions. I updated my original question with them. As you pointed, it did not solve the issue, but the code is cleaner now :-)

[mmartinortiz]

Since I'm not assigning page to self.page in the __init___ method, how can I make use of page in the build method when the ElevatedButton is constructed? Should the button be constructed in the did_mount method? (see the comment in the build method)

[gbrandt]

You can disable the button in the did_mount() call =, where page is available. Or enable it. I would create it disabled and then enable it if required.

[mmartinortiz]

If it is preferred to create the components in build(), they are not available in did_mount() yet (as build runs after did_mount).

I also do not find very handy, from the perspective of a future me that reads the code, see that an object is initialise in part of the code and later "re-initialise" in another part of the code. It does not look very coherent to me.

[gbrandt]

build() should run before did_mount(). Did mount is called when the control is attached to the page so page exists. It works that way for me.

[mmartinortiz]

Aha, then the logic is as follow:

1. __init__(), it does not need to receive page as argument. UI elements do not have to be constructed here
2. build(), where UI elements are constructed and returned
3. did_mount(), where self.page is available. Now, UI elements can be updated to modified their initial behaviour via their attributes

The flow looks a bit odd to me (specially the modification of just constructed elements via attributes) but that is OK. After all, I'm learning a new framework.

Same issues persist (you already told me about that) but now the code looks more standard.

Thanks for your help so far, @gbrandt :-)

[mmartinortiz]

Based on the approach of Update 2, I started to create UserControl classes for those components that do not require the FilePicker. This approach is currently working, I uploaded my code to a repository where I'll keep working on it.

Thanks for the help so far, you will hear about me again 😆