Glitch Appears During Container Collapse Animation in Flet

[Klu1d]

Question

I’m not sure if this issue is caused by my code or if it’s a problem with Flet’s animation itself.

When I press the Click button, the bottom gray container collapses upward. However, during this animation, a small visual glitch appears at the junction of the two containers.

This becomes a problem in my actual project because there is text at the glitchy area, and it behaves unexpectedly during the animation.

Has anyone encountered this issue before? Any suggestions on how to fix it?

video example:

2025-02-09.16-50-00.mp4

bug animation moment

Code sample

import flet as ft

def main(page: ft.Page):

    anim = ft.animation.Animation(400, 'decelerate')
    alert = ft.Container(
        bgcolor=ft.Colors.BLUE,
        height=500,
        width=500,
        animate=anim,
        animate_size=anim,
    )

    panel = ft.Container(
        bgcolor='green',
        height=75, padding=0, margin=0,
        animate=anim,
        animate_size=anim,
    )

    sub_panel = ft.Container(
        bgcolor='grey',
        height=500,
        padding=0, margin=0,
        animate=anim,
        animate_size=anim,
        animate_opacity=anim,
    )

    total_panel = ft.Column(
        spacing=0, run_spacing=0, expand=True,
        controls=[panel, sub_panel],
    )

    def toggle(e):
        sub_panel.height = 500 if sub_panel.height == 0 else 0
        sub_panel.update()

    c1 = ft.Container(
        border=ft.border.all(10, color=ft.Colors.random()),
        content=alert,
    )

    page.add(
        total_panel, ft.TextButton('Click', on_click=toggle)
    )

ft.app(main)

Error message

Nope

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

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

[Klu1d]

I also noticed that when I run the code I uploaded, it creates this in the project structure. I don't understand what this is

[Klu1d]

flet version 0.26.0

[ndonkoHenri]

https://flet.dev/blog/flet-v-0-25-release-announcement#data-and-temp-directories-for-the-app

[ndonkoHenri]

It occurs as a result of you having both animate and animate_size defined in your sub_panel container. They then both play a role in your container animation, but differently, causing the glitch.

Try commenting them out one after the other to see which behavior you want to see in your app.