Create a multi-page onboarding experience using a horizontal PageView with 3-5 slides, each containing an illustration image, headline, and subtitle. Add dot indicators and Skip/Next buttons. Store a hasSeenOnboarding boolean in persisted App State so onboarding shows only on first launch. On app start, check this flag and skip to the home page if already completed. Use Replace Route navigation to prevent back-button return to onboarding.
Building a First-Launch Onboarding Flow in FlutterFlow
Onboarding screens introduce new users to your app's key features on their first launch. Using PageView with persisted App State, you can create a polished multi-slide experience that appears once and never bothers returning users.
Prerequisites
- A FlutterFlow project open in the builder
- Illustration images for each onboarding slide (3-5 images)
- Understanding of App State and PageView in FlutterFlow
Step-by-step guide
Create an App State variable for onboarding completion tracking
Create an App State variable for onboarding completion tracking
Go to App State in the left Navigation Menu. Add a new field called hasSeenOnboarding, type Boolean, default false. Enable the Persisted toggle so this value saves to device storage and survives app restarts. This flag controls whether onboarding shows on launch — once set to true, it stays true permanently until the app is reinstalled.
Expected result: A persisted Boolean App State variable hasSeenOnboarding with default false.
Build the onboarding page with a horizontal PageView of slides
Build the onboarding page with a horizontal PageView of slides
Create a new page called OnboardingPage. Add a Column as the body. Inside, add an Expanded PageView set to horizontal scrolling with page snapping enabled. For each slide (3-5), add a Container child containing a Column (mainAxisAlignment: center): an Image widget at top (illustration, 250x250, fit: contain), SizedBox(32), Text headline (Headline Small, center, bound to slide-specific text), SizedBox(12), Text subtitle (Body Medium, grey, center, max 2 lines). Each slide has unique illustration and copy.
Expected result: A horizontal PageView with 3-5 illustrated slides, each with centered image, headline, and subtitle.
Add dot indicators and Skip/Next buttons below the PageView
Add dot indicators and Skip/Next buttons below the PageView
Below the Expanded PageView in the Column, add a Padding (16px) with a Row (spaceBetween alignment). Left side: TextButton 'Skip' that navigates to home. Center: a Row of dot indicator Containers (8x8 circles, active dot colored Primary and wider at 24px, inactive dots grey). Right side: Button 'Next' (or 'Done' on last slide via Conditional text). Bind dot active state to the PageView controller's current page index using Conditional Styling.
Expected result: Dot indicators below the slides with Skip on left and Next/Done on right.
Wire the Skip and Done buttons to complete onboarding and navigate home
Wire the Skip and Done buttons to complete onboarding and navigate home
On the Skip button On Tap: Update App State → set hasSeenOnboarding to true → Navigate to HomePage with Replace Route. On the Next button: if not last slide, Animate to Next Page. On the Done button (last slide only): Update App State → set hasSeenOnboarding to true → Navigate to HomePage with Replace Route. Replace Route is critical — it removes the onboarding page from the navigation stack so the Back button does not return to it.
Expected result: Skip and Done both save completion and navigate to home without allowing back-navigation to onboarding.
Add the onboarding check on app startup to skip for returning users
Add the onboarding check on app startup to skip for returning users
On your app's initial page (or a router page), add an On Page Load action. Check: if App State hasSeenOnboarding is true → Navigate (Replace Route) to HomePage, skipping onboarding entirely. If false → Navigate (Replace Route) to OnboardingPage. This ensures first-time users see onboarding and returning users go straight to the app.
Expected result: Returning users skip onboarding automatically; first-time users see the full onboarding flow.
Complete working example
1APP STATE:2 hasSeenOnboarding: Boolean = false (Persisted: ON)34PAGE: OnboardingPage5WIDGET TREE:6 Column7 ├── Expanded8 │ └── PageView (horizontal, page snapping: on)9 │ ├── Slide 1: Column(center)10 │ │ Image(welcome.png, 250x250) + Text("Welcome") + Text("Discover features...")11 │ ├── Slide 2: Column(center)12 │ │ Image(track.png, 250x250) + Text("Track Progress") + Text("Monitor your...")13 │ └── Slide 3: Column(center)14 │ Image(start.png, 250x250) + Text("Get Started") + Text("Begin your...")15 └── Padding (16)16 └── Row (spaceBetween)17 ├── TextButton "Skip"18 │ On Tap: Set hasSeenOnboarding=true → Navigate(Replace) Home19 ├── Row (dots)20 │ ├── Container (active: w24 h8 Primary, inactive: w8 h8 grey)21 │ ├── Container (...)22 │ └── Container (...)23 └── Button "Next" / "Done" (Conditional text on last page)24 Next: Animate to Next Page25 Done: Set hasSeenOnboarding=true → Navigate(Replace) Home2627STARTUP CHECK (Initial Page On Load):28 if hasSeenOnboarding == true → Navigate(Replace) HomePage29 else → Navigate(Replace) OnboardingPageCommon mistakes when creating a Custom Onboarding Experience for Your FlutterFlow App
Why it's a problem: Not persisting the onboarding completion flag in App State
How to avoid: Enable the Persisted toggle on the hasSeenOnboarding App State variable so it saves to device storage.
Why it's a problem: Using Navigate To instead of Replace Route after onboarding
How to avoid: Always use Navigate with Replace Route for the onboarding-to-home transition to remove onboarding from the stack.
Why it's a problem: Skipping the startup check for returning users
How to avoid: Add the hasSeenOnboarding check on the initial page's On Page Load to route users directly without showing onboarding.
Best practices
- Limit onboarding to 3-5 slides — more than 5 causes most users to skip
- Use Replace Route for all onboarding exit navigation to prevent back-button return
- Persist the completion flag in App State so it survives app restarts
- Show illustrations that demonstrate actual app features, not generic stock images
- Add a Skip button on every slide for impatient users
- Check the onboarding flag on app startup to avoid flashing the onboarding page for returning users
- Make the last slide's button say 'Get Started' or 'Done' instead of 'Next'
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a first-launch onboarding experience in FlutterFlow with 3-5 slides using PageView. Each slide has an illustration, headline, and subtitle. Include dot indicators, Skip/Next/Done buttons, and persistent App State tracking so it only shows once. Explain the widget tree and action flows.
Create a page with a full-height PageView containing three slides. Each slide is a centered Column with an Image, a heading Text, and a subtitle Text. Add a row below with Skip and Next buttons.
Frequently asked questions
Can I show onboarding again from the settings page?
Yes. Add a button in settings that sets hasSeenOnboarding to false in App State, then navigates to OnboardingPage.
Should onboarding show before or after login?
Best practice is before login for feature introduction, then after login for personalized onboarding. For a simple app, before login is sufficient.
Can I track which slide users drop off on?
Yes. Add an analytics event on each slide view using a Custom Action. Track the slide index to identify where users skip or abandon onboarding.
How do I add animations between slides?
PageView includes a default slide animation. For custom transitions (fade, scale), create a Custom Widget with PageView.builder and a custom PageTransformer.
Can I use Lottie animations instead of static images?
Yes. Replace the Image widget with a LottieAnimation widget on each slide. Set autoPlay to true and repeat to true for looping animations.
Can RapidDev help build a polished onboarding experience?
Yes. RapidDev can create animated onboarding with Lottie, parallax effects, interactive tutorials, and analytics tracking for optimization.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation