AppBar disappearing on route change

[mariosantella]

First of all, thank you very much for your work!

I used the example given in your documentation and simply added an AppBar (at the page level), in the first route "/" the appBar component is visible but when I change the route it disappears completely (until I switch back to /). Obviously the appbar is added on every view.

  return ft.View(
        "/",
        controls=[
            page.appbar,
            ft.Text("This Is Index View"),
            ft.ElevatedButton("Go Next View", on_click=lambda _: page.go("/second_view/")),
        ]
    )

How to deal with this? I don't know if this is a bug or my wrong approach.

[saurabhwadekar]

please post the complete code

[mariosantella]

App.py

import flet as ft
from flet_route import Routing,path
from views.index_view import IndexView 
from views.second_view import SecondView 

def main(page: ft.Page):

    page.appbar = ft.AppBar(
        leading=ft.Icon(ft.icons.PALETTE),
        leading_width=40,
        title=ft.Text("AppBar Example"),
        center_title=False,
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.HOME, on_click=lambda _: page.go("/")),
            ft.IconButton(ft.icons.SETTINGS, on_click=lambda _: page.go("/second_view/")),
        ],
    )

    app_routes = [
        path(
            url="/", # Here you have to give that url which will call your view on mach
            clear=True, # If you want to clear all the routes you have passed so far, then pass True otherwise False.
            view=IndexView # Here you have to pass a function or method which will take page and params and return ft.View (If you are using function based view then you just have to give the name of the function.)
            ), 
        path(url="/second_view/", clear=False, view=SecondView),
    ]

    Routing(
        page=page, # Here you have to pass the page. Which will be found as a parameter in all your views
        app_routes=app_routes, # Here a list has to be passed in which we have defined app routing like app_routes
        )
    page.go(page.route)

ft.app(target=main,view=ft.WEB_BROWSER )

views - views/index_view.py

import flet as ft
from flet_route import Params,Basket

def IndexView(page:ft.Page,params:Params,basket:Basket):

    return ft.View(
        "/",
        controls=[
            page.appbar,
            ft.Text("This Is Index View"),
            ft.ElevatedButton("Go Next View", on_click=lambda _: page.go("/second_view/")),
        ]
    )

views - views/second_view.py

import flet as ft
from flet_route import Params,Basket

def SecondView(page:ft.Page,params:Params,basket:Basket):

    return ft.View(
        "/second_view/",
        controls=[
            page.appbar,
            ft.Text("This Is Next View"),
            ft.ElevatedButton("Go Index View", on_click=lambda _: page.go("/")),
        ]
    )

[mariosantella]

Hi Saurabh, any news? Thanks

[saurabhwadekar]

I sincerely apologize to you. I have been traveling for a few days. You can get appbar returned by defining a function and call that function in every view. I will definitely give sample code when I return

[saurabhwadekar]

app.py

import flet as ft
from flet_route import Routing,path
from views.index_view import IndexView 
from views.second_view import SecondView 

def main(page: ft.Page):

    app_routes = [
        path(
            url="/", # Here you have to give that url which will call your view on mach
            clear=True, # If you want to clear all the routes you have passed so far, then pass True otherwise False.
            view=IndexView # Here you have to pass a function or method which will take page and params and return ft.View (If you are using function based view then you just have to give the name of the function.)
            ), 
        path(url="/second_view/", clear=False, view=SecondView),
    ]

    Routing(
        page=page, # Here you have to pass the page. Which will be found as a parameter in all your views
        app_routes=app_routes, # Here a list has to be passed in which we have defined app routing like app_routes
        )
    page.go(page.route)

ft.app(target=main,view=ft.WEB_BROWSER )

views/index_view.py

import flet as ft
from flet_route import Params,Basket
from components.appbar import MyAppBar

def IndexView(page:ft.Page,params:Params,basket:Basket):

    return ft.View(
        "/",
        controls=[
            MyAppBar(page),
            ft.Text("This Is Index View"),
            ft.ElevatedButton("Go Next View", on_click=lambda _: page.go("/second_view/")),
        ]
    )

views/second_view.py

import flet as ft
from flet_route import Params,Basket
from components.appbar import MyAppBar

def SecondView(page:ft.Page,params:Params,basket:Basket):

    return ft.View(
        "/second_view/",
        controls=[
            MyAppBar(page),
            ft.Text("This Is Next View"),
            ft.ElevatedButton("Go Index View", on_click=lambda _: page.go("/")),
        ]
    )

components/appbar.py

import flet as ft

def MyAppBar(page:ft.Page):
    return ft.AppBar(
        leading=ft.Icon(ft.icons.PALETTE),
        leading_width=40,
        title=ft.Text("AppBar Example"),
        center_title=False,
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.HOME, on_click=lambda _: page.go("/")),
            ft.IconButton(ft.icons.SETTINGS, on_click=lambda _: page.go("/second_view/")),
        ],
    )

[mariosantella]

Oh ok thanks, I thought my code does the same thing.. but it's not. Solved

[saurabhwadekar]

Please close this if your issue is resolved