# How to Create a Custom Bottom Sheet for Your FlutterFlow App

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: FlutterFlow Free+
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `FlutterFlow Bottom Sheet Setup`

```text
FILTER SHEET COMPONENT:
  Parameters: onApply (Action<Map>), initialCategory (String, optional)
  Component State: selectedCategory, priceMin, priceMax, filters

  Column
    ├── Center → Container (w:40 h:4 radius:2 grey400) — drag handle
    ├── SizedBox (16)
    ├── Text "Filters" (Title Medium)
    ├── SizedBox (16)
    ├── ChoiceChips (categories, bound to selectedCategory)
    ├── SizedBox (12)
    ├── Slider (price range, bound to Component State)
    ├── SizedBox (12)
    ├── CheckboxGroup (additional filters)
    ├── SizedBox (24)
    └── Row
          ├── TextButton "Reset" → clear all Component State
          └── Button "Apply Filters" (Primary)
                On Tap:
                  1. Execute Callback onApply({category, priceMin, priceMax, filters})
                  2. Navigator Pop

ACTION MENU COMPONENT:
  Parameters: onSelect (Action<String>)
  Column
    ├── Drag handle
    ├── Row: Icon(edit) + Text "Edit" → onSelect("edit") + Pop
    ├── Row: Icon(share) + Text "Share" → onSelect("share") + Pop
    ├── Row: Icon(delete, red) + Text "Delete" (red) → onSelect("delete") + Pop

TRIGGER:
  Show Bottom Sheet
    Component: FilterSheet
    Height Fraction: 0.6
    isDismissible: true
    enableDrag: true
```

## Common mistakes

- **Not adding a drag handle indicator at the top of the bottom sheet** — Without the drag handle bar, users do not realize the sheet is draggable and think it is a fixed dialog. They look for an X button to close it. Fix: Always add the small horizontal bar (40x4px, grey, rounded) centered at the top of every bottom sheet as a universal drag affordance.
- **Setting height fraction too small for the content** — If the sheet content is taller than the height fraction allows, content gets clipped or requires scrolling within the sheet, which creates a confusing double-scroll experience. Fix: Set height fraction to accommodate your content. Wrap content in SingleChildScrollView if the content may exceed the sheet height on small screens.
- **Forgetting to call Navigator Pop after Execute Callback** — The bottom sheet stays open after the user taps Apply or selects an action. They must manually dismiss it, which feels broken. Fix: 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)

## 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.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-bottom-sheet-for-your-flutterflow-app
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-bottom-sheet-for-your-flutterflow-app