bug: [v1] Size animation not working

[oussama-gourari]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

Specifying the animate_size on a container seems to have no effect.

Code sample

Code

import flet as ft


class AnimatedHeightContainer(ft.Container):

    def __init__(self) -> None:
        super().__init__(
            content=ft.Container(bgcolor=ft.Colors.GREEN, height=200, width=200),
            animate_size=ft.Animation(duration=ft.Duration(milliseconds=2000)),
        )

    def reveal(self) -> None:
        self.height = None
        self.update()

    def hide(self) -> None:
        self.height = 0
        self.update()


def main(page):
    c = AnimatedHeightContainer()
    page.add(
        c,
        ft.Button("Hide", on_click=c.hide),
        ft.Button("Reveal", on_click=c.reveal),
    )


ft.run(main=main)

To reproduce

Run the code above, the container can be hidden and revealed using the buttons, but with no animation.

Expected behavior

No response

Screenshots / Videos

Operating System

Linux

Operating system details

Linux 6.12.48-1-MANJARO - GNOME 48.5

Flet version

0.70.0.dev6491

Regression

I'm not sure / I don't know

Suggestions

No response

Logs

Additional details

No response

[FeodorFitsner]

A working example:

import flet as ft


class AnimatedHeightContainer(ft.Container):
    def __init__(self) -> None:
        super().__init__(
            bgcolor=ft.Colors.GREEN,
            height=200,
            width=200,
            animate=ft.Animation(duration=ft.Duration(milliseconds=1000)),
        )

    def reveal(self) -> None:
        self.height = 200

    def hide(self) -> None:
        self.height = 0


def main(page):
    c = AnimatedHeightContainer()
    page.add(
        c,
        ft.Button("Hide", on_click=c.hide),
        ft.Button("Reveal", on_click=c.reveal),
    )


ft.run(main=main)

[oussama-gourari]

@FeodorFitsner But when the dimensions of the container are unknown in case of a complex content, I have to reset the size by setting it to None, in that case it won't work.

[FeodorFitsner]

OK, the closest I got that works with any content is this:

import flet as ft


class AnimatedHeightContainer(ft.Row):
    def __init__(self) -> None:
        super().__init__(
            animate_size=ft.Animation(duration=ft.Duration(milliseconds=500)),
        )
        self.content = ft.Container(bgcolor=ft.Colors.GREEN, width=200, height=200)
        self.controls = [self.content]

    def reveal(self) -> None:
        self.controls = [self.content]

    def hide(self) -> None:
        self.controls = []


def main(page):
    c = AnimatedHeightContainer()
    page.add(
        c,
        ft.Button("Hide", on_click=c.hide),
        ft.Button("Reveal", on_click=c.reveal),
    )


ft.run(main=main)

But it doesn't look nice when hiding. Investigating it further...

[FeodorFitsner]

After some investigation I think we have at least two options to make smooth "expandable" control:

1. Smoother - with AnimatedSize and Align (height_factor/width_factor need to be added): https://dartpad.dev/?id=d48f62cb82844bad38f72d8841062540
2. Smoothest - with SizeTransition (new control): https://dartpad.dev/?id=a134b5d538b2cfc3c2e61ad4518c4ad6