Why Does My Custom Control Start with a Deep Blue Color in My Flet App?

[Ricman1029]

Question

I built a custom control for displaying information. The control works fine, but for some reason, when I first launch the app, its color starts as a deep blue and then changes to the color its supposed to be (I suppose the change of the color is visible because of the animation I am adding to the container, but I don't know why the container's color is blue in the first place).

The starting color is the same regardless of the page's theme. I set it to green just because it is easier to notice the change from the blue to the green, but the issue persists even if you set the theme color to any other color.

In the following GIF you can see how the control goes from blue to green when I first launch the app.

Code sample

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.GREEN)
    page.theme_mode = "light"
    page.add(
        TableroEmpresa(),
        flet.IconButton(
            icon=flet.Icons.LIGHT_MODE,
            on_click=change_theme
        )
    )


flet.app(main)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[jjjunehkim]

When I ran your code, I got an error because the capital letters of flet.Colors and flet.Icons were capitalized. This is a screen capture file that I ran with the code changed to lowercase letters of flet.colors and flet.icons.

I see the color of the capture file below as green.

[Ricman1029]

I use Colors and Icons capitalized because otherwise I get a DeprecationWarning that says colors and icons enum will be removed in version 0.28.0, and that I should use Colors and Icons instead.
Hoewever, I did change everything to lower case in my code but I keep getting the same result. I made a GIF so it is easier to see what happens when I launch the app.

[ndonkoHenri]

Issue's origin

What happens is a switch from Flet's default theme color_scheme_seed (whose Colors.PRIMARY_CONTAINER is that blue-ish color we see at the start) to the color_scheme_seed=green defined in your code (whose Colors.PRIMARY_CONTAINER is the green-ish color).
This change is slowed down by your container's animation config (can be verified by setting the animation duration below to a bigger value):

self._container_animado = flet.Container(
  animate=flet.animation.Animation(duration=600, curve=flet.AnimationCurve.EASE),
  bgcolor=flet.Colors.PRIMARY_CONTAINER,
  ....
)

Solution

To make it more fast and spontaneous, I will suggest the following:

• set duration=0 when creating the container

self._container_animado = flet.Container(
  animate=flet.animation.Animation(duration=0, curve=flet.AnimationCurve.EASE),
  bgcolor=flet.Colors.PRIMARY_CONTAINER,
  ....
)

• set it to it's right value when we are sure the control has already been created and mounted in the page. For example, you could do the following in the first lines animar_card:

def animar_card(self, e):
    if self._container_animado.animate.duration == 0:
        self._container_animado.animate.duration = 600
    ....
    ....

[Ricman1029]

Thank you for your solution. It's definitely an upgrade from the original situation, but I don't think it fully fixes the problem I had. Even though the transition from the blue-ish color to the one defined in the code is much faster, it is still noticeable, and if the mouse is positioned over the card when the app is launching, the same issue as before occurs.

After some testing, I found a different solution that does fix the problem I was experiencing, but it introduces a new one. As you mentioned, the issue is that the animation is slowing down the transition from Flet's default color_scheme_seed to the color_scheme_seed=green defined in my code. However, if I use named colors or hex values instead of a color from the scheme, the problem disappears without having to change the duration of the animations. The new issue is that it becomes more challenging to use the dark and light mode feature since the color of the control is static and will not change based on the app's theme.

[ndonkoHenri]

I see.
The app basically needs just some few milliseconds at the start to be properly initialised. After that, you can replace the static colors by your dynamic ones.