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.