Using Classes and Updating Isolated Controls - Issue

[AaronCatolico]

Question

In a project that I'm working on it requires for me to use separate/isolated classes to represent each control.
I'm trying to make multiple updates to each isolated class using the 'ft.Ref' and 'ref=self.mycontrol', but they don't seem to be working properly when making updates to multiple controls.

Here's an example where I have 3 separate classes; Control1, Control2, and Hamburger_btn. When I click the button inside of Hamburger_btn, only the Control2 class gets updated instead of both Control1 and Control2.

What exactly am I doing wrong in this example below?

Code sample

import flet as ft

class Control1(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.con1 = ft.Ref[ft.Container]

    def build(self):
        self.con1 = ft.Container(bgcolor='blue', width=200, height=200, border_radius=6, margin=10, ref=self.con1)
        return self.con1


class Control2(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.con2 = ft.Ref[ft.Container]

    def build(self):
        self.con2 = ft.Container(bgcolor='yellow', width=200, height=200, border_radius=6, margin=10, ref=self.con2)
        return self.con2



class Hamburger_btn(Control1, Control2):
    def __init__(self):
        super().__init__()

    def build(self):
        self.hamburger_btn = ft.TextButton(text='Change Colors', style=ft.ButtonStyle(bgcolor='red', color='white'),
                                           on_click=self.change_color)
        return self.hamburger_btn

    def change_color(self, e):
        self.con1.current.bgcolor = 'red'
        self.con1.current.update()
        self.con2.current.bgcolor = 'orange'
        self.con2.current.update()


def main(page:ft.Page):
    page.window_width = 800
    page.window_height = 500
    page.window_center()
    page.bgcolor = '#333333'
    page.padding = 0
    page.theme_mode = 'light'
    page.update()

    page.add(ft.Row([Hamburger_btn(), Control1(), Control2()]))

ft.app(target=main)

Error message

No response

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

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

[thetrotfreak]

@AaronCatolico did you try other ways like:

• Adding Control1 and Control2 inside the build() or __init__() of Hamburger_btn, as in, Hamburger_btn is a UserControl composed of other UserControl like Control1 and Control2.
• OR, maybe passing in those Ref when instantiating Hamburger_btn.

IMO, multiple inheritance and MRO is best avoided.

[AaronCatolico]

Not sure what you mean mean by 'check the id() of con1 and con2'. Did you find a solution to this issue? I thought that we were using the correct syntax. Also, how would you build the separate classes without needing to use multiple inheritance? I need each class properly separated, so, that's why I'm doing it that way.

[thetrotfreak]

About id().

I still think that the syntax is incorrect here. But more than this, I think it's this multiple inheritance that's complicating the code.

About breaking your app into smaller self-contained components

import flet as ft


class Control1(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.con1 = ft.Ref[ft.Container]()

    def build(self):
        return ft.Container(
            ref=self.con1,
            bgcolor="blue",
            width=200,
            height=200,
            border_radius=6,
            margin=10,
        )


class Control2(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.con2 = ft.Ref[ft.Container]()

    def build(self):
        "called build"
        return ft.Container(
            ref=self.con2,
            bgcolor="yellow",
            width=200,
            height=200,
            border_radius=6,
            margin=10,
        )


class Hamburger_btn(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.c1 = Control1()
        self.c2 = Control2()

    def build(self):
        self.hamburger_btn = ft.TextButton(
            text="OPEN/CLOSE",
            style=ft.ButtonStyle(bgcolor="red", color="white"),
            on_click=self.change_color,
        )
        return ft.Row([self.hamburger_btn, self.c1, self.c2])

    def change_color(self, e):
        # this is perhaps the worst way to go about this
        # you should instead have change_color() as method inside
        # Control1 and Control2
        # and then just call it in here like:
        # self.c1.change_color()
        # self.c2.change_color()
        self.c1.con1.current.bgcolor = "red"
        self.c2.con2.current.bgcolor = "red"
        self.c1.con1.current.update()
        self.c2.con2.current.update()


def main(page: ft.Page):
    page.title = "EBSEOpro v1.0"
    page.window_width = 800
    page.window_height = 500
    page.window_center()
    page.bgcolor = "#333333"
    page.padding = 0
    page.theme_mode = "light"
    page.update()

    page.add(Hamburger_btn())


ft.app(target=main)

There are yet, other ways to accomplish what you're tying to do before turning to multiple inheritance.

[thetrotfreak]

Here's another way:

import flet as ft


class Control1(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.con1 = ft.Container(
            bgcolor="blue",
            width=200,
            height=200,
            border_radius=6,
            margin=10,
        )

    def change_color(self):
        self.con1.bgcolor = "red"
        self.con1.update()

    def build(self):
        return self.con1


class Control2(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.con2 = ft.Ref[ft.Container]()

    def change_color(self):
        self.con2.current.bgcolor = "red"
        self.con2.current.update()

    def build(self):
        "called build"
        return ft.Container(
            ref=self.con2,
            bgcolor="yellow",
            width=200,
            height=200,
            border_radius=6,
            margin=10,
        )


class Hamburger_btn(ft.UserControl):
    def __init__(self, c1, c2):
        super().__init__()
        self.c1 = c1
        self.c2 = c2

    def build(self):
        self.hamburger_btn = ft.TextButton(
            text="OPEN/CLOSE",
            style=ft.ButtonStyle(bgcolor="red", color="white"),
            on_click=self.change_color,
        )
        return ft.Row([self.hamburger_btn, self.c1, self.c2])

    def change_color(self, e):
        self.c1.change_color()
        self.c2.change_color()


def main(page: ft.Page):
    page.title = "EBSEOpro v1.0"
    page.window_width = 800
    page.window_height = 500
    page.window_center()
    page.bgcolor = "#333333"
    page.padding = 0
    page.theme_mode = "light"
    page.update()

    page.add(Hamburger_btn(c1=Control1(), c2=Control2()))


ft.app(target=main)

You can see that in Control1, I've completely dropped the Ref, this is in case you're tired of doing the .current approach.

[thetrotfreak]

One thing though, I couldn't figure out the exact flow of code that leads to that AttributeError, it's assigned a None (check here) initially but once passed as an argument to a Control it's reassigned to refer to it (check here). It's probably something to do with your code as to why not both Control1 and Control2 are updating their colors. I wish I could help you out, but as of now, I can only suggest other ways to structure your code instead of addressing the original issue. Maybe others who see this discussion can help you out.