Animations

import {CodeExample, Image} from '@site/src/components/crocodocs';

Implicit animations

With implicit animations, you can animate a control property by setting a target value; whenever that target value changes, the control animates the property from the old value to the new one.

Animation produces interpolated values between the old and the new value over the given duration.

By default, the animation is linearly increasing the animation value, however, a curve can be applied to the animation which changes the value according to the provided curve. For example, AnimationCurve.EASE_OUT_CUBIC curve increases the animation value quickly at the beginning of the animation and then slows down until the target value is reached:

LayoutControl (and its subclasses) provides a number of animate_{something} properties, described below, to enable implicit animation of its appearance:

• animate_opacity
• animate_rotation
• animate_scale
• animate_offset
• animate_position
• animate (Container)

animate_* properties could have one of the following values:

• Instance of Animation - allows configuring the duration and the curve of the
• animation, for example animate_rotation=Animation(duration=300, curve=AnimationCurve.BOUNCE_OUT). See this Flutter docs on animation curves for possible values. Default is AnimationCurve.LINEAR.
• int value - enables animation with specified duration in milliseconds and AnimationCurve.LINEAR curve.
• bool value - enables animation with the duration of 1000 milliseconds and AnimationCurve.LINEAR curve.

Opacity animation

Setting control's animate_opacity to either True, number or an instance of Animation class (see above) enables implicit animation of Control.opacity property.

Rotation animation

Setting control's animate_rotation to either True, number or an instance of Animation class (see above) enables implicit animation of LayoutControl.rotate property.

Scale animation

Setting control's animate_scale to either True, number or an instance of Animation class (see above) enables implicit animation of LayoutControl.scale property.

Offset animation

Setting control's animate_offset to either True, number or an instance of Animation class (see above) enables implicit animation of LayoutControl.offset property.

offset property is an instance of Offset class which specifies horizontal x and vertical y offset of a control scaled to control's size. For example, an offset Offset(-0.25, 0) will result in a horizontal translation of one quarter the width of the control.

Offset animation is used for various sliding effects:

Position animation

Setting control's animate_position to either True, number or an instance of Animation class (see above) enables implicit animation of the following LayoutControl properties: left, right, bottom, top.

Note: Positioning is effective only if the control is a descendant of one of the following:

- [`Stack`](../controls/stack.md) control
- [`Page.overlay`](../controls/page.md) list

Animate

Setting Container.animate to AnimationValue enables implicit animation of container properties such as size, background color, border style, gradient.

Animated content switcher

AnimatedSwitcher allows animated transition between two controls ('new' and 'old').

import time

import flet as ft

def main(page: ft.Page):
    i = ft.Image(src="https://picsum.photos/150/150", width=150, height=150)

    def animate(e):
        sw.content = ft.Image(
            src=f"https://picsum.photos/150/150?{time.time()}", width=150, height=150
        )
        page.update()

    sw = ft.AnimatedSwitcher(
        i,
        transition=ft.AnimatedSwitcherTransition.SCALE,
        duration=500,
        reverse_duration=500,
        switch_in_curve=ft.AnimationCurve.BOUNCE_OUT,
        switch_out_curve=ft.AnimationCurve.BOUNCE_IN,
    )

    page.add(
        sw,
        ft.Button("Animate!", on_click=animate),
    )

ft.run(main)

Animation end callback

LayoutControl also has an on_animation_end event handler, which is called when an animation is complete. It can be used to chain multiple animations.

Event's data field/property contains the name of animation:

• "opacity"
• "rotation"
• "scale"
• "offset"
• "position"
• "container"

For example:

ft.Container(
    content=ft.Text("Animate me!"),
    animate=ft.Animation(1000, ft.AnimationCurve.BOUNCE_OUT),
    on_animation_end=lambda e: print("Container animation end:", e.data)
)