Bottom Sheet

A Bottom Sheet is an alternative to a menu or a dialog. It opens from bottom to top and can be dismissed by swiping it from top to bottom. When it opens, it prevents the user from interacting with the rest of the app. 
You can use the bottom sheet when you want to perform a small action without creating a separate screen.
Bottom Sheet
Adding bottom sheet
Adding the bottom sheet comprises the following steps:
1.​Creating a component​
2.​Opening bottom sheet​
Creating a component
Bottom Sheets are created using a component. See how to create it from scratch or use the templates.
You can customize the size of your Bottom Sheet canvas by resizing the Handle Bars.
Creating bottom sheet component
Opening bottom sheet
You can open the bottom sheet by adding the action. See how to do it on the following page:
Bottom Sheet
Return a value from bottom sheet
Sometimes you might want to return a value from a bottom sheet to the page that opened it—for example, passing the selected item from the bottom sheet to the page and displaying it.
Something like this:
Return a value from a bottom sheet
You can do so by passing the value while you add the dismiss action.
Changing the background color
Changing the background color won't have any effect if you have already set the background color in your Bottom Sheet directly (e.g., container Background).
To change the background color, find the Background Color property and change the color.
Changing the barrier color
Changing Barrier Color allows you to change the color of the barrier that separates the bottom sheet from the main space.
To change the barrier color, find the Barrier Color property and change the color.
Adding rounded corners
To add rounded corners to the bottom sheet:
Select the Button from the widget tree or the canvas area. 
Click on the Actions tab. (Make sure you already have an action added to the button)
Scroll down to find the Background Color (Optional) property.
Click on the box next to Unset, use the second slider (right side), and bring the handle to the start (left) of the slider to make the color transparent.
Similarly, set the Barrier Color to transparent as well.
Now open the component for the bottom sheet.
Select the Container widget, and Move to the property editor section. Scroll down to find the Border Radius property and set its TL (top left) and TR (top right) to 20.
Adding rounded corners
Making a full-screen bottom sheet
To make the bottom sheet appear in full screen:
Select the Button from the widget tree or the canvas area. 
Click on the Actions tab. (Make sure you already have an action added to the button)
Scroll down to find the Height property and make it infinite. (Click on the
icon) 
Making a full-screen bottom sheet
Adding transparent background
To make a bottom sheet with a transparent background:
Select "Background Color" and make sure the opacity is set to 0% - this will give you "transparent" instead of "unset.
Set the barrier color to whatever you want, and your bottom sheet will have no set background color.
Adding transparent background
Want to see some bottom sheet examples?
Check out our HealthAI and RobinDo sample apps.

Last modified 1mo ago