[Python] How to display two different views into main page

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

Continue reading...