Bottom Sheet

Using this action, you can open and close the bottom sheet component.
Bottom Sheet Action
Prerequisites
Before you use this action, make sure you create a bottom sheet component.
Types of Bottom Sheet action
Below are the types of Bottom Sheet actions:
1.Show: This opens the bottom sheet.
2.Dismiss: This closes the bottom sheet.
Opening Bottom Sheet
Follow the steps below to add an action that opens the bottom sheet:
Select the Widget (e.g., Button) on which you want to add the action.
Select Actions from the Properties panel (the right menu), and click + Add Action.
Search and select the Bottom Sheet (under UI Interactions) action.
To open the bottom sheet, select Show.
Select the Display Component as the component you created for the bottom sheet.
(Optional) set the Height value. You should set the height if you want the bottom sheet to appear only up to some portion of the screen.
Opening Bottom Sheet
Closing Bottom Sheet
Follow the steps below to add an action that closes the bottom sheet:
Select the Widget (e.g., Button, ListTile, Container) on which you want to add the action.
Select Actions from the Properties panel (the right menu), and click + Add Action.
Search and select the Bottom Sheet (under UI Interactions) action.
To open the bottom sheet, select Dismiss.
If you want to return a value from the current bottom sheet, enable the Has Value toggle and pass the value by setting its Data Type and Value Source.
If you enable the Has Value option, you must come back to the action that opens this bottom sheet and provide the Action Output Variable Name. This will be used to retrieve the value from the bottom sheet.
Now you can use the Action Output Variable Name to get the data.
Here is an example of returning the selected user name back to the page.
Closing Bottom Sheet

Timer

Scan Barcode/QR code

Last modified 7mo ago