how do we change views in flet ? I get an error -> signal only works in main thread of the main interpreter
Question:
Here is the code for the same. I have two functions, one is main and other i named as main2.
How do we change the view from main to main2?
import flet
from flet import Checkbox, ElevatedButton, Row,Text, TextField,sleep,Column
from flet import (
AppBar,
Icon,
IconButton,
Page,
PopupMenuButton,
PopupMenuItem,
Text,
colors,
icons,
)
def main(page):
def add_clicked(e):
page.add(Checkbox(label=new_task.value))
new_task = TextField(hint_text="Whats needs to be done?", width=300)
page.add(Row([new_task, ElevatedButton("Add", on_click=add_clicked)]))
t = Text(
value="This is a Text control sample",
size=30,
color="white",
bgcolor="pink",
weight="bold",
italic=True,)
page.add(t)
btn = ElevatedButton("Click me!")
page.add(btn)
page.scroll='always'
page.update()
first_name = TextField()
last_name = TextField()
page.add(first_name, last_name)
sleep(2)
first_name.disabled = True
last_name.disabled = True
page.update()
first_name = TextField()
last_name = TextField()
c = Column(controls=[
first_name,
last_name
])
c.disabled = True
page.add(c)
flet.app(target=main2)
def main2(page: Page):
def check_item_clicked(e):
e.control.checked = not e.control.checked
page.update()
page.appbar = AppBar(
leading=Icon(icons.PALETTE),
leading_width=40,
title=Text("AppBar Example"),
center_title=False,
bgcolor=colors.SURFACE_VARIANT,
actions=[
IconButton(icons.WB_SUNNY_OUTLINED),
IconButton(icons.FILTER_3),
PopupMenuButton(
items=[
PopupMenuItem(text="Item 1"),
PopupMenuItem(), # divider
PopupMenuItem(
text="Checked item", checked=False, on_click=check_item_clicked
),
]
),
],
)
page.add(Text("Body!"))
#flet.app(target=main, view=flet.WEB_BROWSER)
flet.app(target=main)
"""
import flet
from flet import IconButton, Page, Row, TextField, icons
def main(page: Page):
page.title = "Flet counter example"
page.vertical_alignment = "center"
txt_number = TextField(value="0", text_align="right", width=100)
def minus_click(e):
txt_number.value = int(txt_number.value) - 1
page.update()
def plus_click(e):
txt_number.value = int(txt_number.value) + 1
page.update()
page.add(
Row(
[
IconButton(icons.REMOVE, on_click=minus_click),
txt_number,
IconButton(icons.ADD, on_click=plus_click),
],
alignment="center",
)
)
flet.app(target=main)
"""
"""
# Navigation Bar
import flet
from flet import (
Column,
FloatingActionButton,
Icon,
NavigationRail,
NavigationRailDestination,
Page,
Row,
Text,
VerticalDivider,
icons,
)
def main(page: Page):
rail = NavigationRail(
selected_index=0,
label_type="all",
# extended=True,
min_width=100,
min_extended_width=400,
leading=FloatingActionButton(icon=icons.CREATE, text="Add"),
group_alignment=-0.9,
destinations=[
NavigationRailDestination(
icon=icons.FAVORITE_BORDER, selected_icon=icons.FAVORITE, label="First"
),
NavigationRailDestination(
icon_content=Icon(icons.BOOKMARK_BORDER),
selected_icon_content=Icon(icons.BOOKMARK),
label="Second",
),
NavigationRailDestination(
icon=icons.SETTINGS_OUTLINED,
selected_icon_content=Icon(icons.SETTINGS),
label_content=Text("Settings"),
),
],
on_change=lambda e: print("Selected destination:", e.control.selected_index),
)
page.add(
Row(
[
rail,
VerticalDivider(width=1),
Column([Text("Body!")], alignment="start", expand=True),
],
expand=True,
)
)
flet.app(target=main)
"""
"""
# Appbar
import flet
from flet import (
AppBar,
Icon,
IconButton,
Page,
PopupMenuButton,
PopupMenuItem,
Text,
colors,
icons,
)
def main(page: Page):
def check_item_clicked(e):
e.control.checked = not e.control.checked
page.update()
page.appbar = AppBar(
leading=Icon(icons.PALETTE),
leading_width=40,
title=Text("AppBar Example"),
center_title=False,
bgcolor=colors.SURFACE_VARIANT,
actions=[
IconButton(icons.WB_SUNNY_OUTLINED),
IconButton(icons.FILTER_3),
PopupMenuButton(
items=[
PopupMenuItem(text="Item 1"),
PopupMenuItem(), # divider
PopupMenuItem(
text="Checked item", checked=False, on_click=check_item_clicked
),
]
),
],
)
page.add(Text("Body!"))
flet.app(target=main)
"""
Answers:
Flet didn’t have the routes feature when I posted this, the developer of flet says, it’s going to roll out in a week.
enter image description here
Please check the Navigation and routing docs of flet.
There is already routing in python flet, example your modified app:
import flet
from flet import Checkbox, ElevatedButton, Row,Text, TextField, Column
from flet import (
AppBar,
Icon,
IconButton,
Page,
PopupMenuButton,
PopupMenuItem,Text,
colors,
icons,
View
)
def main(page: Page):
page.scroll='always'
def change_route(route):
new_task = TextField(hint_text="Whats needs to be done?", width=300)
first_name = TextField(disabled=True)
last_name = TextField(disabled=True)
first_name.disabled = True
last_name.disabled = True
c = Column(
controls=[
first_name,
last_name,
],
disabled=True,
)
t = Text(
value="This is a Text control sample",
size=30,
color="white",
bgcolor="pink",
weight="bold",
italic=True,)
def add_clicked(e):
page.add(Checkbox(label=new_task.value))
def check_item_clicked(e):
e.control.checked = not e.control.checked
page.update()
page.views.clear() # CLEAR THE VIEWS
page.views.append( # BUILD THE VIEW 1
View(
route='/',
controls=[
AppBar(
title=Text(f"Main route ({page.route})"),
bgcolor=colors.SURFACE_VARIANT
),
ElevatedButton("Go to another view", on_click=lambda _: page.go("/another_view")),
t,
c,
Row([new_task, ElevatedButton("Add", on_click=add_clicked)])
]
)
)
if page.route == "/another_view":
page.views.append( # BUILD THE VIEW 2
View(
route='/another_view',
controls=[
AppBar(
title=Text(f"Other view ({page.route})"),
leading=Icon(icons.PALETTE),
leading_width=40,
center_title=False,
bgcolor=colors.SURFACE_VARIANT,
actions=[
IconButton(icons.WB_SUNNY_OUTLINED),
IconButton(icons.FILTER_3),
PopupMenuButton(
items=[
PopupMenuItem(text="Item 1"),
PopupMenuItem(), # divider
PopupMenuItem(
text="Checked item", checked=False, on_click=check_item_clicked
),
]
),
]
),
ElevatedButton("Go to main view", on_click=lambda _: page.go("/")),
Text("Body!")
]
)
)
page.update()
page.on_route_change = change_route
page.go(page.route)
flet.app(target=main)
Here is the code for the same. I have two functions, one is main and other i named as main2.
How do we change the view from main to main2?
import flet
from flet import Checkbox, ElevatedButton, Row,Text, TextField,sleep,Column
from flet import (
AppBar,
Icon,
IconButton,
Page,
PopupMenuButton,
PopupMenuItem,
Text,
colors,
icons,
)
def main(page):
def add_clicked(e):
page.add(Checkbox(label=new_task.value))
new_task = TextField(hint_text="Whats needs to be done?", width=300)
page.add(Row([new_task, ElevatedButton("Add", on_click=add_clicked)]))
t = Text(
value="This is a Text control sample",
size=30,
color="white",
bgcolor="pink",
weight="bold",
italic=True,)
page.add(t)
btn = ElevatedButton("Click me!")
page.add(btn)
page.scroll='always'
page.update()
first_name = TextField()
last_name = TextField()
page.add(first_name, last_name)
sleep(2)
first_name.disabled = True
last_name.disabled = True
page.update()
first_name = TextField()
last_name = TextField()
c = Column(controls=[
first_name,
last_name
])
c.disabled = True
page.add(c)
flet.app(target=main2)
def main2(page: Page):
def check_item_clicked(e):
e.control.checked = not e.control.checked
page.update()
page.appbar = AppBar(
leading=Icon(icons.PALETTE),
leading_width=40,
title=Text("AppBar Example"),
center_title=False,
bgcolor=colors.SURFACE_VARIANT,
actions=[
IconButton(icons.WB_SUNNY_OUTLINED),
IconButton(icons.FILTER_3),
PopupMenuButton(
items=[
PopupMenuItem(text="Item 1"),
PopupMenuItem(), # divider
PopupMenuItem(
text="Checked item", checked=False, on_click=check_item_clicked
),
]
),
],
)
page.add(Text("Body!"))
#flet.app(target=main, view=flet.WEB_BROWSER)
flet.app(target=main)
"""
import flet
from flet import IconButton, Page, Row, TextField, icons
def main(page: Page):
page.title = "Flet counter example"
page.vertical_alignment = "center"
txt_number = TextField(value="0", text_align="right", width=100)
def minus_click(e):
txt_number.value = int(txt_number.value) - 1
page.update()
def plus_click(e):
txt_number.value = int(txt_number.value) + 1
page.update()
page.add(
Row(
[
IconButton(icons.REMOVE, on_click=minus_click),
txt_number,
IconButton(icons.ADD, on_click=plus_click),
],
alignment="center",
)
)
flet.app(target=main)
"""
"""
# Navigation Bar
import flet
from flet import (
Column,
FloatingActionButton,
Icon,
NavigationRail,
NavigationRailDestination,
Page,
Row,
Text,
VerticalDivider,
icons,
)
def main(page: Page):
rail = NavigationRail(
selected_index=0,
label_type="all",
# extended=True,
min_width=100,
min_extended_width=400,
leading=FloatingActionButton(icon=icons.CREATE, text="Add"),
group_alignment=-0.9,
destinations=[
NavigationRailDestination(
icon=icons.FAVORITE_BORDER, selected_icon=icons.FAVORITE, label="First"
),
NavigationRailDestination(
icon_content=Icon(icons.BOOKMARK_BORDER),
selected_icon_content=Icon(icons.BOOKMARK),
label="Second",
),
NavigationRailDestination(
icon=icons.SETTINGS_OUTLINED,
selected_icon_content=Icon(icons.SETTINGS),
label_content=Text("Settings"),
),
],
on_change=lambda e: print("Selected destination:", e.control.selected_index),
)
page.add(
Row(
[
rail,
VerticalDivider(width=1),
Column([Text("Body!")], alignment="start", expand=True),
],
expand=True,
)
)
flet.app(target=main)
"""
"""
# Appbar
import flet
from flet import (
AppBar,
Icon,
IconButton,
Page,
PopupMenuButton,
PopupMenuItem,
Text,
colors,
icons,
)
def main(page: Page):
def check_item_clicked(e):
e.control.checked = not e.control.checked
page.update()
page.appbar = AppBar(
leading=Icon(icons.PALETTE),
leading_width=40,
title=Text("AppBar Example"),
center_title=False,
bgcolor=colors.SURFACE_VARIANT,
actions=[
IconButton(icons.WB_SUNNY_OUTLINED),
IconButton(icons.FILTER_3),
PopupMenuButton(
items=[
PopupMenuItem(text="Item 1"),
PopupMenuItem(), # divider
PopupMenuItem(
text="Checked item", checked=False, on_click=check_item_clicked
),
]
),
],
)
page.add(Text("Body!"))
flet.app(target=main)
"""
Flet didn’t have the routes feature when I posted this, the developer of flet says, it’s going to roll out in a week.
enter image description here
Please check the Navigation and routing docs of flet.
There is already routing in python flet, example your modified app:
import flet
from flet import Checkbox, ElevatedButton, Row,Text, TextField, Column
from flet import (
AppBar,
Icon,
IconButton,
Page,
PopupMenuButton,
PopupMenuItem,Text,
colors,
icons,
View
)
def main(page: Page):
page.scroll='always'
def change_route(route):
new_task = TextField(hint_text="Whats needs to be done?", width=300)
first_name = TextField(disabled=True)
last_name = TextField(disabled=True)
first_name.disabled = True
last_name.disabled = True
c = Column(
controls=[
first_name,
last_name,
],
disabled=True,
)
t = Text(
value="This is a Text control sample",
size=30,
color="white",
bgcolor="pink",
weight="bold",
italic=True,)
def add_clicked(e):
page.add(Checkbox(label=new_task.value))
def check_item_clicked(e):
e.control.checked = not e.control.checked
page.update()
page.views.clear() # CLEAR THE VIEWS
page.views.append( # BUILD THE VIEW 1
View(
route='/',
controls=[
AppBar(
title=Text(f"Main route ({page.route})"),
bgcolor=colors.SURFACE_VARIANT
),
ElevatedButton("Go to another view", on_click=lambda _: page.go("/another_view")),
t,
c,
Row([new_task, ElevatedButton("Add", on_click=add_clicked)])
]
)
)
if page.route == "/another_view":
page.views.append( # BUILD THE VIEW 2
View(
route='/another_view',
controls=[
AppBar(
title=Text(f"Other view ({page.route})"),
leading=Icon(icons.PALETTE),
leading_width=40,
center_title=False,
bgcolor=colors.SURFACE_VARIANT,
actions=[
IconButton(icons.WB_SUNNY_OUTLINED),
IconButton(icons.FILTER_3),
PopupMenuButton(
items=[
PopupMenuItem(text="Item 1"),
PopupMenuItem(), # divider
PopupMenuItem(
text="Checked item", checked=False, on_click=check_item_clicked
),
]
),
]
),
ElevatedButton("Go to main view", on_click=lambda _: page.go("/")),
Text("Body!")
]
)
)
page.update()
page.on_route_change = change_route
page.go(page.route)
flet.app(target=main)