How to keep my page parameters within multiple views flet/python

471 Views Asked by At

I'm trying to make views to navigate through pages with flet framework, but when I try to add it, my page parameters such as bgcolor and alignment are being reset within my route_change function, and I cannot place my main_column in center of the screen horizontally. Is there any way I can keep those page parameters?

Here's my Source code:

def main(page: Page):
    page.title = "Register"
    page.bgcolor = "#f0f0f0"
    page.horizontal_alignment = "center"
    page.vertical_alignment = "center"

def redirect_button():
    return Container(
        content=ElevatedButton(
            height=30,
            content=Row(
                alignment='center',
                controls=[
                    IconButton(
                        icon=icons.LOGIN_OUTLINED,
                        icon_size=18,
                        icon_color='black',
                    ),
                    Text(
                        value='Go to Login Page',
                        color='black',
                        size=10,
                        weight="bold"
                    )
                ]
            ),
            on_click=lambda _: page.go("/login"),
            style=ButtonStyle(
                shape={"": RoundedRectangleBorder(radius=8)},
                bgcolor={"": "#f0f3f6"},
            )
        )
    )

def _main_column_():
    return Container(
        alignment=alignment.center,
        width=280,
        height=600,
        bgcolor="#ffffff",
        padding=12,
        border_radius=35,
        content=Column(
            # spacing=20,
            horizontal_alignment="center",
        ),
    )

def _register_user(e):
    try:
        auth.create_user_with_email_and_password(
            _register_.controls[0].controls[3].controls[0].content.value,
            _register_.controls[0].controls[3].controls[1].content.value
        )
        print("Registration success!")
    except Exception as e:
        print(e)

_register_ = UserWidget("Register", "Enter your Credentials", "Register", _register_user)

_reg_main = _main_column_()
_reg_main.content.controls.append(Container(padding=10))
_reg_main.content.controls.append(_register_)
_reg_main.content.controls.append(redirect_button())

# page.add(Row(alignment="center", spacing=25, controls=[_reg_main]))
def route_change(e):
    page.views.clear()

    page.views.append(

        View(
            "/",
            [
                Row(alignment="center", spacing=25, controls=[_reg_main])
            ],
        )
    )

    if page.route == "/login":
        page.views.append(
            View(
                "/login",
                [
                    AppBar(title=Text("Store"), bgcolor=colors.SURFACE_VARIANT),
                    ElevatedButton("Go Home", on_click=lambda _: page.go("/")),
                ],
            )
        )
    page.update()

def view_pop(e):
    page.views.pop()
    top_view = page.views[-1]
    page.go(top_view.route)

page.on_route_change = route_change
page.on_view_pop = view_pop

page.go(page.route)

if __name__ == "__main__":
    flet.app(target=main, assets_dir="assets")
1

There are 1 best solutions below

0
On

The View control has most of this properties. See here.

You can simply set them when creating your different Views.

Ex:

    def route_change(e):
        page.views.clear()
    
        page.views.append(
    
            View(
                "/",
                [
                    Row(alignment="center", spacing=25, controls=[_reg_main])
                ],
                bgcolor = "#f0f0f0",
                horizontal_alignment = "center",
                vertical_alignment = "center",
            )
        )
    
        if page.route == "/login":
            page.views.append(
                View(
                    "/login",
                    [
                        AppBar(title=Text("Store"), bgcolor=colors.SURFACE_VARIANT),
                        ElevatedButton("Go Home", on_click=lambda _: page.go("/")),
                    ],
                    bgcolor="#f0f0f0",
                    horizontal_alignment="center",
                    vertical_alignment="center",
                )
            )
        page.update()