Show Bottom Sheet

The Show Bottom Sheet action allows you to display a component as a bottom sheet over your current page. It supports customization of appearance and optional result handling.

Note: Only components can be used as bottom sheets. You must pass a component as the viewData.

Use Cases

• Displaying filters, options, or settings in a modal fashion.

• Showing quick actions or summaries without navigating to a new screen.

• Collecting short inputs or confirmations from the user.

Properties

Property	Description
viewData	(Required) The component to display in the bottom sheet. Only components are supported.
waitForResult	Boolean indicating whether the action should wait for a result returned from the bottom sheet. Defaults to false.
style.bgColor	Background color of the bottom sheet.
style.barrierColor	Color of the background barrier behind the sheet.
style.maxHeight	Maximum height of the bottom sheet in pixels.
style.borderStyle	Border style (e.g., solid, dashed).
style.borderColor	Border color.
style.borderWidth	Border width in pixels.
style.borderRadius	Border radius (e.g., "8,8,8,8" for a rounded sheet).
onResult	Action flow to run when a result is returned from the bottom sheet. Only applicable if waitForResult is true.

Default Behavior

• The selected component is rendered as a bottom sheet over the current page.

• By default, the sheet closes when tapped outside or via an internal action.

• The bottom sheet will not return a result unless waitForResult is enabled and onResult is configured.

How to Use

1. Attach the action to a widget (e.g., button or icon tap).

2. Select Show Bottom Sheet from the action list.

3. Provide a valid viewData pointing to a component.

4. Optionally style the sheet and configure waitForResult and onResult.