Feature Request: Built-in Animation Widget for Automatic Animations on Load

[Muddassir-Farooq-official]

Duplicate Check

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

Describe the requested feature

Currently, animations in Flet require manual triggering via a button click or calling a method explicitly. This makes automatic animations on screen load somewhat complex. I propose a new widget that automatically applies an animation to its child when it appears on the screen.

Suggest a solution

Introduce a widget like:

ft.FadeAnimation(
    content=ft.Text("Hello, Flet!")
)

or a more generic:

ft.AnimatedWidget(
    animation=ft.AnimationType.FADE_IN,
    duration=500,
    child=ft.Text("Hello, Flet!")
)

This would allow animations to be applied automatically when a screen loads without needing extra logic.

Screenshots

No response

Additional details

Benefits

Simplifies automatic animations.

Reduces boilerplate code.

Makes animations more accessible to beginners.

[ndonkoHenri]

Animation is to be done manually. If you need it to happen immediately when the app gets shown, the add your control to the page and execute the animation.

import time
import flet as ft


def main(page: ft.Page):
    c = ft.Container(
        width=150,
        height=150,
        bgcolor="blue",
        border_radius=10,
        animate_opacity=300,
    )

    def animate_opacity():
        c.opacity = 0 if c.opacity == 1 else 1
        c.update()

    page.add(c)
    
    time.sleep(0.4) # some little sleep inorder to see the effect
    animate_opacity()


ft.app(main)

If you have a Flutter example showcasing the idea you have, feel free to share.

[Muddassir-Farooq-official]

its fine but its complex to create animate method and assign each object an attribute like scale,opacity etc... by using widget we can reduce complexity and code also

[Muddassir-Farooq-official]

i cant implement it but you can i try an example with the help of Groak Ai

#main.py

import flet as ft
from test import AnimatedWidget, AnimationType, create_animated_widget
import asyncio

async def main(page: ft.Page):
    page.title = "Animated Widget Demo"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.theme_mode = "light"

    # Login container
    login = ft.Container(
        content=ft.Column(
            [
                ft.TextField(),
                ft.TextField(),
                ft.OutlinedButton("Login")
            ]
        ),
        padding=30,
        width=400,
        gradient=ft.LinearGradient(colors=["blue", "white"]),
    )

    # Animated text (login form)
    animated_text = create_animated_widget(
        animation=AnimationType.SLIDE_IN_RIGHT,
        duration=1500,
        child=login,
        curve=ft.AnimationCurve.BOUNCE_OUT,
        delay=0
    )

    # Animated button
    animated_button = create_animated_widget(
        animation=AnimationType.SLIDE_IN_RIGHT,
        duration=700,
        curve=ft.AnimationCurve.BOUNCE_OUT,
        child=ft.ElevatedButton("Click Me!")
    )

    # Animated search dropdown
    search = create_animated_widget(
        animation=AnimationType.SLIDE_IN_RIGHT,
        duration=700,
        curve=ft.AnimationCurve.BOUNCE_OUT,
        child=ft.Dropdown(
            label="Search",  # Fixed label_content to label
            editable=True,
            # enable_filter=True,  # Not a valid Flet Dropdown property
            # enable_search=True,  # Not a valid Flet Dropdown property
            options=[
                ft.dropdown.Option("How To Make Money Online"),
                ft.dropdown.Option("How To Earn Online"),
                ft.dropdown.Option("How To Do Yoga"),
                ft.dropdown.Option("How To Do Exercise")
            ],
            # trailing_icon=ft.Icons.SEARCH,  # Not a valid Flet Dropdown property
            border_radius=50,
            visible=False  # Set to True for testing animation
        )
    )

    # Box with search and icon button
    box = ft.Row(
        [
            search(),
            ft.IconButton(
                icon=ft.Icons.SEARCH,
                on_click=lambda e: [
                    setattr(search.child, "visible", not search.child.visible),
                    page.update()
                ]
            )
        ],
        width=400
    )

    # Add widgets to page and render initial state
    page.add(
        animated_text(),
        animated_button(),
        box  # Only add search through the box
    )
    page.update()
    await asyncio.sleep(0.1)  # Ensure initial render

    # Trigger animations
    await animated_text.animate(page)
    await animated_button.animate(page)
    await search.animate(page)

ft.app(target=main)

#test.py

import flet as ft
import asyncio
from enum import Enum
from typing import Optional

# Define animation types
class AnimationType(Enum):
    FADE_IN = "fade_in"
    FADE_OUT = "fade_out"
    SLIDE_IN_LEFT = "slide_in_left"
    SLIDE_IN_RIGHT = "slide_in_right"
    SCALE_UP = "scale_up"
    ROTATE = "rotate"

