Bottom sheets slide up from the screen bottom and are ideal for filters, pickers, action menus, and detail previews. Use FlutterFlow's Show Bottom Sheet action to display any Component as sheet content. Configure height fraction (0.5 for half screen, 1.0 for full), isDismissible, and enableDrag. Add a drag handle Container at the top as visual affordance. Return selected data to the parent page via Action Parameter callbacks on the Apply or Select buttons.
Building Custom Bottom Sheets in FlutterFlow
Bottom sheets are one of the most versatile UI patterns in mobile apps. Unlike dialogs, they allow partial background visibility and feel more natural on touch devices. This tutorial builds three patterns: filter sheet, action menu, and detail preview.
Prerequisites
- A FlutterFlow project open in the builder
- Understanding of Components and Action Parameters
- A page with a trigger button for the bottom sheet
Step-by-step guide
Create a bottom sheet Component with a drag handle
Create a bottom sheet Component with a drag handle
Create a Component called FilterSheet. Start with a Column. First child: a Center-aligned Container (width 40, height 4, borderRadius 2, grey400 background) as the drag handle. This small bar at the top signals to users that the sheet is draggable. Below the handle: SizedBox(16), then your content area. The drag handle is a universal UX pattern — users intuitively know to pull it down to close.
Expected result: A Component with a drag handle bar at the top ready for content below.
Build a filter bottom sheet with options and an Apply button
Build a filter bottom sheet with options and an Apply button
Below the drag handle in FilterSheet, add: Text 'Filters' (Title Medium), SizedBox(16), ChoiceChips for category selection (bind to Component State selectedCategory), SizedBox(12), a PriceRangeSlider or Slider for price range, SizedBox(12), CheckboxGroup for additional filters (ratings, availability), SizedBox(24), Row with TextButton 'Reset' (clears all selections) and Button 'Apply Filters' (Primary, full width). Add Component Parameters: onApply (Action with selected filter values).
Expected result: A filter panel with category chips, price slider, checkboxes, reset, and apply button.
Configure Show Bottom Sheet action with height and drag options
Configure Show Bottom Sheet action with height and drag options
On your page's filter button, add a Show Bottom Sheet action. Select the FilterSheet Component. Set Height Fraction to 0.6 (60% of screen). Enable isDismissible so tapping the background area closes the sheet. Enable enableDrag so users can swipe down to close. Pass any initial filter values as Component Parameters if you want to restore previous selections.
Expected result: Tapping the filter button slides the bottom sheet up to 60% screen height with drag and dismiss enabled.
Return filter selections via Action Parameter callback on Apply
Return filter selections via Action Parameter callback on Apply
In the FilterSheet Component, on the Apply Filters button tap: Execute Callback on the onApply Action Parameter, passing the selected category, price range, and checkbox values. Then add Navigator Pop to close the sheet. On the parent page, after the Show Bottom Sheet action, the action flow continues. Use the received filter values to update Backend Query parameters or Page State filters, then refresh the data list.
Expected result: Selected filters pass from the bottom sheet back to the parent page for data filtering.
Build an action menu bottom sheet as an alternative pattern
Build an action menu bottom sheet as an alternative pattern
Create a Component called ActionMenuSheet for contextual actions (edit, share, delete, report). Layout: Column with drag handle, then a list of Row items — each Row has an Icon, Text label, and On Tap action. On tap: Execute Callback with the selected action string, then Navigator Pop. Style the delete option in red for visual distinction. This pattern replaces context menus and is more mobile-friendly.
Expected result: An action menu bottom sheet with tappable options that return the selected action to the parent.
Complete working example
1FILTER SHEET COMPONENT:2 Parameters: onApply (Action<Map>), initialCategory (String, optional)3 Component State: selectedCategory, priceMin, priceMax, filters45 Column6 ├── Center → Container (w:40 h:4 radius:2 grey400) — drag handle7 ├── SizedBox (16)8 ├── Text "Filters" (Title Medium)9 ├── SizedBox (16)10 ├── ChoiceChips (categories, bound to selectedCategory)11 ├── SizedBox (12)12 ├── Slider (price range, bound to Component State)13 ├── SizedBox (12)14 ├── CheckboxGroup (additional filters)15 ├── SizedBox (24)16 └── Row17 ├── TextButton "Reset" → clear all Component State18 └── Button "Apply Filters" (Primary)19 On Tap:20 1. Execute Callback onApply({category, priceMin, priceMax, filters})21 2. Navigator Pop2223ACTION MENU COMPONENT:24 Parameters: onSelect (Action<String>)25 Column26 ├── Drag handle27 ├── Row: Icon(edit) + Text "Edit" → onSelect("edit") + Pop28 ├── Row: Icon(share) + Text "Share" → onSelect("share") + Pop29 ├── Row: Icon(delete, red) + Text "Delete" (red) → onSelect("delete") + Pop3031TRIGGER:32 Show Bottom Sheet33 Component: FilterSheet34 Height Fraction: 0.635 isDismissible: true36 enableDrag: trueCommon mistakes when creating a Custom Bottom Sheet for Your FlutterFlow App
Why it's a problem: Not adding a drag handle indicator at the top of the bottom sheet
How to avoid: Always add the small horizontal bar (40x4px, grey, rounded) centered at the top of every bottom sheet as a universal drag affordance.
Why it's a problem: Setting height fraction too small for the content
How to avoid: Set height fraction to accommodate your content. Wrap content in SingleChildScrollView if the content may exceed the sheet height on small screens.
Why it's a problem: Forgetting to call Navigator Pop after Execute Callback
How to avoid: Always add Navigator Pop after Execute Callback in action buttons to auto-close the sheet.
Best practices
- Add a drag handle Container at the top of every bottom sheet for visual affordance
- Set isDismissible and enableDrag to true for natural touch interaction
- Return data via Action Parameter callbacks on Apply/Select buttons
- Call Navigator Pop after Execute Callback to auto-close the sheet
- Set height fraction between 0.4 and 0.7 — avoid tiny or full-screen sheets
- Wrap content in SingleChildScrollView if it may exceed sheet height
- Use bottom sheets for filters, action menus, and detail previews — not for confirmations (use dialogs)
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build custom bottom sheets in FlutterFlow for filter selection and action menus. Show the Component layout with drag handle, how to trigger via Show Bottom Sheet, and how to return selected data via Action Parameter callbacks.
Create a Component with a small grey bar centered at the top, a heading text, some choice chips, a slider, and a full-width Apply button at the bottom.
Frequently asked questions
Can I have a scrollable content area inside a bottom sheet?
Yes. Wrap your content in a SingleChildScrollView within the Component. If using a ListView, it works naturally. FlutterFlow handles the nested scroll interaction.
How do I make a full-screen bottom sheet?
Set height fraction to 1.0 in the Show Bottom Sheet action. Add a close button (X icon) at the top since full-screen sheets cannot be dismissed by tapping outside.
Can I prevent the bottom sheet from being dismissed?
Set isDismissible to false. Users must use your explicit close or action buttons. Use this for required selections where dismissing without choosing is not acceptable.
Can bottom sheets be nested (one opening another)?
Technically yes, but it creates confusing UX. Instead, update the content of the current bottom sheet or navigate to a new page for multi-step flows.
How do I remember the last filter selection?
Store selected filters in Page State or App State. Pass them as Component Parameters when opening the bottom sheet so previous selections are pre-filled.
Can RapidDev help build advanced bottom sheet interactions?
Yes. RapidDev can create multi-step bottom sheets, expandable sheets with DraggableScrollableSheet, and complex filter systems with dependent dropdowns.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation