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

# Scaffold

> Documentation for Scaffold

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

export const scaffoldPreviewJson = {
  "type": "scaffold",
  "appBar": {
    "type": "appBar",
    "title": {
      "type": "text",
      "data": "App Bar Title"
    }
  },
  "body": {
    "type": "center",
    "child": {
      "type": "text",
      "data": "Hello, World!"
    }
  },
  "floatingActionButton": {
    "type": "floatingActionButton",
    "child": {
      "type": "icon",
      "icon": "add"
    },
    "onPressed": {
      "type": "function",
      "name": "onFabPressed"
    }
  },
  "backgroundColor": "#FFFFFF",
  "drawer": {
    "type": "drawer",
    "child": {
      "type": "column",
      "children": [{
        "type": "text",
        "data": "Drawer Item 1"
      }, {
        "type": "text",
        "data": "Drawer Item 2"
      }]
    }
  }
};
export const scaffoldPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property                       | Type                               | Description                                                                             |
| ------------------------------ | ---------------------------------- | --------------------------------------------------------------------------------------- |
| appBar                         | `StacWidget`                       | The app bar widget of the scaffold.                                                     |
| body                           | `StacWidget`                       | The body widget of the scaffold.                                                        |
| floatingActionButton           | `StacWidget`                       | The floating action button widget of the scaffold.                                      |
| floatingActionButtonLocation   | `StacFloatingActionButtonLocation` | The location of the floating action button.                                             |
| persistentFooterButtons        | `List<StacWidget>`                 | The persistent footer buttons of the scaffold.                                          |
| persistentFooterAlignment      | `StacAlignmentDirectional`         | The alignment of the persistent footer buttons.                                         |
| drawer                         | `StacWidget`                       | The drawer widget of the scaffold.                                                      |
| onDrawerChanged                | `StacAction`                       | Action called when the drawer is opened or closed.                                      |
| endDrawer                      | `StacWidget`                       | The end drawer widget of the scaffold.                                                  |
| onEndDrawerChanged             | `StacAction`                       | Action called when the end drawer is opened or closed.                                  |
| bottomNavigationBar            | `StacWidget`                       | The bottom navigation bar widget of the scaffold.                                       |
| bottomSheet                    | `StacWidget`                       | The bottom sheet widget of the scaffold.                                                |
| backgroundColor                | `StacColor`                        | The background color of the scaffold.                                                   |
| resizeToAvoidBottomInset       | `bool`                             | Whether the scaffold should resize to avoid the bottom inset.                           |
| primary                        | `bool`                             | Whether the scaffold is the primary scaffold. Defaults to `true`.                       |
| drawerDragStartBehavior        | `StacDragStartBehavior`            | The drag start behavior for the drawer. Defaults to `DragStartBehavior.start`.          |
| extendBody                     | `bool`                             | Whether the body should extend into the scaffold's bottom padding. Defaults to `false`. |
| extendBodyBehindAppBar         | `bool`                             | Whether the body should extend behind the app bar. Defaults to `false`.                 |
| drawerScrimColor               | `StacColor`                        | The color of the scrim for the drawer.                                                  |
| drawerEdgeDragWidth            | `double`                           | The width of the edge drag area for the drawer.                                         |
| drawerEnableOpenDragGesture    | `bool`                             | Whether the drawer can be opened with a drag gesture. Defaults to `true`.               |
| endDrawerEnableOpenDragGesture | `bool`                             | Whether the end drawer can be opened with a drag gesture. Defaults to `true`.           |
| restorationId                  | `String`                           | The restoration ID to save and restore the state of the scaffold.                       |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacScaffold(
      appBar: StacAppBar(
        title: StacText(data: 'App Bar Title'),
      ),
      body: StacCenter(
        child: StacText(data: 'Hello, World!'),
      ),
      floatingActionButton: StacFloatingActionButton(
        child: StacIcon(icon: 'add'),
        onPressed: {'type': 'function', 'name': 'onFabPressed'},
      ),
      backgroundColor: StacColors.white,
      drawer: StacDrawer(
        child: StacColumn(
          children: [
            StacText(data: 'Drawer Item 1'),
            StacText(data: 'Drawer Item 2'),
          ],
        ),
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "scaffold",
      "appBar": {
        "type": "appBar",
        "title": {
          "type": "text",
          "data": "App Bar Title"
        }
      },
      "body": {
        "type": "center",
        "child": {
          "type": "text",
          "data": "Hello, World!"
        }
      },
      "floatingActionButton": {
        "type": "floatingActionButton",
        "child": {
          "type": "icon",
          "icon": "add"
        },
        "onPressed": {
          "type": "function",
          "name": "onFabPressed"
        }
      },
      "backgroundColor": "#FFFFFF",
      "drawer": {
        "type": "drawer",
        "child": {
          "type": "column",
          "children": [
            {
              "type": "text",
              "data": "Drawer Item 1"
            },
            {
              "type": "text",
              "data": "Drawer Item 2"
            }
          ]
        }
      }
    }
    ```
  </Tab>

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

      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>