FlutterFlow supports two layers of splash screen: a native splash that shows instantly on app launch (configured in Settings → Design → Splash Screen), and a custom animated splash Page that shows after the Flutter engine loads. This tutorial covers both — configure the native splash with your brand color and logo, then build an animated splash page with a Lottie animation and timed navigation using On Page Load → Wait → Navigate with Replace Route.
Two-layer splash screen setup in FlutterFlow
A splash screen creates a professional first impression when users open your app. FlutterFlow has a built-in native splash configuration that shows immediately on app launch (before the Flutter engine loads), plus you can build a custom animated splash Page for a branded experience after the engine starts. This tutorial sets up both layers so your app transitions smoothly from launch to your home screen.
Prerequisites
- A FlutterFlow project open in the builder
- Your app logo in PNG format (recommended 512×512 or larger)
- Optional: a Lottie animation JSON file for animated splash
- Your brand's primary color hex code
Step-by-step guide
Configure the native splash screen in Settings
Configure the native splash screen in Settings
Go to Settings → Design → Splash Screen in FlutterFlow. Set the Background Color to your brand's primary color (use the hex color picker). Upload your app logo under Logo Image — use a PNG with transparent background, ideally 512×512px. Set the Logo Size percentage (50-70% of screen width works well). This native splash shows the instant the app launches, before any Flutter code runs, giving users immediate visual feedback.
Expected result: Previewing the app shows your brand color and logo immediately on launch.
Create a custom splash Page with an animated logo
Create a custom splash Page with an animated logo
Create a new Page named SplashPage. Set the Scaffold background color to match your native splash background (same hex code for seamless transition). Add a Column with mainAxisAlignment: center and crossAxisAlignment: center. Inside, add either an Image widget (for static logo) or a LottieAnimation widget (for animated logo). For Lottie: upload your .json animation file to assets, set the Lottie widget to autoPlay: true and repeat: false so it plays once. Below the animation, optionally add a Text widget with your app name or tagline.
Expected result: The splash page shows a centered animated logo on the brand background color.
Add timed auto-navigation to the home page
Add timed auto-navigation to the home page
Select the SplashPage and go to Action Triggers → On Page Load. Add an action flow: Wait action (set duration to 2500 milliseconds — enough for the animation to complete) → Navigate To action (select your HomePage). CRITICAL: set the Navigate action to Replace Route, NOT regular Navigate To. Replace Route removes the splash from the navigation stack so users cannot press Back to return to it.
Expected result: App launches → native splash → animated splash page plays for 2.5 seconds → auto-navigates to home page.
Set SplashPage as the entry point
Set SplashPage as the entry point
Go to Settings → Authentication → Initial Page (for unauthenticated users) and set it to SplashPage. If you use authentication, the flow becomes: SplashPage (all users) → checks auth state → if logged in: Navigate to HomePage (Replace Route) → if not logged in: Navigate to LoginPage (Replace Route). Implement this by adding a Conditional Action after the Wait that checks Global Property 'Is User Logged In'.
Expected result: The SplashPage is the first page every user sees, regardless of auth status.
Handle code-exported projects with flutter_native_splash
Handle code-exported projects with flutter_native_splash
If you export your FlutterFlow code, the native splash configuration translates to the flutter_native_splash package in pubspec.yaml. The settings you configured in FlutterFlow (background color, logo, logo size) map directly to the package's YAML configuration. After export, you can further customize by editing the flutter_native_splash section in pubspec.yaml — add a different splash for dark mode, change Android 12+ splash behavior, or add a branding image at the bottom.
Expected result: Exported project has properly configured native splash that matches your FlutterFlow settings.
Complete working example
1Page: SplashPage2Route: /splash3Requires Authentication: OFF4Background Color: #1A1A2E (your brand color)56Widget Tree:7├── Scaffold (backgroundColor: Theme.primaryBackground)8│ └── Column (mainAxisAlignment: center, crossAxisAlignment: center)9│ ├── SizedBox (height: 40)10│ ├── LottieAnimation11│ │ ├── Asset: assets/lottie/logo_animation.json12│ │ ├── Width: 20013│ │ ├── Height: 20014│ │ ├── AutoPlay: true15│ │ ├── Repeat: false16│ │ └── Fit: contain17│ ├── SizedBox (height: 24)18│ ├── Text19│ │ ├── Value: "Your App Name"20│ │ ├── Style: headlineMedium21│ │ └── Color: Theme.primaryText (white for dark bg)22│ └── SizedBox (height: 8)23│ └── Text24│ ├── Value: "Your tagline here"25│ ├── Style: bodyMedium26│ └── Color: Theme.secondaryText2728Action Flow (On Page Load):29├── Wait: 2500 ms30├── Conditional Action:31│ ├── IF: Global Property → Is User Logged In == true32│ │ └── Navigate To: HomePage (Replace Route: ON)33│ └── ELSE:34│ └── Navigate To: LoginPage (Replace Route: ON)3536Native Splash (Settings → Design → Splash Screen):37├── Background Color: #1A1A2E38├── Logo Image: assets/images/logo_white.png39├── Logo Size: 60%40└── Animation Duration: 0 (instant — animation is on the Flutter page)Common mistakes when creating a custom splash screen for your FlutterFlow app
Why it's a problem: Using Navigate To instead of Replace Route after splash
How to avoid: Always use Replace Route for splash-to-home navigation. This swaps the current route so the splash is removed from the stack.
Why it's a problem: Setting Wait duration shorter than the Lottie animation
How to avoid: Set the Wait duration to match or slightly exceed your Lottie animation duration. If the animation is 2 seconds, set Wait to 2500ms for a clean finish.
Why it's a problem: Different background colors between native splash and Flutter splash page
How to avoid: Use the exact same hex color for both the native splash Background Color and the SplashPage Scaffold backgroundColor.
Best practices
- Match the native splash and Flutter splash page background colors exactly for a seamless transition
- Keep the total splash duration under 3 seconds — longer splashes frustrate returning users
- Use Replace Route for all splash-to-main navigation to prevent Back button issues
- Store an App State flag to skip the animated splash for returning users (show native splash only)
- Use Lottie for animations instead of GIF — Lottie is vector-based, smaller file size, and crisper
- Test the splash on slow devices — if the Flutter engine takes time to load, the native splash covers the gap
- Add your brand name below the logo for reinforcement during the splash
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to set up a two-layer splash screen in FlutterFlow — a native splash configured in settings and a custom animated splash page with a Lottie animation that auto-navigates to the home page after 2.5 seconds using Replace Route. Give me the complete widget tree and action flow.
Create a splash page with a dark blue background (#1A1A2E), a centered Lottie animation widget (200x200), the app name below it in white headlineMedium text, and a tagline in secondary text color. Add an On Page Load action that waits 2.5 seconds then navigates to HomePage with Replace Route.
Frequently asked questions
What's the difference between native splash and Flutter splash?
Native splash is rendered by the OS before Flutter starts — it shows immediately on app launch with no delay. The Flutter splash page is a regular FlutterFlow page that loads after the Flutter engine initializes (200ms-2s depending on device). You need both for a seamless experience.
Can I skip the splash for returning users?
Yes. Add an App State variable hasSeenSplash (bool, persisted). On Page Load: check this value → if true, immediately Navigate to home (skip the Wait). Set it to true after the first splash completes.
Does the splash screen work on web?
The native splash shows briefly on web (browser loading). The Flutter splash page works normally. For web, consider a lighter splash since web apps load faster and users expect instant access.
Can I add a progress bar to the splash?
Yes. Add a LinearPercentIndicator below the logo. Animate its value from 0 to 1 over the Wait duration using a Custom Action with a Timer that updates Page State every 100ms. This gives users a sense of progress.
What file format should I use for the logo?
PNG with transparent background for the native splash (it's rendered on the solid background color). For the Flutter splash page, PNG or SVG both work. Lottie JSON for animated logos. Avoid GIF — it's larger and lower quality than Lottie.
My splash flickers between native and Flutter — how to fix?
This happens when the background colors don't match exactly. Copy the exact hex code from Settings → Splash Screen → Background Color and paste it as the SplashPage Scaffold background color. Also ensure the logo is positioned identically.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation