Question
Why does the same code display differently after being adapted to version 0.84.0
flet v0.27.6
import flet as ft
# flet v0.27.6
class Gallery:
def __init__(self):
self.control_groups = [
ControlGroup(icon=ft.Icons.HOME, label="Home", index=0, name="home", selected_icon=ft.Icons.HOME),
ControlGroup(icon=ft.Icons.SETTINGS, label="Settings", index=1, name="settings", selected_icon=ft.Icons.SETTINGS),
# ...
]
self.selected_control_group = self.control_groups[0]
class ControlGroup:
def __init__(self, icon, label, index, name, selected_icon):
self.icon = icon
self.label = label
self.index = index
self.name = name
self.selected_icon = selected_icon
class PopupColorItem(ft.PopupMenuItem):
def __init__(self, color, name):
super().__init__()
self.content = ft.Row(
controls=[
ft.Icon(name=ft.Icons.COLOR_LENS_OUTLINED, color=color),
ft.Text(name),
],
)
self.on_click = lambda e: self.seed_color_changed(e)
self.data = color
def seed_color_changed(self, e):
page = e.page
page.theme = ft.Theme(color_scheme_seed=self.data)
page.update()
class NavigationItem(ft.Container):
def __init__(self, destination):
super().__init__()
self.ink = True
self.padding = 10
self.border_radius = 5
self.destination = destination
self.icon = destination.icon
self.text = destination.label
self.content = ft.Row([ft.Icon(self.icon), ft.Text(self.text)])
class NavigationColumn(ft.Column):
def __init__(self, gallery):
super().__init__()
self.expand = 4
self.spacing = 0
self.scroll = ft.ScrollMode.ALWAYS
self.width = 200
self.gallery = gallery
self.selected_index = 0
self.controls = self.get_navigation_items()
def get_navigation_items(self):
return [
NavigationItem(destination)
for destination in self.gallery.control_groups
]
class LeftNavigationMenu(ft.Column):
def __init__(self, gallery):
super().__init__()
self.gallery = gallery
self.rail = NavigationColumn(gallery=gallery)
self.dark_light_text = ft.Text("Light theme")
self.dark_light_icon = ft.IconButton(
icon=ft.Icons.BRIGHTNESS_2_OUTLINED,
tooltip="Toggle brightness",
on_click=self.theme_changed,
)
self.controls = [
self.rail,
ft.Column(
expand=1,
controls=[
ft.Row(
controls=[
self.dark_light_icon,
self.dark_light_text,
]
),
ft.Row(
controls=[
ft.PopupMenuButton(
icon=ft.Icons.COLOR_LENS_OUTLINED,
items=[
PopupColorItem(color="deeppurple", name="Deep purple"),
PopupColorItem(color="blue", name="Blue"),
PopupColorItem(color="green", name="Green"),
PopupColorItem(color="deeporange", name="Deep orange"),
],
),
ft.Text("Seed color"),
]
),
],
),
]
def theme_changed(self, e):
page = e.page
if page.theme_mode == ft.ThemeMode.LIGHT:
page.theme_mode = ft.ThemeMode.DARK
self.dark_light_text.value = "Dark theme"
self.dark_light_icon.icon = ft.Icons.BRIGHTNESS_HIGH_OUTLINED
else:
page.theme_mode = ft.ThemeMode.LIGHT
self.dark_light_text.value = "Light theme"
self.dark_light_icon.icon = ft.Icons.BRIGHTNESS_2_OUTLINED
page.update()
def main(page: ft.Page):
page.title = "Flet Navigation Example"
page.theme_mode = ft.ThemeMode.LIGHT
gallery = Gallery()
left_navigation_menu = LeftNavigationMenu(gallery=gallery)
page.add(left_navigation_menu)
page.update()
if __name__ == "__main__":
ft.app(target=main)
flet v0.84.0
import flet as ft
# flet v0.84.0
class Gallery:
def __init__(self):
self.control_groups = [
ControlGroup(icon=ft.Icons.HOME, label="Home", index=0, name="home", selected_icon=ft.Icons.HOME),
ControlGroup(icon=ft.Icons.SETTINGS, label="Settings", index=1, name="settings", selected_icon=ft.Icons.SETTINGS),
# ...
]
self.selected_control_group = self.control_groups[0]
class ControlGroup:
def __init__(self, icon, label, index, name, selected_icon):
self.icon = icon
self.label = label
self.index = index
self.name = name
self.selected_icon = selected_icon
class PopupColorItem(ft.PopupMenuItem):
def __init__(self, color, name):
super().__init__()
self.content = ft.Row(
controls=[
ft.Icon(icon=ft.Icons.COLOR_LENS_OUTLINED, color=color),
ft.Text(name),
],
)
self.on_click = lambda e: self.seed_color_changed(e)
self.data = color
def seed_color_changed(self, e):
page = e.page
page.theme = ft.Theme(color_scheme_seed=self.data)
page.update()
class NavigationItem(ft.Container):
def __init__(self, destination):
super().__init__()
self.ink = True
self.padding = 10
self.border_radius = 5
self.destination = destination
self.icon = destination.icon
self.text = destination.label
self.content = ft.Row([ft.Icon(self.icon), ft.Text(self.text)])
class NavigationColumn(ft.Column):
def __init__(self, gallery):
super().__init__()
self.expand = 4
self.spacing = 0
self.scroll = ft.ScrollMode.ALWAYS
self.width = 200
self.gallery = gallery
self.selected_index = 0
self.controls = self.get_navigation_items()
def get_navigation_items(self):
return [
NavigationItem(destination)
for destination in self.gallery.control_groups
]
class LeftNavigationMenu(ft.Column):
def __init__(self, gallery):
super().__init__()
self.gallery = gallery
self.rail = NavigationColumn(gallery=gallery)
self.dark_light_text = ft.Text("Light theme")
self.dark_light_icon = ft.IconButton(
icon=ft.Icons.BRIGHTNESS_2_OUTLINED,
tooltip="Toggle brightness",
on_click=self.theme_changed,
)
self.controls = [
self.rail,
ft.Column(
expand=1,
controls=[
ft.Row(
controls=[
self.dark_light_icon,
self.dark_light_text,
]
),
ft.Row(
controls=[
ft.PopupMenuButton(
icon=ft.Icons.COLOR_LENS_OUTLINED,
items=[
PopupColorItem(color="deeppurple", name="Deep purple"),
PopupColorItem(color="blue", name="Blue"),
PopupColorItem(color="green", name="Green"),
PopupColorItem(color="deeporange", name="Deep orange"),
],
),
ft.Text("Seed color"),
]
),
],
),
]
def theme_changed(self, e):
page = e.page
if page.theme_mode == ft.ThemeMode.LIGHT:
page.theme_mode = ft.ThemeMode.DARK
self.dark_light_text.value = "Dark theme"
self.dark_light_icon.icon = ft.Icons.BRIGHTNESS_HIGH_OUTLINED
else:
page.theme_mode = ft.ThemeMode.LIGHT
self.dark_light_text.value = "Light theme"
self.dark_light_icon.icon = ft.Icons.BRIGHTNESS_2_OUTLINED
page.update()
def main(page: ft.Page):
page.title = "Flet Navigation Example"
page.theme_mode = ft.ThemeMode.LIGHT
gallery = Gallery()
left_navigation_menu = LeftNavigationMenu(gallery=gallery)
page.add(left_navigation_menu)
page.update()
if __name__ == "__main__":
ft.run(main=main)
In flet v0.27.6, when switching theme colors, the color of the menu button will change accordingly. However, in the new version of flet v0.84.0, the color of the left menu button does not change after switching theme colors.
Has there been any change in theme color display in versions greater than 0.27.6?
Question
Why does the same code display differently after being adapted to version 0.84.0
flet v0.27.6
flet v0.84.0
In flet v0.27.6, when switching theme colors, the color of the menu button will change accordingly. However, in the new version of flet v0.84.0, the color of the left menu button does not change after switching theme colors.
Has there been any change in theme color display in versions greater than 0.27.6?