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

# Modal Bottom Sheet Action

> Documentation for Modal Bottom Sheet Action

The `StacModalBottomSheetAction` class is used to display a modal bottom sheet in Stac applications.

## Properties

| Property           | Type                 | Description                                                               |
| ------------------ | -------------------- | ------------------------------------------------------------------------- |
| widget             | `StacWidget`         | The widget to display inside the modal bottom sheet.                      |
| request            | `StacNetworkRequest` | The network request to perform before displaying the modal bottom sheet.  |
| assetPath          | `String`             | The asset path of the widget to display inside the modal bottom sheet.    |
| backgroundColor    | `StacColor`          | The background color of the modal bottom sheet.                           |
| barrierLabel       | `String`             | The semantic label for the modal barrier.                                 |
| elevation          | `double`             | The elevation of the modal bottom sheet.                                  |
| shape              | `StacBorder`         | The shape of the modal bottom sheet.                                      |
| constraints        | `StacBoxConstraints` | The constraints for the modal bottom sheet.                               |
| barrierColor       | `StacColor`          | The color of the modal barrier.                                           |
| isScrollControlled | `bool`               | Whether the modal bottom sheet is scroll controlled. Defaults to `false`. |
| useRootNavigator   | `bool`               | Whether to use the root navigator. Defaults to `false`.                   |
| isDismissible      | `bool`               | Whether the modal bottom sheet is dismissible. Defaults to `true`.        |
| enableDrag         | `bool`               | Whether the modal bottom sheet can be dragged. Defaults to `true`.        |
| showDragHandle     | `bool`               | Whether to show a drag handle on the modal bottom sheet.                  |
| useSafeArea        | `bool`               | Whether to use the safe area. Defaults to `false`.                        |

## Examples

### Modal Bottom Sheet with a Widget

<CodeGroup>
  ```dart Dart theme={null}
  StacModalBottomSheetAction(
    widget: StacContainer(
      height: 200,
      color: StacColors.amber,
      child: StacCenter(
        child: StacColumn(
          mainAxisAlignment: StacMainAxisAlignment.center,
          mainAxisSize: StacMainAxisSize.min,
          children: [
            StacText(data: 'Modal BottomSheet'),
            StacElevatedButton(
              child: StacText(data: 'Close BottomSheet'),
              onPressed: StacNavigateAction(navigationStyle: NavigationStyle.pop),
            ),
          ],
        ),
      ),
    ),
  )
  ```

  ```json JSON theme={null}
  {
    "actionType": "showModalBottomSheet",
    "widget": {
      "type": "container",
      "height": 200,
      "color": "amber",
      "child": {
        "type": "center",
        "child": {
          "type": "column",
          "mainAxisAlignment": "center",
          "mainAxisSize": "min",
          "children": [
            {
              "type": "text",
              "data": "Modal BottomSheet"
            },
            {
              "type": "elevatedButton",
              "child": {
                "type": "text",
                "data": "Close BottomSheet"
              },
              "onPressed": {
                "actionType": "navigate",
                "navigationStyle": "pop"
              }
            }
          ]
        }
      }
    }
  }
  ```
</CodeGroup>

### Modal Bottom Sheet with an Asset Path

<CodeGroup>
  ```dart Dart theme={null}
  StacModalBottomSheetAction(
    assetPath: 'assets/widgets/modal_bottom_sheet.json',
  )
  ```

  ```json JSON theme={null}
  {
    "actionType": "showModalBottomSheet",
    "assetPath": "assets/widgets/modal_bottom_sheet.json"
  }
  ```
</CodeGroup>

### Modal Bottom Sheet with a Network Request

<CodeGroup>
  ```dart Dart theme={null}
  StacModalBottomSheetAction(
    request: StacNetworkRequest(
      url: 'https://example.com/api',
      method: Method.get,
    ),
  )
  ```

  ```json JSON theme={null}
  {
    "actionType": "showModalBottomSheet",
    "request": {
      "url": "https://example.com/api",
      "method": "get"
    }
  }
  ```
</CodeGroup>