# How to Create a Custom Modal for Your FlutterFlow App

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

## TL;DR

FlutterFlow offers two built-in approaches for modals: Show Dialog for centered popups and Show Bottom Sheet for slide-up panels. Both use a Component as content that receives data via Component Parameters and returns results via Action Parameter callbacks. Create your modal Component with a close button, form or content area, and an action button that calls Execute Callback to pass data back to the parent page.

## Building Custom Modals and Bottom Sheets in FlutterFlow

Modals are used for confirmations, forms, pickers, and alerts that require user attention before continuing. FlutterFlow provides built-in Show Dialog and Show Bottom Sheet actions that display any Component as modal content. This tutorial shows how to design modal Components and wire up two-way data passing.

## Before you start

- A FlutterFlow project open in the builder
- Basic understanding of Components and Component Parameters
- A page with a button or action that should trigger the modal

## Step-by-step guide

### 1. Create a modal content Component with close button and action area

Create a new Component called ConfirmationModal. Build the layout: a Container with borderRadius 16, white background, and padding 24. Inside, a Column with: a Row for the header (Text title on left, IconButton X on right), a SizedBox spacer, a Text widget for the message body, another SizedBox, and a Row with Cancel and Confirm buttons using spaceBetween alignment. Add Component Parameters: title (String), message (String), and onConfirm (Action).

**Expected result:** A polished modal Component with header, message, and action buttons ready to receive data.

### 2. Trigger the dialog from a button using the Show Dialog action

On your page, select the button that should open the modal. In the Action Flow Editor, add a Show Dialog action. Select your ConfirmationModal Component as the dialog content. Pass values to the Component Parameters: title as a string like 'Delete Item?', message as 'This action cannot be undone. Are you sure?'. The dialog automatically adds a semi-transparent backdrop and centers your Component on screen.

**Expected result:** Tapping the button opens a centered dialog with your modal Component overlaying the page.

### 3. Return data from the modal using Action Parameter callbacks

In your ConfirmationModal Component, on the Confirm button's On Tap action, add Execute Callback targeting the onConfirm Action Parameter. Then add a Navigator Pop action to close the dialog. On the Cancel button, just add Navigator Pop. Back on the parent page's action flow, after the Show Dialog action, the flow continues when the dialog closes. Add a Conditional Action checking if the callback was executed to perform the confirmed action (e.g., delete the document).

**Expected result:** The parent page receives the confirmation signal and can proceed with the action after the modal closes.

### 4. Build a bottom sheet modal using Show Bottom Sheet action

Create a second Component called FilterBottomSheet with a drag handle Container at top (width 40, height 4, centered, grey, borderRadius 2), then your filter controls below (ChoiceChips, DropDown, Slider, etc.), and an Apply button at the bottom. On the trigger button's action flow, use Show Bottom Sheet instead of Show Dialog. Set height fraction to 0.5 (half screen). Enable isDismissible and enableDrag so users can tap outside or swipe down to close.

**Expected result:** Tapping the button slides a filter panel up from the bottom of the screen.

### 5. Pass filter selections back via Action Parameter callback on Apply

Add Action Parameters to FilterBottomSheet for each filter value you want to return (e.g., onApply with category String, priceRange JSON). On the Apply button's On Tap, call Execute Callback with the selected filter values, then Navigator Pop. The parent page receives the filter data in the action flow after Show Bottom Sheet returns. Use the received values to update a Backend Query filter or Page State.

**Expected result:** Selected filters pass from the bottom sheet back to the parent page for filtering data.

## Complete code example

File: `FlutterFlow Modal Setup`

```text
CONFIRMATION MODAL COMPONENT:
  Container (borderRadius: 16, bg: white, padding: 24)
    └── Column
          ├── Row (mainAxisAlignment: spaceBetween)
          │     ├── Text (title param, Headline Small)
          │     └── IconButton (close icon, onTap: Navigator.pop)
          ├── SizedBox (height: 16)
          ├── Text (message param, Body Medium, grey)
          ├── SizedBox (height: 24)
          └── Row (mainAxisAlignment: spaceBetween)
                ├── Button "Cancel" (outlined, onTap: Navigator.pop)
                └── Button "Confirm" (filled, Primary color)
                      onTap:
                        1. Execute Callback: onConfirm
                        2. Navigator Pop

COMPONENT PARAMETERS:
  title: String (required)
  message: String (required)
  onConfirm: Action (optional)

PARENT PAGE — TRIGGER ACTION FLOW:
  1. Show Dialog → ConfirmationModal
       title: "Delete Item?"
       message: "This cannot be undone."
       onConfirm: [mark as confirmed]
  2. (After dialog closes)
     Conditional: if confirmed → Delete Document

BOTTOM SHEET TRIGGER:
  Show Bottom Sheet → FilterBottomSheet
    height fraction: 0.5
    isDismissible: true
    enableDrag: true
```

## Common mistakes

- **Nesting Show Dialog inside a loop or repeated action** — Each iteration opens another dialog on top of the previous one, creating a stack of overlapping modals that the user must dismiss one by one. Fix: Use a Page State variable to track if a dialog is open. Only call Show Dialog if no dialog is currently showing.
- **Confusing Dialog with Bottom Sheet for the wrong use case** — Dialogs block all background interaction with a modal barrier — appropriate for confirmations. Bottom sheets allow partial background visibility — appropriate for filters and pickers. Using the wrong one creates a confusing experience. Fix: Use Dialog for confirmations, alerts, and input forms. Use Bottom Sheet for filters, pickers, and supplementary content.
- **Not adding Navigator Pop after Execute Callback in the modal** — The modal stays open after the action completes, and the user has to manually close it. This feels broken. Fix: Always add Navigator Pop after Execute Callback in the modal's action button to close the modal automatically.

## Best practices

- Use Show Dialog for blocking confirmations and inputs that require full attention
- Use Show Bottom Sheet for filters, pickers, and supplementary content
- Always add a close mechanism — X button, Cancel button, or backdrop tap
- Pass data to modals via Component Parameters and return results via Action Parameter callbacks
- Add a drag handle bar at the top of bottom sheets as a visual affordance for dragging
- Keep modal content concise — if it needs scrolling, consider a full page instead
- Use Navigator Pop after Execute Callback to auto-close the modal

## Frequently asked questions

### Can I have a full-screen modal in FlutterFlow?

Use Show Bottom Sheet with height fraction set to 1.0 for a full-screen slide-up modal. Alternatively, navigate to a new page with a transparent background for a full-screen overlay effect.

### How do I prevent the user from dismissing the modal by tapping outside?

Set isDismissible to false in the Show Dialog or Show Bottom Sheet action settings. The user must use your explicit close/cancel button.

### Can I open a modal from inside another modal?

Technically yes, but it creates a confusing UX with stacked modals. Instead, replace the first modal's content or navigate to a new page for complex flows.

### How do I animate the modal appearance?

Show Dialog and Show Bottom Sheet include default animations (fade and slide-up respectively). For custom animations, you need a Custom Widget with AnimationController.

### Can I reuse one modal Component for different messages?

Yes — that is the recommended pattern. Pass different title and message strings via Component Parameters each time you call Show Dialog.

### Can RapidDev help build complex modal workflows?

Yes. RapidDev can create multi-step modals, animated transitions, nested forms, and modals with real-time data that go beyond the built-in capabilities.

---

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