How to migrate a UserControl to Custom Control?

[thetrotfreak]

Question

How would you rewrite this old implementation as per newer custom control?

Code sample

from typing import Callable

from flet import (
    AlertDialog,
    Column,
    ControlEvent,
    CrossAxisAlignment,
    MainAxisAlignment,
    Page,
    Radio,
    RadioGroup,
    Text,
    TextAlign,
    TextThemeStyle,
    ThemeMode,
    UserControl,
)

from utils import Preference


class ChooseThemeDialog(UserControl):
    def __init__(self, page: Page, callback: Callable[[], None]):
        super().__init__()
        self.pref = Preference(page)
        self.page = page
        self.callback = callback
        self.dialog = AlertDialog(
            title=Text(
                value="app theme".title(),
                theme_style=TextThemeStyle.TITLE_LARGE,
                expand=True,
                text_align=TextAlign.CENTER,
            ),
            content=Column(
                controls=[
                    RadioGroup(
                        value=self.page.theme_mode,
                        content=Column(
                            controls=[
                                *map(
                                    lambda enum: Radio(
                                        value=enum[1].value, label=enum[1].value.title()
                                    ),
                                    ThemeMode._member_map_.items(),
                                )
                            ]
                        ),
                        on_change=self.__theme_mode__,
                    )
                ],
                alignment=MainAxisAlignment.START,
                horizontal_alignment=CrossAxisAlignment.START,
                tight=True,
            ),
        )

    def __theme_mode__(self, event: ControlEvent):
        self.pref.update(k="theme", v=event.control.value)
        self.page.theme_mode = event.control.value
        self.callback()

    def open(self):
        self.page.dialog = self.dialog
        self.dialog.open = True
        self.page.update()

    def build(self):
        return self.dialog

Error message

No response

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

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

[yunguangli]

Since you returns a AlertDialog control, naturally first choice is to create a class that inherits from the AlertDialog.

[thetrotfreak]

Thanks! I did that.

[ndonkoHenri]

Could be modified as follows (https://flet.dev/docs/getting-started/custom-controls):

from typing import Callable

from flet import (
    AlertDialog,
    Column,
    ControlEvent,
    CrossAxisAlignment,
    MainAxisAlignment,
    Page,
    Radio,
    RadioGroup,
    Text,
    TextAlign,
    TextThemeStyle,
    ThemeMode,
    UserControl,
)

from utils import Preference


class ChooseThemeDialog(AlertDialog):
    def __init__(self, page: Page, callback: Callable[[], None]):
        super().__init__()
        self.pref = Preference(page)
        self.page = page
        self.callback = callback

        self.title = Text(
            value="app theme".title(),
            theme_style=TextThemeStyle.TITLE_LARGE,
            expand=True,
            text_align=TextAlign.CENTER,
        )
        self.content = Column(
            controls=[
                RadioGroup(
                    value=self.page.theme_mode,
                    content=Column(
                        controls=[
                            *map(
                                lambda enum: Radio(
                                    value=enum[1].value, label=enum[1].value.title()
                                ),
                                ThemeMode._member_map_.items(),
                            )
                        ]
                    ),
                    on_change=self.__theme_mode__,
                )
            ],
            alignment=MainAxisAlignment.START,
            horizontal_alignment=CrossAxisAlignment.START,
            tight=True,
        )

    def __theme_mode__(self, event: ControlEvent):
        self.pref.update(k="theme", v=event.control.value)
        self.page.theme_mode = event.control.value
        self.callback()

    def open(self):
        self.page.show_dialog(self)

[thetrotfreak]

I did it like this:

class ChooseThemeDialog(AlertDialog):
    def __init__(
        self,
        ref: Optional[Ref] = None,
        open: bool = False,
        on_dismiss: Optional[Callable[..., None]] = None,
    ):
        super().__init__(ref=ref)
        self.open = open
        self.on_dismiss = self._decorator_on_dismiss(on_dismiss)

    def _decorator_on_dismiss(self, on_dismiss: Optional[Callable[..., None]]):
        def wrapper_on_dismiss(*args, **kwargs):
            if on_dismiss is not None:
                on_dismiss(*args, **kwargs)
            Preference(page=self.page).update(k="theme", v=self.page.theme_mode)

        return wrapper_on_dismiss

    def __theme_mode__(self, event: ControlEvent):
        self.page.theme_mode = event.control.value
        self.page.update()

    def build(self):
        self.title = Text(
            value="app theme".title(),
            theme_style=TextThemeStyle.TITLE_LARGE,
            expand=True,
            text_align=TextAlign.CENTER,
        )
        self.content = Column(
            controls=[
                RadioGroup(
                    value=self.page.theme_mode,
                    content=Column(
                        controls=[
                            *map(
                                lambda enum: Radio(
                                    value=enum[1].value, label=enum[1].value.title()
                                ),
                                ThemeMode._member_map_.items(),
                            )
                        ]
                    ),
                    on_change=self.__theme_mode__,
                )
            ],
            tight=True,  # Flase sets the Column to expand, causing the AlertDialog to expand too
            alignment=MainAxisAlignment.START,
            horizontal_alignment=CrossAxisAlignment.START,
        )

One issue I have is the :param tight. If I don't set it to True, the Column causes the AlertDialog to expand vertically. But setting it to True seems as a workaround/hack to me. Any better ways to handle it?