How to use Multiple AnimatedSwitch using a list

[Michel7GitHub]

Question

I got the example https://flet.dev/docs/controls/animatedswitcher/
and I want to modify it to display multiple (a list) Containers and control the effect (AnimatedSwitch) individually.
When I click on one of the Containers, the animation always occurs on the last Container.
Does anyone have a solution to suggest to me?
Here is my code

import flet as ft

def main(page: ft.Page):

	ls = dict()					# LIST of Animated Switch
	
	for i in range(5):
		
		name = ('A', 'B', 'C', 'D', 'E', 'F')[i]
		ls[name] = dict()

		def animate(e, ls, name):
			ls[name]['c'].content = ls[name]['c2'] if ls[name]['c'].content == ls[name]['c1'] else ls[name]['c1']
			ls[name]['c'].update()
 
		ls[name]['c1'] = ft.Container(
			ft.Text(f"{name} / 1", style=ft.TextThemeStyle.HEADLINE_MEDIUM),
			alignment=ft.alignment.center,
			width=100+i, height=100+i, bgcolor=ft.colors.GREEN, on_click=lambda e: animate(e,ls,name)
		)
		ls[name]['c2'] = ft.Container(
   	    		ft.Text(f"{name} / 2", size=50),
       	  		alignment=ft.alignment.center,
        		width=200+i, height=200+i, bgcolor=ft.colors.YELLOW, on_click=lambda e: animate(e,ls,name)
    	)	

		ls[name]['c'] = ft.AnimatedSwitcher(
        		ls[name]['c1'],
        		transition=ft.AnimatedSwitcherTransition.SCALE,
        		duration=500, reverse_duration=100,
        		switch_in_curve=ft.AnimationCurve.BOUNCE_OUT,
        		switch_out_curve=ft.AnimationCurve.BOUNCE_IN,
		)

		page.add(ls[name]['c'] )

ft.app(target=main)`

Code sample

No response

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[Michel7GitHub]

I finaly find a way to do it, using Controls DATA property. Here is my new code :

import flet as ft

def main(page: ft.Page):

	ls = dict()					# LIST of Animated Switch
	
	for i in range(5):
		
		name = ('A', 'B', 'C', 'D', 'E', 'F')[i]
	
		ls[name] = dict()

		def animate(e):
			ls[name]['c'].content = ls[name]['c2'] if ls[name]['c'].content == ls[name]['c1'] else ls[name]['c1']
			ls[name]['c'].update()
 
		ls[name]['c1'] = ft.Container(
			ft.Text(f"{name} / 1", style=ft.TextThemeStyle.HEADLINE_MEDIUM),
			alignment=ft.alignment.center,
			width=100+i, height=100+i, bgcolor=ft.colors.GREEN, on_click=animate,
			data=name
		)
		ls[name]['c2'] = ft.Container(
   	    		ft.Text(f"{name} / 2", size=50),
       	  		alignment=ft.alignment.center,
        		width=200+i, height=200+i, bgcolor=ft.colors.YELLOW, on_click=animate,
			data=name
    		)	

		ls[name]['c'] = ft.AnimatedSwitcher(
        		ls[name]['c1'],
        		transition=ft.AnimatedSwitcherTransition.SCALE,
        		duration=500,
        		reverse_duration=100,
        		switch_in_curve=ft.AnimationCurve.BOUNCE_OUT,
        		switch_out_curve=ft.AnimationCurve.BOUNCE_IN
		)

		page.add(ls[name]['c'] )

ft.app(target=main)