> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# CircleAvatar

> Documentation for CircleAvatar

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const circleAvatarPreviewJson = {
  "type": "circleAvatar",
  "backgroundColor": "#FF0000",
  "foregroundColor": "#FFFFFF",
  "backgroundImage": "https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/companies/bettrdo.jpg",
  "radius": 50,
  "child": {
    "type": "text",
    "data": "A"
  }
};
export const circleAvatarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac CircleAvatar allows you to build a Flutter circle avatar widget using JSON.
To know more about the circle avatar widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/CircleAvatar-class.html).

## Properties

| Property               | Type         | Description                                                        |
| ---------------------- | ------------ | ------------------------------------------------------------------ |
| child                  | `StacWidget` | The widget to display inside the circle avatar.                    |
| backgroundColor        | `StacColor`  | The background color of the circle avatar.                         |
| backgroundImage        | `String`     | The background image of the circle avatar.                         |
| foregroundImage        | `String`     | The foreground image of the circle avatar.                         |
| onBackgroundImageError | `StacAction` | The error widget to display if the background image fails to load. |
| onForegroundImageError | `StacAction` | The error widget to display if the foreground image fails to load. |
| foregroundColor        | `StacColor`  | The color of the circle avatar's foreground elements.              |
| radius                 | `double`     | The radius of the circle avatar.                                   |
| minRadius              | `double`     | The minimum radius of the circle avatar.                           |
| maxRadius              | `double`     | The maximum radius of the circle avatar.                           |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacCircleAvatar(
      backgroundColor: StacColors.red,
      foregroundColor: StacColors.white,
      backgroundImage: 'https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/companies/bettrdo.jpg',
      radius: 50,
      child: StacText(data: 'A'),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "circleAvatar",
      "backgroundColor": "#FF0000",
      "foregroundColor": "#FFFFFF",
      "backgroundImage": "https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/companies/bettrdo.jpg",
      "radius": 50,
      "child": {
        "type": "text",
        "data": "A"
      }
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={circleAvatarPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: circleAvatarPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>