Skip to main content

CircleAvatar

A circle that represents a user.

Typically used with a user's profile image, or, in the absence of such an image, the user's initials. A given user's initials should always be paired with the same background color, for consistency.

If foreground_image_url fails then background_image_url is used. If background_image_url fails too, bgcolor is used.

Examples

Live example

import flet as ft

def main(page):
# a "normal" avatar with background image
a1 = ft.CircleAvatar(
foreground_image_url="https://avatars.githubusercontent.com/u/5041459?s=88&v=4",
content=ft.Text("FF"),
)
# avatar with failing foreground image and fallback text
a2 = ft.CircleAvatar(
foreground_image_url="https://avatars.githubusercontent.com/u/_5041459?s=88&v=4",
content=ft.Text("FF"),
)
# avatar with icon, aka icon with inverse background
a3 = ft.CircleAvatar(
content=ft.Icon(ft.icons.ABC),
)
# avatar with icon and custom colors
a4 = ft.CircleAvatar(
content=ft.Icon(ft.icons.WARNING_ROUNDED),
color=ft.colors.YELLOW_200,
bgcolor=ft.colors.AMBER_700,
)
# avatar with online status
a5 = ft.Stack(
[
ft.CircleAvatar(
foreground_image_url="https://avatars.githubusercontent.com/u/5041459?s=88&v=4"
),
ft.Container(
content=ft.CircleAvatar(bgcolor=ft.colors.GREEN, radius=5),
alignment=ft.alignment.bottom_left,
),
],
width=40,
height=40,
)
page.add(a1, a2, a3, a4, a5)


ft.app(target=main)

Properties

background_image_url

The background image of the circle. Changing the background image will cause the avatar to animate to the new image. Typically used as a fallback image for foreground_image_url. If the CircleAvatar is to have the user's initials, use content instead.

bgcolor

The color with which to fill the circle. Changing the background color will cause the avatar to animate to the new color.

color

The default text color for text in the circle. Defaults to the primary text theme color if no bgcolor is specified.

content

Typically a Text control. If the CircleAvatar is to have an image, use background_image_url instead.

foreground_image_url

The foreground image of the circle. Typically used as profile image. For fallback use background_image_url.

max_radius

The maximum size of the avatar, expressed as the radius (half the diameter). If maxRadius is specified, then radius must not also be specified. Defaults to "infinity".

min_radius

The minimum size of the avatar, expressed as the radius (half the diameter). If minRadius is specified, then radius must not also be specified. Defaults to zero.

radius

The size of the avatar, expressed as the radius (half the diameter). If radius is specified, then neither minRadius nor maxRadius may be specified.

tooltip

The text displayed when hovering the mouse over the button.