> ## 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.

# ClipOval

> Documentation for ClipOval

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

export const clipOvalPreviewJson = {
  "type": "clipOval",
  "clipBehavior": "antiAlias",
  "child": {
    "type": "image",
    "src": "https://placehold.co/600x400",
    "width": 200,
    "height": 200,
    "fit": "cover"
  }
};
export const clipOvalPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

Stac ClipOval allows you to build the Flutter ClipOval widget using JSON. It clips its child using an oval shape, which is useful for creating circular or oval UI elements.
To know more about the ClipOval widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/ClipOval-class.html).

## Properties

| Property     | Type         | Default     | Description                                                 |
| ------------ | ------------ | ----------- | ----------------------------------------------------------- |
| clipBehavior | `StacClip`   | `antiAlias` | The clipping behavior when content extends beyond the oval. |
| child        | `StacWidget` | Required    | The widget to clip with an oval shape.                      |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacClipOval(
      clipBehavior: StacClip.antiAlias,
      child: StacImage(
        src: 'https://placehold.co/600x400',
        width: 200,
        height: 200,
        fit: StacBoxFit.cover,
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "clipOval",
      "clipBehavior": "antiAlias",
      "child": {
        "type": "image",
        "src": "https://placehold.co/600x400",
        "width": 200,
        "height": 200,
        "fit": "cover"
      }
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={clipOvalPreviewSrc}
        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: clipOvalPreviewJson
      };

      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>