After a successful order, payment, or booking, show a confirmation screen with an animated checkmark, summary of the completed action, a reference number, and Continue/Share buttons. Navigate to this page with Replace Route to prevent users from pressing Back and resubmitting. Pass the order ID via Route Parameter and fetch details with a Backend Query. Use a Lottie animation for the success checkmark and the share_plus package for native sharing.
Building a Confirmation Screen After Successful Actions
Confirmation screens provide closure after important actions like payments, bookings, and form submissions. This tutorial builds a professional confirmation page that prevents accidental resubmission and offers sharing functionality.
Prerequisites
- A FlutterFlow project with Firestore configured
- A Lottie success animation JSON file (free from LottieFiles.com)
- An orders or bookings collection in Firestore
- Understanding of Route Parameters and Replace Route navigation
Step-by-step guide
Navigate to the confirmation page with Replace Route and order ID
Navigate to the confirmation page with Replace Route and order ID
After a successful order creation or payment webhook, add a Navigate action with Replace Route (not Navigate To) targeting ConfirmationPage. Pass the orderId as a Route Parameter. Replace Route removes the form page from the navigation stack so users cannot press Back and resubmit the form. This is the most important step for preventing duplicate submissions.
Expected result: Navigation removes the form from the stack and opens the confirmation page with the order ID.
Fetch order details from Firestore using the Route Parameter
Fetch order details from Firestore using the Route Parameter
On ConfirmationPage, add a Backend Query: Query Document for orders/{orderId} where orderId comes from the Route Parameter. Bind the query result to the page widgets. This fetches the complete order details (items, total, payment status, reference number) for display on the confirmation screen.
Expected result: Order data loads from Firestore and is available for binding to page widgets.
Build the confirmation layout with Lottie animation and summary card
Build the confirmation layout with Lottie animation and summary card
Page layout: Column (center alignment). First child: LottieAnimation widget with your success checkmark file (autoPlay: true, repeat: false, width: 150, height: 150). Below: Text 'Order Confirmed!' (Headline Small, center). SizedBox(8). Text 'Reference: #' + order.referenceNumber (Body Medium, grey). SizedBox(24). Container (card styling: borderRadius 12, grey50 background, padding 16) containing a Column of Row items showing order details — each Row has a label Text and a value Text.
Expected result: An animated checkmark plays once, followed by a heading, reference number, and order summary card.
Add Continue and Share buttons at the bottom
Add Continue and Share buttons at the bottom
Below the summary card, add SizedBox(24), then a Column with two buttons. Button 'Continue Shopping' (Primary, full width, On Tap: Navigate to HomePage with Replace Route). Button 'Share Confirmation' (outlined style, On Tap: Custom Action using share_plus package to open the native share sheet with a text message like 'Order #REF123 confirmed! Total: $49.99'). The share action lets users send confirmation to others or save it.
Expected result: Two action buttons let users continue to the app home or share the confirmation details.
Generate a reference number for the order
Generate a reference number for the order
If your orders collection does not already have a reference number, generate one in the order creation action flow using a Custom Function. A simple approach: format the current timestamp as a readable string (e.g., 'ORD-' + year + month + day + random 4 digits). Alternatively, use the Firestore document ID truncated to 8 characters. Store the reference number in the order document for future lookup.
Expected result: Each order has a unique reference number displayed on the confirmation screen.
Complete working example
1PAGE: ConfirmationPage2 Route Parameter: orderId (String)3 Backend Query: Document → orders/{orderId}45WIDGET TREE:6 Column (mainAxisAlignment: center, padding: 24)7 ├── LottieAnimation (success_check.json)8 │ autoPlay: true, repeat: false, width: 1509 ├── SizedBox (16)10 ├── Text "Order Confirmed!" (Headline Small, center)11 ├── SizedBox (8)12 ├── Text "Reference: #" + order.referenceNumber (Body Medium, grey)13 ├── SizedBox (24)14 ├── Container (card: borderRadius 12, grey50, padding 16)15 │ └── Column16 │ ├── Row: Text "Items" — Text order.itemCount17 │ ├── Row: Text "Subtotal" — Text order.subtotal18 │ ├── Row: Text "Tax" — Text order.tax19 │ ├── Divider20 │ └── Row: Text "Total" (bold) — Text order.total (bold)21 ├── SizedBox (24)22 ├── Button "Continue Shopping" (Primary, full width)23 │ On Tap: Navigate(Replace) → HomePage24 └── SizedBox (8)25 └── Button "Share" (outlined)26 On Tap: Custom Action → share_plus → share text2728NAVIGATION (from form/payment page):29 Navigate (Replace Route) → ConfirmationPage30 orderId: newOrderDocumentIdCommon mistakes when creating a Custom Confirmation Screen for Your FlutterFlow App
Why it's a problem: Using Navigate To instead of Replace Route to reach the confirmation page
How to avoid: Always use Navigate with Replace Route for confirmation screens so the form is removed from the navigation stack.
Why it's a problem: Not fetching order data from Firestore on the confirmation page
How to avoid: Pass only the orderId and fetch the full order document via Backend Query. This is reliable and handles app restarts or deep links.
Why it's a problem: Playing the Lottie animation on repeat indefinitely
How to avoid: Set repeat: false on the LottieAnimation widget so it plays the success checkmark once and stops.
Best practices
- Use Replace Route navigation to prevent back-button resubmission
- Fetch full order details from Firestore using the orderId Route Parameter
- Play the Lottie success animation once (repeat: false) for a polished completion feel
- Include a reference number for user record-keeping and support inquiries
- Add a Share button using share_plus for native platform sharing
- Provide a Continue button that navigates home as the primary action
- Generate reference numbers during order creation for consistent display
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build an order confirmation screen in FlutterFlow with a Lottie success animation, order summary card, reference number, and Continue/Share buttons. Use Replace Route to prevent form resubmission. Show the widget tree and navigation setup.
Create a centered page with a Lottie animation area, a heading, a reference number text, a card container for order details, and two buttons at the bottom.
Frequently asked questions
Can I send a confirmation email from this page?
Trigger the email from a Cloud Function when the order document is created in Firestore, not from the confirmation page. This ensures the email sends even if the user does not reach the confirmation screen.
How do I handle the case where the user shares the confirmation URL?
Set the confirmation page to require authentication. If a shared URL is opened by someone else, redirect them to login first, then check if the orderId belongs to their account.
Can I add a QR code for ticket-type confirmations?
Yes. Use a Custom Widget with the qr_flutter package to generate a QR code from the reference number or order ID. Display it on the confirmation page for scanning at venues.
Should I show the confirmation page for failed payments?
No. Only navigate to the confirmation page after verified successful payment. For failures, show an error state on the checkout page with a retry option.
Can I save the confirmation as a PDF?
Yes. Use a Custom Action with the pdf package to generate a PDF receipt from the order data, then use share_plus to share the file or save to device.
Can RapidDev help build order confirmation flows?
Yes. RapidDev can build confirmation pages with PDF receipts, QR codes, email notifications, push notifications, and order tracking integration.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation