Daxexs / flet-easy-web-ts

🌐Using Flet-Easy for github page.
https://daxexs.github.io/flet-easy-web-ts/
0 stars 0 forks source link

It's possible to add NavigationDrawer to page_config ? #1

Open korohub opened 3 weeks ago

korohub commented 3 weeks ago

Hello, I've tried adding a NavigatioDrawer in page_config, but that doesn't seem to be the right method. it never opens and I don't get any errors either. Is this possible with this configuration?

import flet as ft
import flet_easy as fs

class ConfigApp:
    def __init__(self, app: fs.FletEasy):
        self.app = app
        self.start()

    def start(self):
        @self.app.view
        def view_config(data: fs.Datasy):

            def open_drawer(e):
                data.page.drawer_open = True  

            """Adding an AppBar on all pages"""
            return fs.Viewsy(
                appbar=ft.AppBar(
                    title=ft.Text("FS"),
                    actions=[
                        ft.IconButton(
                            icon=ft.icons.MENU,  
                            on_click=open_drawer,  
                        ),
                        ft.IconButton(
                            icon=ft.icons.HOME,
                            on_click=data.go(data.route_init),
                        ),                        
                        ft.VerticalDivider(opacity=0),
                        ft.FilledButton(
                            text="Counter",
                            on_click=data.go("/counter/test/0"),
                        ),
                    ],
                    bgcolor="#121113",
                )
            )

        @self.app.config
        def page_config(page: ft.Page):
            """Removing animation on route change."""
            theme = ft.Theme()
            platforms = ["android", "ios", "macos", "linux", "windows"]
            for platform in platforms:
                setattr(theme.page_transitions, platform,
                        ft.PageTransitionTheme.NONE)
            page.theme = theme

            # Drawer configuration
            page.drawer = ft.NavigationDrawer(
                controls=[
                    ft.Container(height=12),
                    ft.NavigationDrawerDestination(
                        # page.go('/'),                    
                        label="home",
                        icon=ft.icons.DOOR_BACK_DOOR_OUTLINED,
                        selected_icon_content=ft.Icon(ft.icons.DOOR_BACK_DOOR),
                    ),
                    ft.Divider(thickness=2),
                    ft.NavigationDrawerDestination(
                        icon_content=ft.Icon(ft.icons.MAIL_OUTLINED),
                        label="Item 2",
                        selected_icon=ft.icons.MAIL,
                    ),
                    ft.NavigationDrawerDestination(
                        icon_content=ft.Icon(ft.icons.PHONE_OUTLINED),
                        label="Item 3",
                        selected_icon=ft.icons.PHONE,
                    ),
                ],
            )
Daxexs commented 4 days ago

Hello, What happens is that page.drawer is being misused in the @app.config decorator, this happens because flet-easy uses the control ft.View from flet to create a view, so the same control has its own parameter (See more). This applies for all the parameters available in the ft.View control, in case it is not available then it can be used from page.

Example

import flet as ft
import flet_easy as fs

app = fs.FletEasy()

class ConfigApp:
    def __init__(self, app: fs.FletEasy):
        self.app = app
        self.start()

    def start(self):
        @self.app.view
        def view_config(data: fs.Datasy):
            def open_drawer(e):
                data.page.drawer_open = True

            """Adding an AppBar on all pages"""
            return fs.Viewsy(
                appbar=ft.AppBar(
                    title=ft.Text("FS"),
                    actions=[
                        ft.IconButton(
                            icon=ft.icons.MENU,
                            on_click=open_drawer,
                        ),
                        ft.IconButton(
                            icon=ft.icons.HOME,
                            on_click=data.go(data.route_init),
                        ),
                        ft.VerticalDivider(opacity=0),
                        ft.FilledButton(
                            text="Counter",
                            on_click=data.go("/counter/test/0"),
                        ),
                    ],
                    bgcolor="#121113",
                ),
                # Drawer configuration
                drawer=ft.NavigationDrawer(
                    controls=[
                        ft.Container(height=12),
                        ft.NavigationDrawerDestination(
                            # page.go('/'),
                            label="home",
                            icon=ft.icons.DOOR_BACK_DOOR_OUTLINED,
                            selected_icon_content=ft.Icon(ft.icons.DOOR_BACK_DOOR),
                        ),
                        ft.Divider(thickness=2),
                        ft.NavigationDrawerDestination(
                            icon_content=ft.Icon(ft.icons.MAIL_OUTLINED),
                            label="Item 2",
                            selected_icon=ft.icons.MAIL,
                        ),
                        ft.NavigationDrawerDestination(
                            icon_content=ft.Icon(ft.icons.PHONE_OUTLINED),
                            label="Item 3",
                            selected_icon=ft.icons.PHONE,
                        ),
                    ],
                ),
            )

        @self.app.config
        def page_config(page: ft.Page):
            """Removing animation on route change."""
            theme = ft.Theme()
            platforms = ["android", "ios", "macos", "linux", "windows"]
            for platform in platforms:
                setattr(theme.page_transitions, platform, ft.PageTransitionTheme.NONE)
            page.theme = theme

# add a config app to the app
ConfigApp(app)

# add a page to the app
@app.page("/")
def page_home(data: fs.Datasy):
    return ft.View(
        controls=[
            ft.Text("home")
            ],
        appbar=data.view.appbar,
        drawer=data.view.drawer
    )

# run the app
app.run()