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

# AlertDialog

> Documentation for AlertDialog

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

export const alertDialogPreviewJson = {
  "type": "alertDialog",
  "content": {
    "type": "padding",
    "padding": {
      "top": 0,
      "left": 12,
      "right": 12,
      "bottom": 8
    },
    "child": {
      "type": "text",
      "data": "Discard draft?",
      "align": "center",
      "style": {
        "fontSize": 14
      }
    }
  },
  "actions": [{
    "type": "textButton",
    "child": {
      "type": "text",
      "data": "CANCEL"
    },
    "onPressed": {
      "actionType": "navigate",
      "navigationStyle": "pop"
    }
  }, {
    "type": "sizedBox",
    "width": 8
  }, {
    "type": "textButton",
    "child": {
      "type": "text",
      "data": "DISCARD"
    },
    "onPressed": {
      "actionType": "navigate",
      "navigationStyle": "pop"
    }
  }, {
    "type": "sizedBox",
    "width": 12
  }]
};
export const alertDialogPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property                     | Type                       | Description                                                                                  |
| ---------------------------- | -------------------------- | -------------------------------------------------------------------------------------------- |
| icon                         | `StacWidget`               | The icon to display in the alert dialog.                                                     |
| iconPadding                  | `StacEdgeInsets`           | The padding around the icon.                                                                 |
| iconColor                    | `StacColor`                | The color of the icon.                                                                       |
| title                        | `StacWidget`               | The title widget of the alert dialog.                                                        |
| titlePadding                 | `StacEdgeInsets`           | The padding around the title.                                                                |
| titleTextStyle               | `StacTextStyle`            | The text style of the title.                                                                 |
| content                      | `StacWidget`               | The content widget of the alert dialog.                                                      |
| contentPadding               | `StacEdgeInsets`           | The padding around the content.                                                              |
| contentTextStyle             | `StacTextStyle`            | The text style of the content.                                                               |
| actions                      | `List<StacWidget>`         | The actions to display in the alert dialog.                                                  |
| actionsPadding               | `StacEdgeInsets`           | The padding around the actions.                                                              |
| actionsAlignment             | `StacMainAxisAlignment`    | The alignment of the actions.                                                                |
| actionsOverflowAlignment     | `StacOverflowBarAlignment` | The overflow alignment of the actions.                                                       |
| actionsOverflowDirection     | `StacVerticalDirection`    | The overflow direction of the actions.                                                       |
| actionsOverflowButtonSpacing | `double`                   | The spacing between overflow buttons.                                                        |
| buttonPadding                | `StacEdgeInsets`           | The padding around the buttons.                                                              |
| backgroundColor              | `StacColor`                | The background color of the alert dialog.                                                    |
| elevation                    | `double`                   | The elevation of the alert dialog.                                                           |
| shadowColor                  | `StacColor`                | The shadow color of the alert dialog.                                                        |
| surfaceTintColor             | `StacColor`                | The surface tint color of the alert dialog.                                                  |
| semanticLabel                | `String`                   | The semantic label for the alert dialog.                                                     |
| insetPadding                 | `StacEdgeInsets`           | The padding around the alert dialog. Defaults to `left: 40, right: 40, top: 24, bottom: 24`. |
| clipBehavior                 | `StacClip`                 | The clip behavior of the alert dialog. Defaults to `Clip.none`.                              |
| shape                        | `StacShapeBorder`          | The shape of the alert dialog.                                                               |
| alignment                    | `StacAlignmentGeometry`    | The alignment of the alert dialog.                                                           |
| scrollable                   | `bool`                     | Whether the alert dialog is scrollable. Defaults to `false`.                                 |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacAlertDialog(
      content: StacPadding(
        padding: StacEdgeInsets(
          top: 0,
          left: 12,
          right: 12,
          bottom: 8,
        ),
        child: StacText(
          data: 'Discard draft?',
          textAlign: StacTextAlign.center,
          style: StacTextStyle(fontSize: 14),
        ),
      ),
      actions: [
        StacTextButton(
          child: StacText(data: 'CANCEL'),
          onPressed: StacNavigateAction(navigationStyle: NavigationStyle.pop),
        ),
        StacSizedBox(width: 8),
        StacTextButton(
          child: StacText(data: 'DISCARD'),
          onPressed: StacNavigateAction(navigationStyle: NavigationStyle.pop),
        ),
        StacSizedBox(width: 12),
      ],
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "alertDialog",
      "content": {
        "type": "padding",
        "padding": {
          "top": 0,
          "left": 12,
          "right": 12,
          "bottom": 8
        },
        "child": {
          "type": "text",
          "data": "Discard draft?",
          "align": "center",
          "style": {
            "fontSize": 14
          }
        }
      },
      "actions": [
        {
          "type": "textButton",
          "child": {
            "type": "text",
            "data": "CANCEL"
          },
          "onPressed": {
            "actionType": "navigate",
            "navigationStyle": "pop"
          }
        },
        {
          "type": "sizedBox",
          "width": 8
        },
        {
          "type": "textButton",
          "child": {
            "type": "text",
            "data": "DISCARD"
          },
          "onPressed": {
            "actionType": "navigate",
            "navigationStyle": "pop"
          }
        },
        {
          "type": "sizedBox",
          "width": 12
        }
      ]
    }
    ```
  </Tab>

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

      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>