FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Ask or search…
⌃K
Links
Comment on page

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. 1.
    Show: This opens the bottom sheet.
  2. 2.
    Dismiss: This closes the bottom sheet.

Opening Bottom Sheet

Follow the steps below to add an action that opens the bottom sheet:
  1. 1.
    Create a bottom sheet component. Tip: you can also create one from the 'BottomSheet' templates.
    Create Bottom Sheet component
  2. 2.
    Select the Widget (e.g., Button) from where you want to open the bottom sheet.
  3. 3.
    Select Actions from the Properties panel (the right menu), and click + Add Action.
  4. 4.
    Search and select the Bottom Sheet (under Widget/UI Interactions) action.
  5. 5.
    To open the bottom sheet, select Show.
  6. 6.
    Select Component as the component you created for the bottom sheet.
  7. 7.
    (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.
  8. 8.
    You can set the Background and Barrier Color for the bottom sheet.
    Set Background and Barrier color
    ​
  9. 9.
    You can also pass parameters to a bottom sheet component.
  10. 10.
    By default, this type of action blocks the following action (if any) from triggering while this action is in progress. (i.e., meaning the bottom sheet is present on the screen). However, in some cases, you might want to allow the next action (after this) to execute, for example, making an API call immediately after showing the bottom sheet. To do so, enable Non Blocking option.
  11. 11.
    By default, Non Dismissble option closes the bottom sheet when you click outside of it. To disable this behavior, enable this option.
  12. 12.
    With Enable Drag option, you can open and close the bottom sheet using a swipe gesture.
  13. 13.
    Optional: If you are returning any value from the bottom sheet, provide the Action Output Variable Name. The result will be stored in this variable.

Closing Bottom Sheet

Follow the steps below to add an action that closes the bottom sheet:
  1. 1.
    Select the Widget (e.g., Button, ListTile, Container) on which you want to add the action.
  2. 2.
    Select Actions from the Properties panel (the right menu), and click + Add Action.
  3. 3.
    Search and select the Bottom Sheet (under Widget/UI Interactions) action.
  4. 4.
    To close the bottom sheet, select Dismiss.
  5. 5.
    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.
    1. 1.
      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.
    2. 2.
      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
Previous
Widget/UI Interactions
Next
Date/Time Picker
Last modified 4mo ago