Skip to content

[v1] Shimmer effect on ft.Container using on_animation_end #5796

@oussama-gourari

Description

@oussama-gourari

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)

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions