Blog

Day 2: How to Add a Splash Screen in Flutter

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.

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.

How to Add a Splash Screen in Flutter dark theme
How to Add a Splash Screen in Flutter light theme

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

Leave a Reply