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: https://github.com/flet-dev/examples/issues/102

[alldetectai]

Also related: https://github.com/flet-dev/flet/issues/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.