Trolli (Trello Clone) Tutorial Incomplete and Corresponding Github example broken.

[alldetectai]

Description
The Trolli tutorial appears to be incomplete. I think the TrelloApp class is missing its UserControl parent and also its build() method. I also visited the corresponding github repo for this app https://github.com/flet-dev/examples/tree/main/python/apps/trolli which, upon running main.py after creating a new virtual environment and installing the project requirements, I encountered an error on the create_new_board implementation where the Board() is receiving a None type for its first arg instead a control.

Code example to reproduce the issue:
Follow this first section:
https://flet.dev/docs/tutorials/trello-clone#defining-entities-and-layout

Describe the results you received:
AttributeError: 'TrelloApp' object has no attribute '_build_add_commands'

Describe the results you expected:
According to the tutorial:
"we can see the result and get hot reloading when we make any style changes. For example, try adding alignment="center" to the first row in the container like this…"

Flet version (pip show flet):
Version: 0.20.0

Give your requirements.txt file (don't pip freeze, instead give direct packages):
anyio==4.2.0
arrow==1.3.0
binaryornot==0.4.4
certifi==2024.2.2
chardet==5.2.0
charset-normalizer==3.3.2
click==8.1.7
cookiecutter==2.5.0
flet==0.20.0
flet-core==0.20.0
flet-runtime==0.20.0
h11==0.14.0
httpcore==0.17.3
httpx==0.24.1
idna==3.6
Jinja2==3.1.3
markdown-it-py==3.0.0
MarkupSafe==2.1.5
mdurl==0.1.2
oauthlib==3.2.2
packaging==23.2
Pygments==2.17.2
pypng==0.20220715.0
python-dateutil==2.8.2
python-slugify==8.0.4
PyYAML==6.0.1
qrcode==7.4.2
repath==0.9.0
requests==2.31.0
rich==13.7.0
six==1.16.0
sniffio==1.3.0
text-unidecode==1.3
types-python-dateutil==2.8.19.20240106
typing_extensions==4.9.0
urllib3==2.2.0
watchdog==3.0.0
websocket-client==1.7.0
websockets==11.0.3

Operating system:
macOS

[alldetectai]

The issue that I mentioned regarding the broken Github example for this app is the same as this: #102

[alldetectai]

Also related: flet-dev/flet#1553

[Michaelfun]

You received this error ( AttributeError: 'TrelloApp' object has no attribute '_build_add_commands'), cause the TrelloApp class is missing UserControl class.
first import UserControl
change this (class TrelloApp:) to ( class TrelloApp(UserControl) ):

[Michaelfun]

and in case you download the source code and get an error same as the one in live demo like this one below...

=>There was an error while processing your request: 'NoneType' object have no attribute 'width'.

here is what I do..

=> First, I put app.initialize() above page.add(app) my main function look like the one below

def main(page: Page):
    page.title = "Flet Trello clone"
    page.padding = 0
    page.theme = theme.Theme(font_family="Verdana")
    page.theme.page_transitions.windows = "cupertino"
    page.fonts = {"Pacifico": "Pacifico-Regular.ttf"}
    page.bgcolor = colors.BLUE_GREY_200
    app = DriverApp(page, InMemoryStore())
    app.initialize()
    page.add(app)
    page.update()

=> secondly I comment build function and initialize self.layout in init function like the code below

class TrelloApp(UserControl):
    def __init__(self, page: Page, store: DataStore):
        super().__init__()
        self.page = page
        self.store: DataStore = store
        self.page.on_route_change = self.route_change
        self.boards = self.store.get_boards()
        self.login_profile_button = PopupMenuItem(text="Log in", on_click=self.login)
        self.layout = AppLayout(
            self,
            self.page,
            self.store,
            tight=True,
            expand=True,
            vertical_alignment="start",
        )
        self.appbar_items = [
            self.login_profile_button,
            PopupMenuItem(),  # divider
            PopupMenuItem(text="Settings"),
        ]
        self.appbar = AppBar(
            leading=Icon(icons.GRID_GOLDENRATIO_ROUNDED),
            leading_width=100,
            title=Text(f"Driver", font_family="Pacifico", size=32, text_align="start"),
            center_title=False,
            toolbar_height=75,
            bgcolor=colors.LIGHT_BLUE_ACCENT_700,
            actions=[
                Container(
                    content=PopupMenuButton(items=self.appbar_items),
                    margin=margin.only(left=50, right=25),
                )
            ],
        )
        self.page.appbar = self.appbar
        self.page.update()

    # def build(self):
    #     self.layout = AppLayout(
    #         self,
    #         self.page,
    #         self.store,
    #         tight=True,
    #         expand=True,
    #         vertical_alignment="start",
    #     )
    #     return self.layout

=> after changing everything like that the code worked, I released the NoneType error was rised because self.page was not being initialized

[mvolar]

You received this error ( AttributeError: 'TrelloApp' object has no attribute '_build_add_commands'), cause the TrelloApp class is missing UserControl class. first import UserControl change this (class TrelloApp:) to ( class TrelloApp(UserControl) ):

In the latest release notes (dated 6. March 2024) it states that the UserControl class has been deprecated. https://flet.dev/blog/flet-fastapi-and-async-api-improvements/#custom-controls-api-normalized

So anyone installing afterwards, this tutorial, and this fix will not work, however I am one of those people so we are all still waiting for the fix.

[Michaelfun]

You received this error ( AttributeError: 'TrelloApp' object has no attribute '_build_add_commands'), cause the TrelloApp class is missing UserControl class. first import UserControl change this (class TrelloApp:) to ( class TrelloApp(UserControl) ):

In the latest release notes (dated 6. March 2024) it states that the UserControl class has been deprecated. https://flet.dev/blog/flet-fastapi-and-async-api-improvements/#custom-controls-api-normalized

So anyone installing afterwards, this tutorial, and this fix will not work, however I am one of those people so we are all still waiting for the fix.

I will look to that, if I come up with any solution for that, I will post my solution here

[ndonkoHenri]

Can you please give the code another try? It has been updated.