I am working on a Flet
app and have built a custom control with some animations. The problem I am encountering is that when I first run the app, the control's color initially appears as a deep blue before changing to the color it is supposed to be. I suspect this color transition, from blue to the intended color, is due to the animation I applied to the container. However, I don't understand why it starts as blue in the first place.
I tried using different themes for the app and I believe that the initial blue color is the primary color from the default dark theme that comes with Flet
.
import flet
class TableroEmpresa(flet.Container):
def __init__(self):
self._row_iconos = flet.Row(
controls=[
self.icono_tablero(
icon=flet.Icons.BLOCK,
tooltip="Dar de baja",
),
self.icono_tablero(
icon=flet.Icons.DONE_OUTLINE_ROUNDED,
tooltip="Dar de alta",
),
self.icono_tablero(
icon=flet.Icons.EDIT_SQUARE,
tooltip="Editar",
),
],
alignment=flet.MainAxisAlignment.CENTER
)
self._container_animado = flet.Container(
width=280,
height=380,
bgcolor=flet.Colors.PRIMARY_CONTAINER,
border_radius=12,
animate=flet.animation.Animation(duration=600, curve=flet.AnimationCurve.EASE),
border=flet.border.all(2, flet.Colors.PRIMARY_CONTAINER),
content=flet.Column(
offset=flet.Offset(0,0),
animate_offset=flet.animation.Animation(300, flet.AnimationCurve.EASE),
alignment=flet.MainAxisAlignment.CENTER,
horizontal_alignment=flet.CrossAxisAlignment.CENTER,
spacing=0,
controls=[
flet.Container(
padding=20,
alignment=flet.alignment.bottom_center,
content=flet.Text(
value="Nombre empresa",
text_align=flet.TextAlign.CENTER,
color=flet.Colors.ON_PRIMARY_CONTAINER,
size=26,
weight=flet.FontWeight.W_800,
)
),
flet.Container(
margin=flet.Margin(top=0, left=20, right=20, bottom=20),
width=80,
border_radius=3,
alignment=flet.alignment.bottom_center,
bgcolor=flet.Colors.SECONDARY,
content=flet.Text(
value="Activa",
color=flet.Colors.ON_SECONDARY,
size=14,
weight=flet.FontWeight.W_800,
)
),
flet.Text(
value=f"Total empleados: {17}\n"
f"Empleados activos: {13}",
text_align=flet.TextAlign.CENTER,
weight=flet.FontWeight.W_500,
color=flet.Colors.ON_PRIMARY_CONTAINER
)
]
)
)
self._card = flet.Card(
elevation=0,
content=self._container_animado
)
super().__init__(
on_hover=self.animar_card,
content=flet.Stack(
width=320,
height=440,
alignment=flet.alignment.top_center,
controls=[
self._card,
flet.Container(
bottom=40,
content=self._row_iconos
)
]
)
)
def icono_tablero(self, icon, tooltip, on_click=None):
return flet.IconButton(
visible=False,
animate_opacity=200,
offset=flet.transform.Offset(0, 0.75),
animate_offset=flet.animation.Animation(duration=200, curve=flet.AnimationCurve.EASE),
bgcolor=flet.Colors.PRIMARY,
icon=icon,
icon_color=flet.Colors.ON_PRIMARY,
icon_size=30,
on_click=on_click,
tooltip=tooltip,
)
def animar_card(self, e):
for icono in self._row_iconos.controls:
icono.visible = True
self._row_iconos.update()
if e.data == "true":
# Animación de elevación de la card
for _ in range(20):
self._card.elevation += 1
self._card.update()
# Animación del borde de la card
self._container_animado.border = flet.border.all(4)
self._container_animado.content.offset = flet.transform.Offset(0, -0.02)
self._container_animado.update()
# Animación de la posición del botón
for icono in self._row_iconos.controls:
icono.offset = flet.transform.Offset(0, 0)
icono.opacity = 1
icono.update()
else:
# Animación de elevación de la card
for _ in range(20):
self._card.elevation -= 1
self._card.update()
# Animación del borde de la card
self._container_animado.border = None
self._container_animado.content.offset = flet.transform.Offset(0, 0)
self._container_animado.update()
# Animación de la posición del botón
for icono in self._row_iconos.controls:
icono.offset = flet.transform.Offset(0, 0.75)
icono.opacity = 0
icono.update()
def main(page: flet.Page):
def change_theme(e):
if page.theme_mode == "light":
page.theme_mode = "dark"
page.controls[1].icon = flet.Icons.LIGHT_MODE
else:
page.theme_mode = "light"
page.controls[1].icon = flet.Icons.DARK_MODE
page.update()
page.theme = flet.Theme(color_scheme_seed=flet.Colors.DEEP_PURPLE)
page.add(
TableroEmpresa(),
flet.IconButton(
icon=flet.Icons.LIGHT_MODE,
on_click=change_theme
)
)
flet.app(main)