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.
Prerequisites
- 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
Create a modal content Component with close button and action area
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.
Trigger the dialog from a button using the Show Dialog action
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.
Return data from the modal using Action Parameter callbacks
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.
Build a bottom sheet modal using Show Bottom Sheet action
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.
Pass filter selections back via Action Parameter callback on Apply
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 working example
1CONFIRMATION MODAL COMPONENT:2 Container (borderRadius: 16, bg: white, padding: 24)3 └── Column4 ├── Row (mainAxisAlignment: spaceBetween)5 │ ├── Text (title param, Headline Small)6 │ └── IconButton (close icon, onTap: Navigator.pop)7 ├── SizedBox (height: 16)8 ├── Text (message param, Body Medium, grey)9 ├── SizedBox (height: 24)10 └── Row (mainAxisAlignment: spaceBetween)11 ├── Button "Cancel" (outlined, onTap: Navigator.pop)12 └── Button "Confirm" (filled, Primary color)13 onTap:14 1. Execute Callback: onConfirm15 2. Navigator Pop1617COMPONENT PARAMETERS:18 title: String (required)19 message: String (required)20 onConfirm: Action (optional)2122PARENT PAGE — TRIGGER ACTION FLOW:23 1. Show Dialog → ConfirmationModal24 title: "Delete Item?"25 message: "This cannot be undone."26 onConfirm: [mark as confirmed]27 2. (After dialog closes)28 Conditional: if confirmed → Delete Document2930BOTTOM SHEET TRIGGER:31 Show Bottom Sheet → FilterBottomSheet32 height fraction: 0.533 isDismissible: true34 enableDrag: trueCommon mistakes when creating a Custom Modal for Your FlutterFlow App
Why it's a problem: Nesting Show Dialog inside a loop or repeated action
How to avoid: Use a Page State variable to track if a dialog is open. Only call Show Dialog if no dialog is currently showing.
Why it's a problem: Confusing Dialog with Bottom Sheet for the wrong use case
How to avoid: Use Dialog for confirmations, alerts, and input forms. Use Bottom Sheet for filters, pickers, and supplementary content.
Why it's a problem: Not adding Navigator Pop after Execute Callback in the modal
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to build a custom confirmation dialog in FlutterFlow that receives a title and message via Component Parameters and returns a boolean via Action Parameter callback. Also show how to build a filter bottom sheet that returns selected values. Explain the widget tree and action flow for both.
Create a Component with a white Container, rounded corners, a title text, a message text, and two buttons: Cancel and Confirm side by side.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation