I developed a simple app with two different views, each one defined into two different classes. When I try to add the first one to the page, I get an error into the app window: "Unknown control view". Here is the code:
import flet as ft
import time
class WelcomeView(ft.View):
def __init__(self, window_width, window_height, login_on_click, route):
super().__init__()
self.window_width = window_width
self.window_height = window_height
self.login_on_click = login_on_click
self.route = route
def update_layout(self):
"""
Updates the layout by incrementally changing the progress bar value and updating the background color of the
top container and the login button every 10% of progress.
This function iterates from 0 to 100, updating the progress bar's value and sleeping for 0.05 seconds
between each increment. When the progress reaches a multiple of 10, it changes the background color of
the top container and the login button based on a predefined list of green shades. After reaching 100%,
it resets the progress.
"""
colors = [ft.colors.GREEN_50, ft.colors.GREEN_100, ft.colors.GREEN_200, ft.colors.GREEN_300, ft.colors.GREEN_400, ft.colors.GREEN_500, ft.colors.GREEN_600, ft.colors.GREEN_700, ft.colors.GREEN_800, ft.colors.GREEN_900]
val=0
while val < 101:
self.pb.value = val * 0.01
time.sleep(0.05)
#update container bgcolor every 10%
mod = val % 10
if mod == 0.0:
self.topContainer.bgcolor = colors[int(val/10) - 1]
self.loginButton.style = ft.ButtonStyle(bgcolor=colors[int(val/10) - 1])
#update val value
val += 1
if val == 100:
val=0
#update the page
self.update()
def did_mount(self):
self.update_layout()
def build(self):
self.topContainer = ft.Container(
bgcolor=ft.colors.GREEN,
width=self.window_width,
height=self.window_height * 0.25,
)
self.pb = ft.ProgressBar()
self.loginButton=ft.FilledButton(text="LOGIN", on_click = self.login_on_click)
self.bottomContainer = ft.Container(
width=self.window_width,
height=self.window_height * 0.75,
content=ft.Column(
[self.loginButton],
alignment="CENTER",
horizontal_alignment="CENTER",
),
)
view = ft.View(
route=self.route,
padding=0,
horizontal_alignment="center",
vertical_alignment="top",
controls=[ft.Column([self.topContainer, self.pb, self.bottomContainer], spacing=0,)],
# theme=ft.Theme(color_scheme_seed = ft.colors.GREEN),
# theme_mode="light",
)
return view
class LoginView(ft.View):
def __init__(self, window_width, window_height, route, on_click):
super().__init__()
self.window_width = window_width
self.window_height = window_height
self.route = route
self.back_on_click = on_click
def build(self):
view = ft.View(
route=self.route,
padding=0,
horizontal_alignment="center",
vertical_alignment="top",
controls=[ft.Column([ft.FilledButton(text="BACK", on_click=self.back_on_click)], )],
# theme=ft.Theme(color_scheme_seed = ft.colors.GREEN),
# theme_mode="light",
)
return view
def main(page: ft.Page):
def route_change(route):
page.views.clear()
page.views.append(welcome_view)
if page.route == "/login_view":
page.views.append(login_view)
page.update()
def view_pop(view):
if page.route == "/login_view":
page.go("/")
page.theme = ft.Theme(color_scheme_seed = ft.colors.GREEN) #BLUE_200
page.theme_mode = "light"
page.window_height = 700
page.window_width = 400
page.window_resizable = False
page.window_maximizable = False
page.title = "Mobile App UI Example"
welcome_view = WelcomeView(window_height=page.window_width,
window_width=page.window_height,
route="/",
login_on_click=lambda _: page.go("/login_view"),
)
login_view = LoginView(window_height=page.window_width,
window_width=page.window_height,
route="/login_view",
on_click=lambda _: page.go("/")
)
page.on_route_change = route_change
page.on_view_pop = view_pop
page.go(page.route)
ft.app(target=main, assets_dir="assets")
Could someone give some hints about performing routing with views defined outside the main function? Thank you
I developed a simple app with two different views, each one defined into two different classes. When I try to add the first one to the page, I get an error into the app window: "Unknown control view". Here is the code:
import flet as ft
import time
class WelcomeView(ft.View):
def __init__(self, window_width, window_height, login_on_click, route):
super().__init__()
self.window_width = window_width
self.window_height = window_height
self.login_on_click = login_on_click
self.route = route
def update_layout(self):
"""
Updates the layout by incrementally changing the progress bar value and updating the background color of the
top container and the login button every 10% of progress.
This function iterates from 0 to 100, updating the progress bar's value and sleeping for 0.05 seconds
between each increment. When the progress reaches a multiple of 10, it changes the background color of
the top container and the login button based on a predefined list of green shades. After reaching 100%,
it resets the progress.
"""
colors = [ft.colors.GREEN_50, ft.colors.GREEN_100, ft.colors.GREEN_200, ft.colors.GREEN_300, ft.colors.GREEN_400, ft.colors.GREEN_500, ft.colors.GREEN_600, ft.colors.GREEN_700, ft.colors.GREEN_800, ft.colors.GREEN_900]
val=0
while val < 101:
self.pb.value = val * 0.01
time.sleep(0.05)
#update container bgcolor every 10%
mod = val % 10
if mod == 0.0:
self.topContainer.bgcolor = colors[int(val/10) - 1]
self.loginButton.style = ft.ButtonStyle(bgcolor=colors[int(val/10) - 1])
#update val value
val += 1
if val == 100:
val=0
#update the page
self.update()
def did_mount(self):
self.update_layout()
def build(self):
self.topContainer = ft.Container(
bgcolor=ft.colors.GREEN,
width=self.window_width,
height=self.window_height * 0.25,
)
self.pb = ft.ProgressBar()
self.loginButton=ft.FilledButton(text="LOGIN", on_click = self.login_on_click)
self.bottomContainer = ft.Container(
width=self.window_width,
height=self.window_height * 0.75,
content=ft.Column(
[self.loginButton],
alignment="CENTER",
horizontal_alignment="CENTER",
),
)
view = ft.View(
route=self.route,
padding=0,
horizontal_alignment="center",
vertical_alignment="top",
controls=[ft.Column([self.topContainer, self.pb, self.bottomContainer], spacing=0,)],
# theme=ft.Theme(color_scheme_seed = ft.colors.GREEN),
# theme_mode="light",
)
return view
class LoginView(ft.View):
def __init__(self, window_width, window_height, route, on_click):
super().__init__()
self.window_width = window_width
self.window_height = window_height
self.route = route
self.back_on_click = on_click
def build(self):
view = ft.View(
route=self.route,
padding=0,
horizontal_alignment="center",
vertical_alignment="top",
controls=[ft.Column([ft.FilledButton(text="BACK", on_click=self.back_on_click)], )],
# theme=ft.Theme(color_scheme_seed = ft.colors.GREEN),
# theme_mode="light",
)
return view
def main(page: ft.Page):
def route_change(route):
page.views.clear()
page.views.append(welcome_view)
if page.route == "/login_view":
page.views.append(login_view)
page.update()
def view_pop(view):
if page.route == "/login_view":
page.go("/")
page.theme = ft.Theme(color_scheme_seed = ft.colors.GREEN) #BLUE_200
page.theme_mode = "light"
page.window_height = 700
page.window_width = 400
page.window_resizable = False
page.window_maximizable = False
page.title = "Mobile App UI Example"
welcome_view = WelcomeView(window_height=page.window_width,
window_width=page.window_height,
route="/",
login_on_click=lambda _: page.go("/login_view"),
)
login_view = LoginView(window_height=page.window_width,
window_width=page.window_height,
route="/login_view",
on_click=lambda _: page.go("/")
)
page.on_route_change = route_change
page.on_view_pop = view_pop
page.go(page.route)
ft.app(target=main, assets_dir="assets")
Could someone give some hints about performing routing with views defined outside the main function? Thank you
Share Improve this question asked Jan 17 at 16:12 eljambaeljamba 3972 gold badges3 silver badges16 bronze badges1 Answer
Reset to default 0Right now you are trying to change to the object itself, you need to append an instance of the object in your views list.
if page.route == "/login_view":
page.views.append(login_view())
I believe just adding the parentheses to instantiate an instance of the object should fix your issue.