how to run animation on page.overlay.append

[bobwatcherx]

i want to make dialog animated like SweetAlert .but the bounceIn animation is not working . is there a way to add animation when overlay.append section and is there a way to custom overlay color

example

 page.overlay.color = "black"

my code

from flet import *

def main(page:Page):
	def addmodal(e):
		page.overlay.append(c)
		page.update()

	def dismissmodal(e):
		page.overlay.remove(c)
		page.update()

	
	ct = Card(
		elevation=10,
		margin=20,
		content=Container(
		alignment=alignment.center,
		bgcolor="white",
		scale=transform.Scale(scale=1),
		animate_scale=animation.Animation(1000,curve="bounceIn"),
		padding=10,
		content=Column([
			Row([
				Text("Hello App",size=30),
				IconButton(icon="close",icon_size=30,
				on_click=dismissmodal

					)
				],alignment="spaceBetween")
			])
		)


		)
	c = AnimatedSwitcher(
        ct,
        transition=AnimatedSwitcherTransition.SCALE,
        duration=1500,
        reverse_duration=100,
        switch_in_curve=AnimationCurve.BOUNCE_OUT,
        switch_out_curve=AnimationCurve.BOUNCE_IN,
    )
	page.add(
		ElevatedButton("add new",
			on_click=addmodal

			)
		)




flet.app(target=main)

[AbdouSadou]

Hi there,

According to the docs, the animated switcher "switches" between 2 containers, using an animation. In you case, you do not need that. See below for a makeshift solution that uses sleep to wait for the scale animation before popping the overlay.

from flet import (
    Page,
    Container,
    alignment,
    animation,
    Row,
    Column,
    Text,
    IconButton,
    ElevatedButton,
    app)
 
from time import sleep

def main(page:Page):
    page.padding = 20
    page.horizontal_alignment = "center"

    animation_duration = 3
    animation_curve = "EASE_OUT_CUBIC"

    def addmodal(e):
        ct.scale = 1
        page.overlay.append(ct)
        page.update()

    def dismissmodal(e):
        ct.scale = 0
        page.update()

        sleep(animation_duration)
        page.overlay.pop()
        page.update()
	
    ct = Container(
                alignment=alignment.center,
                bgcolor="grey",
                scale=1,
                height=200,
                width=200,
                animate_scale=animation.Animation(animation_duration*1000, animation_curve),
                padding=10,
                content=Column([
                        Row([
                            Text("Hello App",size=30),
                            IconButton(icon="close",icon_size=30,
                            on_click=dismissmodal
                                )
                            ],
                            alignment="spaceBetween")
                        ])
		)

    page.add(ElevatedButton("add new", on_click=addmodal))

app(target=main)