# Custom AnimatedWidget class
class AnimatedWidget:
    def __init__(
        self,
        child: ft.Control,
        animation: AnimationType,
        duration: int = 500,
        curve: ft.AnimationCurve = ft.AnimationCurve.EASE_IN_OUT,
        delay: int = 0,
        auto_start: bool = True,
    ) -> None:
        """
        A custom Flet control for applying animations to a child widget.

        Args:
            child (ft.Control): The Flet control to animate (e.g., ft.Text, ft.ElevatedButton).
            animation (AnimationType): The type of animation to apply (e.g., FADE_IN, SLIDE_IN_RIGHT).
            duration (int, optional): Duration of the animation in milliseconds. Defaults to 500.
            curve (ft.AnimationCurve, optional): Animation curve (e.g., EASE_IN_OUT, BOUNCE_OUT). Defaults to EASE_IN_OUT.
            delay (int, optional): Delay before starting the animation in milliseconds. Defaults to 0.
            auto_start (bool, optional): Whether to start the animation automatically when added to the page. Defaults to True.
        """
        self.child = child
        self.animation = animation
        self.duration = duration
        self.curve = curve
        self.delay = delay
        self.auto_start = auto_start
        self.container = self._build_container()

    def _build_container(self) -> ft.Container:
        # Initial states
        opacity = 1.0
        offset = ft.transform.Offset(0, 0)
        scale = ft.transform.Scale(1, 1)
        rotate = ft.transform.Rotate(0, alignment=ft.alignment.center)

        # Set initial state based on animation type
        if self.animation == AnimationType.FADE_IN:
            opacity = 0
        elif self.animation == AnimationType.FADE_OUT:
            opacity = 1
        elif self.animation == AnimationType.SLIDE_IN_LEFT:
            offset = ft.transform.Offset(-1, 0)
        elif self.animation == AnimationType.SLIDE_IN_RIGHT:
            offset = ft.transform.Offset(1, 0)
        elif self.animation == AnimationType.SCALE_UP:
            scale = ft.transform.Scale(0, 0)
        elif self.animation == AnimationType.ROTATE:
            rotate = ft.transform.Rotate(0)

        # Animation object
        animation = ft.Animation(self.duration, self.curve)

        # Create container
        return ft.Container(
            content=self.child,
            opacity=opacity,
            offset=offset,
            scale=scale,
            rotate=rotate,
            animate_opacity=animation if self.animation in [AnimationType.FADE_IN, AnimationType.FADE_OUT] else None,
            animate_offset=animation if self.animation in [AnimationType.SLIDE_IN_LEFT, AnimationType.SLIDE_IN_RIGHT] else None,
            animate_scale=animation if self.animation == AnimationType.SCALE_UP else None,
            animate_rotation=animation if self.animation == AnimationType.ROTATE else None,
        )

    async def animate(self, page: ft.Page) -> None:
        # Wait a brief moment to ensure initial state renders
        if self.delay > 0:
            await asyncio.sleep(self.delay / 1000)  # Convert ms to seconds
        else:
            await asyncio.sleep(0.01)  # Minimal delay to allow rendering

        # Apply target state
        if self.animation == AnimationType.FADE_IN:
            self.container.opacity = 1
        elif self.animation == AnimationType.FADE_OUT:
            self.container.opacity = 0
        elif self.animation == AnimationType.SLIDE_IN_LEFT or self.animation == AnimationType.SLIDE_IN_RIGHT:
            self.container.offset = ft.transform.Offset(0, 0)
        elif self.animation == AnimationType.SCALE_UP:
            self.container.scale = ft.transform.Scale(1, 1)
        elif self.animation == AnimationType.ROTATE:
            self.container.rotate = ft.transform.Rotate(3.14 / 2)  # 90 degrees
        page.update()

    def __call__(self) -> ft.Container:
        return self.container

# Wrapper function
def create_animated_widget(
    child: ft.Control,
    animation: AnimationType,
    duration: int = 500,
    curve: ft.AnimationCurve = ft.AnimationCurve.EASE_IN_OUT,
    delay: int = 0,
    auto_start: bool = True,
) -> AnimatedWidget:
    """
    Creates an AnimatedWidget instance with the specified parameters.

    Args:
        child (ft.Control): The Flet control to animate.
        animation (AnimationType): The type of animation to apply.
        duration (int, optional): Duration of the animation in milliseconds. Defaults to 500.
        curve (ft.AnimationCurve, optional): Animation curve. Defaults to EASE_IN_OUT.
        delay (int, optional): Delay before starting the animation in milliseconds. Defaults to 0.
        auto_start (bool, optional): Whether to start the animation automatically. Defaults to True.

    Returns:
        AnimatedWidget: The configured animation widget.
    """
    return AnimatedWidget(child, animation, duration, curve, delay, auto_start)

[Muddassir-Farooq-official]

i need this type of functionality in flet means just have a animated widget which accepts some flet control @ndonkoHenri @InesaFitsner @FeodorFitsner

[Muddassir-Farooq-official]

Check it out

https://pub.dev/packages/flutter_animate