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

# SingleChildScrollView

> Documentation for SingleChildScrollView

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

export const singleChildScrollViewPreviewJson = {
  "type": "singleChildScrollView",
  "child": {
    "type": "column",
    "children": [{
      "type": "text",
      "data": "Hello World!"
    }, {
      "type": "text",
      "data": "This is a SingleChildScrollView widget."
    }, {
      "type": "text",
      "data": "You can scroll vertically."
    }, {
      "type": "text",
      "data": "You can also scroll horizontally."
    }]
  }
};
export const singleChildScrollViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property                | Type                                    | Description                                                                                                         |
| ----------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| scrollDirection         | `StacAxis`                              | The axis along which the scroll view scrolls. Defaults to `Axis.vertical`.                                          |
| reverse                 | `bool`                                  | Whether the scroll view scrolls in the reverse direction. Defaults to `false`.                                      |
| padding                 | `StacEdgeInsets`                        | The amount of space by which to inset the child.                                                                    |
| primary                 | `bool`                                  | Whether this is the primary scroll view associated with the parent.                                                 |
| physics                 | `StacScrollPhysics`                     | How the scroll view should respond to user input.                                                                   |
| child                   | `StacWidget`                            | The widget below this widget in the tree.                                                                           |
| dragStartBehavior       | `StacDragStartBehavior`                 | Determines the way that drag start behavior is handled. Defaults to `DragStartBehavior.start`.                      |
| clipBehavior            | `StacClip`                              | The content will be clipped (or not) according to this option. Defaults to `Clip.hardEdge`.                         |
| restorationId           | `String`                                | The restoration ID to save and restore the state of the scroll view.                                                |
| keyboardDismissBehavior | `StacScrollViewKeyboardDismissBehavior` | Configures how the scroll view should dismiss the keyboard. Defaults to `ScrollViewKeyboardDismissBehavior.manual`. |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacSingleChildScrollView(
      child: StacColumn(
        children: [
          StacText(data: 'Hello World!'),
          StacText(data: 'This is a SingleChildScrollView widget.'),
          StacText(data: 'You can scroll vertically.'),
          StacText(data: 'You can also scroll horizontally.'),
        ],
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "singleChildScrollView",
      "child": {
        "type": "column",
        "children": [
          {
            "type": "text",
            "data": "Hello World!"
          },
          {
            "type": "text",
            "data": "This is a SingleChildScrollView widget."
          },
          {
            "type": "text",
            "data": "You can scroll vertically."
          },
          {
            "type": "text",
            "data": "You can also scroll horizontally."
          }
        ]
      }
    }
    ```
  </Tab>

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

      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>