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

# AppBar

> Documentation for AppBar

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

export const appBarPreviewJson = {
  "type": "appBar",
  "title": {
    "type": "text",
    "data": "App Bar Title"
  },
  "backgroundColor": "#FFFFFF",
  "foregroundColor": "#000000",
  "actions": [{
    "type": "iconButton",
    "icon": {
      "type": "icon",
      "icon": "search"
    }
  }, {
    "type": "iconButton",
    "icon": {
      "type": "icon",
      "icon": "settings"
    }
  }]
};
export const appBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property               | Type               | Description                                                                         |
| ---------------------- | ------------------ | ----------------------------------------------------------------------------------- |
| leading                | `StacWidget`       | The leading widget before the title.                                                |
| title                  | `StacWidget`       | The title widget.                                                                   |
| titleTextStyle         | `StacTextStyle`    | The text style for the title.                                                       |
| toolbarTextStyle       | `StacTextStyle`    | The text style for the toolbar.                                                     |
| shadowColor            | `StacColor`        | The color of the shadow below the app bar.                                          |
| backgroundColor        | `StacColor`        | The background color of the app bar.                                                |
| foregroundColor        | `StacColor`        | The color of the app bar's foreground elements.                                     |
| surfaceTintColor       | `StacColor`        | The surface tint color of the app bar.                                              |
| actions                | `List<StacWidget>` | The list of widgets to display in a row after the title. Defaults to an empty list. |
| bottom                 | `StacWidget`       | The bottom widget of the app bar.                                                   |
| titleSpacing           | `double`           | The spacing around the title.                                                       |
| toolbarOpacity         | `double`           | The opacity of the toolbar. Defaults to `1.0`.                                      |
| bottomOpacity          | `double`           | The opacity of the bottom widget. Defaults to `1.0`.                                |
| toolbarHeight          | `double`           | The height of the toolbar.                                                          |
| leadingWidth           | `double`           | The width of the leading widget.                                                    |
| primary                | `bool`             | Whether this app bar is the primary app bar for the scaffold. Defaults to `true`.   |
| centerTitle            | `bool`             | Whether the title should be centered.                                               |
| elevation              | `double`           | The elevation of the app bar.                                                       |
| scrolledUnderElevation | `double`           | The elevation of the app bar when it is scrolled under.                             |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacAppBar(
      title: StacText(data: 'App Bar Title'),
      backgroundColor: StacColors.white,
      foregroundColor: StacColors.black,
      actions: [
        StacIconButton(
          icon: StacIcon(icon: 'search'),
        ),
        StacIconButton(
          icon: StacIcon(icon: 'settings'),
        ),
      ],
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "appBar",
      "title": {
        "type": "text",
        "data": "App Bar Title"
      },
      "backgroundColor": "#FFFFFF",
      "foregroundColor": "#000000",
      "actions": [
        {
          "type": "iconButton",
          "icon": {
            "type": "icon",
            "icon": "search"
          }
        },
        {
          "type": "iconButton",
          "icon": {
            "type": "icon",
            "icon": "settings"
          }
        }
      ]
    }
    ```
  </Tab>

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

      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>