flet icon indicating copy to clipboard operation
flet copied to clipboard

[v1] Shimmer effect on `ft.Container` using `on_animation_end`

Open oussama-gourari opened this issue 2 months ago • 0 comments

I'm trying to create a control similar to ft.CircleAvatar with a shimmer effect while some data is loading, but it seems that the on_animation_end callback isn't triggering (unless I'm using it wrong):

import flet as ft


class Profile(ft.Column):

	_START_BGCOLOR = "#1e1e1e"
	_END_BGCOLOR = "#2a183f"

	def __init__(self) -> None:
		super().__init__(
			horizontal_alignment=ft.CrossAxisAlignment.CENTER,
		)
		self._avatar = ft.Container(
			shape=ft.BoxShape.CIRCLE,
			width=100,
			height=100,
			bgcolor=Profile._START_BGCOLOR,
			animate=ft.Animation(duration=ft.Duration(milliseconds=1000)),
			on_animation_end=self._change_bgcolor,
		)
		self.controls = [
			self._avatar,
		]

	def did_mount(self) -> None:
		self._change_bgcolor()

	def _change_bgcolor(self) -> None:
		if self._avatar.bgcolor == Profile._START_BGCOLOR:
			self._avatar.bgcolor = Profile._END_BGCOLOR
		else:
			self._avatar.bgcolor = Profile._START_BGCOLOR
		self.update()


def main(page):
    page.add(Profile())


ft.run(main=main)

oussama-gourari avatar Nov 09 '25 21:11 oussama-gourari