# How to Create a Custom Confirmation Screen for Your FlutterFlow App

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

## TL;DR

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.

## Before you start

- 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

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

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

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

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

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

File: `FlutterFlow Confirmation Screen`

```text
PAGE: ConfirmationPage
  Route Parameter: orderId (String)
  Backend Query: Document → orders/{orderId}

WIDGET TREE:
  Column (mainAxisAlignment: center, padding: 24)
    ├── LottieAnimation (success_check.json)
    │     autoPlay: true, repeat: false, width: 150
    ├── SizedBox (16)
    ├── Text "Order Confirmed!" (Headline Small, center)
    ├── SizedBox (8)
    ├── Text "Reference: #" + order.referenceNumber (Body Medium, grey)
    ├── SizedBox (24)
    ├── Container (card: borderRadius 12, grey50, padding 16)
    │     └── Column
    │           ├── Row: Text "Items" — Text order.itemCount
    │           ├── Row: Text "Subtotal" — Text order.subtotal
    │           ├── Row: Text "Tax" — Text order.tax
    │           ├── Divider
    │           └── Row: Text "Total" (bold) — Text order.total (bold)
    ├── SizedBox (24)
    ├── Button "Continue Shopping" (Primary, full width)
    │     On Tap: Navigate(Replace) → HomePage
    └── SizedBox (8)
    └── Button "Share" (outlined)
          On Tap: Custom Action → share_plus → share text

NAVIGATION (from form/payment page):
  Navigate (Replace Route) → ConfirmationPage
    orderId: newOrderDocumentId
```

## Common mistakes

- **Using Navigate To instead of Replace Route to reach the confirmation page** — Navigate To keeps the form page in the stack. Users press Back and return to the form, potentially resubmitting the order and creating duplicates. Fix: Always use Navigate with Replace Route for confirmation screens so the form is removed from the navigation stack.
- **Not fetching order data from Firestore on the confirmation page** — If you only pass data via Route Parameters, you are limited by URL length and miss data not passed. If the app restarts, the data is lost. Fix: Pass only the orderId and fetch the full order document via Backend Query. This is reliable and handles app restarts or deep links.
- **Playing the Lottie animation on repeat indefinitely** — A looping success animation is distracting and makes the page feel like it is still loading rather than complete. Fix: 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

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

---

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