Separating Classes & Using Inheritance With UserControl

[AaronCatolico]

I have two separate classes ('Container1' & 'Container2'). I'd like the Container2 class to be able to inherit Container1 controls (variables and functions), but every class in the end will be called from the 'main.py' file to add all classes controls to the page. Here's a very simple example below of Container1 & Container2 classes. I'd like to be able to click the button in Container2 class container to change the color of Container1 container:

import flet as ft

class Container1(ft.UserControl):

    def change_color1(self, e):
        self.c1.bgcolor='orange'
        self.c1.update()

    def build(self):
        self.c1 = ft.Container(width=200, height=200, bgcolor='red', alignment=ft.alignment.center, margin=10)
        self.btn1 = ft.TextButton(text='COUNT', style=ft.ButtonStyle(bgcolor='green', color='white'), on_click=self.change_color1)
        self.c1.content = ft.Column([self.btn1], alignment=ft.MainAxisAlignment.CENTER)
        return ft.Column([self.c1])


class Container2(Container1):
    
    def change_color2(self, e):
        pass
        #when clicking btn2 in Container2, the background color of c1 in Container1 class will turn blue

    def build(self):
        self.c2 = ft.Container(width=200, height=200, bgcolor='red', alignment=ft.alignment.center, margin=10)
        self.btn2 = ft.TextButton(text='COUNT', style=ft.ButtonStyle(bgcolor='green', color='white'), on_click=self.change_color2)
        self.c2.content = ft.Column([self.btn2], alignment=ft.MainAxisAlignment.CENTER)
        return ft.Column([self.c2])



def main(page):
    page.window_width = 600
    page.window_height = 580
    page.window_center()
    page.bgcolor = '#333333'
    page.padding = 0
    page.window_always_on_top = True
    page.update()

    main_container = ft.Row([Container1(), Container2()])

    page.add(main_container)

ft.app(target=main)

[iron3oxide]

Understood, but what's your question?

[AaronCatolico]

I think that I'd really only use them in the 'main_container' to call 1 instance of each class, then add the 'main_container' to the page.

[iron3oxide]

In that case, I'd advise you to keep the two Container classes completely separate (no inheritance) and define a MainContainer class which contains an instance of both container classes. You could then either pass each container constructor the instance of the other container class or do the interaction logic in the MainContainer by employing an Observer pattern (MainContainer registers a callback with each container, which is called by them when e.g. the button is clicked).

[AaronCatolico]

Yes, I've thought of a Main class of some kind as the one that will receive all of the controls from separate classes, but wasn't sure how to implement it all. In this case, how would that be written?

[iron3oxide]

My advice on how to write this depends on many factors, the most important one being if you intend to use the program in a production setting and maintain it for a longer period of time. The complexity of the program (will it have multiple views and thus need routing, route protection and cross-view state) is another important factor to consider.

[AaronCatolico]

No, it won't have multiple views and need any routing. If you know how to create a basic example of a 'main.py' file that can pull in other classes from other files/modules such as a 'control1.py' file with class 'Control1' (it's properties & functions), and a 'control2.py' file with 'Control2' class, along with it's properties and functions, then have them work together, that would most likely be the best structure for this project.