Skip to main content

AnimatedSwitcher

A control that by default does a cross-fade between a new control and the control previously set on the AnimatedSwitcher as a content.

Examples​

Live example

Animated switching between two containers with scale effect​

import flet as ft

def main(page: ft.Page):

    c1 = ft.Container(
        ft.Text("Hello!", style=ft.TextThemeStyle.HEADLINE_MEDIUM),
        alignment=ft.alignment.center,
        width=200,
        height=200,
        bgcolor=ft.colors.GREEN,
    )
    c2 = ft.Container(
        ft.Text("Bye!", size=50),
        alignment=ft.alignment.center,
        width=200,
        height=200,
        bgcolor=ft.colors.YELLOW,
    )
    c = ft.AnimatedSwitcher(
        c1,
        transition=ft.AnimatedSwitcherTransition.SCALE,
        duration=500,
        reverse_duration=100,
        switch_in_curve=ft.AnimationCurve.BOUNCE_OUT,
        switch_out_curve=ft.AnimationCurve.BOUNCE_IN,
    )

    def animate(e):
        c.content = c2 if c.content == c1 else c1
        c.update()

    page.add(
        c,
        ft.ElevatedButton("Animate!", on_click=animate),
    )

ft.app(target=main)

Properties​

duration​

The duration, in milliseconds, of the transition from the old content value to the new one. Default is 1000 milliseconds.

reverse_duration​

The duration, in milliseconds, of the transition from the new content value to the old one. Default is 1000 milliseconds.

switch_in_curve​

The animation curve to use when transitioning in a new content. See Curves in Flutter docs for possible values. Property value is AnimationCurve enum with AnimationCurve.LINEAR as default.

switch_out_curve​

The animation curve to use when transitioning a previous content out. See Curves in Flutter docs for possible values. Property value is AnimationCurve enum with AnimationCurve.LINEAR as default.

transition​

An animation type to transition between new and old content. Property value is AnimatedSwitcherTransition enum with AnimatedSwitcherTransition.FADE as default.