Class Inheritance Issue....

[AaronCatolico]

I have two classes in this very simple example:

Control1
Control2

In Control1, I have a red container box that I want to turn to blue when I click the button in the Control2 class.

I know that it requires inheritance or a subclass, but not sure how to implement it.

Here's the code that I currently have:

import flet as ft

class Control1(ft.UserControl):
    def __init__(self):
        super().__init__()

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


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

    def change_color(self, e):
        pass
        #The function that will change 'self.con1' container to blue, located in the 'Control1' class.

    def build(self):
        self.btn1 = ft.TextButton(text='CHANGE COLOR', style=ft.ButtonStyle(bgcolor='#5d5d5d', color='white'), 
                          on_click=change_color)
        return self.btn1




def main(page:ft.Page):
    page.window_width=600
    page.window_height=400
    page.bgcolor='#333333'
    page.window_center()
    page.theme_mode='light'
    page.padding=10
    page.update()

    page.add(Control1(), Control2())

ft.app(target=main, assets_dir='assets')

How do I properly inherit the Control1 class into Control2 class to access the Control1 self.con1 to change it's color to blue after clicking the self.btn1 in Control2 class?

[thetrotfreak]

@AaronCatolico , maybe the following will help.

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,
            width=200,
            height=200,
            bgcolor='red',
            border_radius=6
        )


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

    def change_color(self, e):
        # The function that will change 'self.con1' container to blue, located in the
        # 'Control1' class.
        self.con1.current.bgcolor = ft.colors.BLUE
        self.con1.current.update()
        # pass

    def build(self):
        self.btn1 = ft.TextButton(
            text='CHANGE COLOR',
            style=ft.ButtonStyle(bgcolor='#5d5d5d', color='white'),
            on_click=self.change_color
        )
        return self.btn1


def main(page: ft.Page):
    page.window_width = 600
    page.window_height = 400
    page.bgcolor = '#333333'
    page.window_center()
    page.theme_mode = 'light'
    page.padding = 10
    page.update()

    page.add(Control1(), Control2())


if __name__ == '__main__':
    ft.app(target=main, assets_dir='assets')

[AaronCatolico]

@thetrotfreak There's a new problem with your code.

So, after doing additional testing, I noticed that only one control can be updated at a time, and whichever was the last control added to the page, will be the one that get's updated.

For example, say that I have 3 separate controls in their own classes, when I click a button to change the bgcolor of Control1 and Control2 from Control3 class, only the Control2 classes container will change colors.

Consider the following code example where I have a button control in it's own class and when clicked, it's supposed to change the bgcolor of Control1 and Control2, but it only changes the Control2 classes contrainer. I have the 'Hamburger_btn' class that handles the function:

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__()
        self.c1 = Control1()

    def build(self):
        self.hamburger_btn = ft.TextButton(text='OPEN/CLOSE', 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()


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)

BTW, I have the 'Hamburger_btn' class inheriting the Control1 & Control2 classes in order to access their contrainers and change their colors.

[thetrotfreak]

If you could, I'd like an explainer for these:

• Leaving out the parenthesis () for Ref doesn't sit right with me.
• In the build() method of both Control1 and Control2, why are you reassigning those Ref.

[AaronCatolico]

If you could, I'd like an explainer for these:

• Leaving out the parenthesis () for Ref doesn't sit right with me.
• In the build() method of both Control1 and Control2, why are you reassigning those Ref.

Because after testing with the parenthesis (), it just does not work at all (meaning, it doesn't update the UI at all, in other words), only without the parenthesis () added at the end. For example, the following does not do anything:

self.con1 = ft.Ref[ft.Container]()

It's only when you remove the () like so, that it begins to make any changes to the UI:

self.con1 = ft.Ref[ft.Container]

Also, I've already tried it without reassigning the reference in the 'build'. Example, here's a complete Control1 class:

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

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

This does absolutely nothing. Isn't this supposed to be the correct syntax when using the 'ft.Ref'?

UPDATED/EDITED

Actually, all the above code does is throw the following errors:

Actually, all the above code does is throw the following errors:
C:\Users\Aaron\AppData\Local\Programs\Python\Python310\python.exe "C:/Users/Aaron/Documents/Python/Project1/test555.py"
Exception in thread Thread-7 (change_color):
Traceback (most recent call last):
  File "C:\Users\Aaron\AppData\Local\Programs\Python\Python310\lib\threading.py", line 1016, in _bootstrap_inner
    self.run()
  File "C:\Users\Aaron\AppData\Local\Programs\Python\Python310\lib\threading.py", line 953, in run
    self._target(*self._args, **self._kwargs)
  File "C:\Users\Aaron\Documents\Python\Project1\test555.py", line 24, in change_color
    self.con1.current.bgcolor ='orange'
AttributeError: 'NoneType' object has no attribute 'bgcolor'
Exception in thread Thread-9 (change_color):
Traceback (most recent call last):
  File "C:\Users\Aaron\AppData\Local\Programs\Python\Python310\lib\threading.py", line 1016, in _bootstrap_inner
    self.run()
  File "C:\Users\Aaron\AppData\Local\Programs\Python\Python310\lib\threading.py", line 953, in run
    self._target(*self._args, **self._kwargs)
  File "C:\Users\Aaron\Documents\Python\Project1\test555.py", line 24, in change_color
    self.con1.current.bgcolor ='orange'
AttributeError: 'NoneType' object has no attribute 'bgcolor'

[thetrotfreak]

Yea, it threw AttributeError on me too. If you check the id() of con1 and con2, when you're not using those () after Ref, you'd see that they are same. That shouldn't be the case and hence those missing () struck me.

[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.