FlutterFlow Docs
Search…
Bottom Sheet
A Bottom Sheet is an alternative to a menu or a dialog. When it opens, it prevents the user from interacting with the rest of the app. It opens up from bottom to top and can be dismissed by swiping it from top to bottom.
You can use the bottom sheet when you want to perform a small action without creating a separate screen.

Creating A Bottom Sheet Custom Component

Bottom Sheets are created using a custom component.
Use these steps to create your Bottom Sheet:
  • Click on the Select Page or Component from the Navigation Menu (
    on the left side of your screen).
  • Select the Components panel.
  • Click on the + Create New button at the bottom.
  • Enter a name (e.g. Bottom_Sheet) and click on + Add Component.
  • Now click on the Widget Tree in the left side menu.
  • Add the Container widget and set its Width and Height to inf.
  • Add the Column widget.
  • Now, add the Text Widget inside the Column. Change its name to Add Details and Theme Text Style to Title 1.
  • Add the TextField widget below. Set its Hint Text to Add Item.
  • Similarly, add one more TextField widget and set its Hint Text to Add price.
  • Add a Button widget in the last and change its Text to Add.
You can customize the size of your Bottom Sheet canvas by clicking on Layout Constraints (top middle of your screen).

Action To Open The Bottom Sheet

To open the bottom sheet you need to add an action to open the Bottom Sheet:
  • Add a Button widget into the canvas area and change its Text to Add Expense.
  • Click on the Actions tab (on the right side of your screen).
  • Click on + Add Action and select the On Tap option.
  • Find the Action Type dropdown and change it to Bottom Sheet.
  • Find the Display Component dropdown. Click on the No Component Selected and choose the Component that you created for the bottom sheet.
  • Set the Height (Optional) value to 225. You should set the height if you want the bottom sheet to appear only up to some portion of the screen.
  • Click on the Preview button (on the top right corner) to see the bottom sheet opening and closing.

Changing The Background Color Of Your Bottom Sheet

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:
  • Select Button from the widget tree or from 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, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly.

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:
  • Select Button from the widget tree or from the canvas area.
  • Click on the Actions tab. (Make sure you already have an action added to the button)
  • Scroll down to find the Barrier Color (Optional) property.
  • Click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly.

Adding Rounded Corners

To add rounded corners to the bottom sheet:
  • Select Button from the widget tree or from 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, Move to the property editor section. Scroll down to find the Border Radius property and set it's TL (top left) and TR (top right) to 20.

Making A Full-Screen Bottom Sheet

To make the bottom sheet appear in full screen:
  • Select Button from the widget tree or from 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 infinite. (Click on the
    icon)

Want To See Some Bottom Sheet Examples?

Check out our HealthAI and RobinDo sample apps.
Last modified 1mo ago