How to Add a Splash Screen in Flutter
Welcome to Day 2 of building HeartLine💝!
Today, I focused on creating a compelling logo and setting up a professional splash screen for the app.
Both elements are vital for establishing a strong first impression and visual identity.
Here’s a detailed walkthrough of the process, especially how to add a splash screen in Flutter.
Contents
Designing the HeartLine Logo
Before diving into the splash screen, the first step was designing the app’s logo.
While AI tools offer quick results, they lacked the personality HeartLine needed.
Instead, I used Canva to create a custom logo that reflects warmth, approachability, and adaptability to both light and dark themes.
Dark Theme Logo:
Light Theme Logo:
How to Add a Splash Screen in Flutter
A splash screen is the app’s first interaction with users, making it crucial to leave a lasting impression.
Here’s a step-by-step guide to adding a splash screen in Flutter:
Step 1: Add the flutter_native_splash Package
Begin by adding the flutter_native_splash
package to your project.
This package simplifies the process of configuring splash screens for multiple platforms.
In your pubspec.yaml
, include the dependency and specify the asset paths:
flutter_native_splash: ^2.3.11
assets:
- assets/logos/
Step 2: Configure splash.yaml
Create a splash.yaml
file and define the splash screen settings, ensuring compatibility with both light and dark themes:
flutter_native_splash:
color: "#FFFFFF" # Light theme background
color_dark: "#272727" # Dark theme background
image: assets/logos/heartline_logo.png # Logo for light theme
image_dark: assets/logos/heartline_logo_dark.png # Logo for dark theme
android_12:
color: "#FFFFFF"
color_dark: "#272727"
image: assets/logos/heartline_logo.png
image_dark: assets/logos/heartline_logo_dark.png
web: false
Step 3: Generate the Splash Screen
Run the following command to build the splash screen:
dart run flutter_native_splash:create --path=splash.yaml
Command Output
If everything is configured correctly, you’ll see a confirmation message like this:
✅ Native splash complete.
Now go finish building something awesome! 💪 You rock! 🤘🤩
And that’s it! Your Flutter app now has a fully functional splash screen.
Day 2 Recap: Key Takeaways
Momentum: Setting up these visuals early keeps the project motivating and on track.
Logo Design: Creating a logo that resonates with your app’s values is as important as its functionality.
Splash Screen Setup: Adding a splash screen in Flutter is straightforward with the flutter_native_splash
package.
If you’re building your Flutter app, I hope this guide helps you understand how to add a splash screen in Flutter.
Feel free to share your feedback or ask questions in the comments.
Stay tuned for tomorrow’s update, where I’ll tackle Onboarding Screen design. 😊