Mastering the Flutter On boarding: A Guide Through Splash Screens, App Icons

7 min readFeb 19, 2024

Starting with Flutter is like setting off on a new adventure, and like any journey, it comes with its own set of challenges. In this blog, we’ll explore some common roadblocks that newcomers often face when diving into Flutter development and share practical solutions to make your start smoother.

1. Making a Great First Impression with Splash Screens:

Ever opened an app and seen its logo or animation before the main screen? That’s the splash screen! Customizing it in Flutter can be a bit tricky initially, especially if you want it to match your app’s vibe. We’ll guide you through personalizing your splash screen to make a memorable first impression.

Problem: By default, during this time, the native app displays a white splash screen. Also Every iOS app must provide a launch screen, a screen that displays while your app launches. The launch screen appears instantly when your app starts up and is quickly replaced with the app’s first screen.

Solution: Tackling the splash screen challenge in Flutter can be a bit tricky, especially when dealing with different platforms like Android, iOS, and Web. But fear not, there’s a handy solution called flutter_native_splash that makes this process a breeze.

1. Add flutter_native_splash pubspec dependency.

Add flutter native splash
flutter pub add flutter_native_splash

2. Choose between creating a separate YAML file for flutter_native_splash configuration or adding the configuration directly to the existing pubspec.yaml. In this example, I've added all the configuration details to the default pubspec.yaml file.


name: my_app
description: "my Application"

publish_to: "none" # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=3.2.2 <4.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.6
  flutter_native_splash: ^2.3.10

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^3.0.1
  build_runner: ^2.4.8

flutter:
  uses-material-design: true
  assets:
    - assets/logo/

flutter_native_splash:
  # Use color to set the background of your splash screen to a solid color.
  # Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#ffffff"
  #background_image: "assets/background.png"

  # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing
  # the leading # character.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a
  # png/jpg file and should be sized for 4x pixel density.
  image: assets/logo/app_logo.png

  # The branding property allows you to specify an image used as branding in the splash screen.
  # It must be a png file. It is supported for Android, iOS and the Web.  For Android 12,
  # see the Android 12 section below.
  #branding: assets/dart.png

  # To position the branding image at the bottom of the screen you can use bottom, bottomRight,
  # and bottomLeft. The default values is bottom if not specified or specified something else.
  #branding_mode: bottom

  # The color_dark, background_image_dark, image_dark, branding_dark are parameters that set the background
  # and image when the device is in dark mode. If they are not specified, the app will use the
  # parameters from above. If the image_dark parameter is specified, color_dark or
  # background_image_dark must be specified.  color_dark and background_image_dark cannot both be
  # set.
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png
  #branding_dark: assets/dart_dark.png

  # From Android 12 onwards, the splash screen is handled differently than in previous versions.
  # Please visit https://developer.android.com/guide/topics/ui/splash-screen
  # Following are specific parameters for Android 12+.
  android_12:
    # The image parameter sets the splash screen icon image.  If this parameter is not specified,
    # the app's launcher icon will be used instead.
    # Please note that the splash screen will be clipped to a circle on the center of the screen.
    # If we not properly follow Android guideline. Specfically we need to put our logo inside
    # 160 * 160 diameter circle.     #
    image: assets/logo/tmdb_android_12_logo.png

    # Splash screen background color.
    color: "#ffffff"

    # We can disable splash logic generation for any platform by specifying platform name with true/false
    # for enablement and disablement
    # platform.
  web:
    false
    #android: true
    #ios: true

  # For more configuration kindly check https://pub.dev/packages/flutter_native_splash

3. Now, we need to run the following command to generate splash screen configurations for the respective platforms.

dart run flutter_native_splash:create // If added all configuration inside default pubspec prefer this command

or 

dart run flutter_native_splash:create --path=path/to/my/file.yaml // Prefer this command when we created seperate pubspec file for flutter_native_splash

4. After running this command, all folders and image files specified in the configuration will be generated in their respective directories. You can now view the native splash screen.

Android: Directories created inside res after run flutter native splash command.

Android Directories and created and inside those directories all images are created.

IOS: Directories created inside res after run flutter native splash command.

IOS Directories and created and inside those directories all images are created.

5. If the provided splash images are not pixel-perfect, consult with the designer to obtain pixel-perfect images for each screen dimension. Replace the existing images with the correct screen dimensions.

1. Stand Out with App Icons and Names:

Your app needs its own identity, right? That’s where app icons and names come in. However, figuring out how to set them up in Flutter can be confusing. We’ll help you create a unique look and feel for your app, making it easily recognizable on users’ screens.

Android & iOS:

Head over to appicon.co and upload your app icon as an image.(1024x1024) size is recommended.
Make sure you select the checkbox as per your requirements: Android, iPhone, and iPad. Keep the rest as it is, and hit generate button.

Generating flutter app icon for Android and iOS

3. Extract the downloaded .zip file, and it should look something like this after extraction.

Generated Android and iOS icons

4. Open the android folder, and copy all the folders and files from there to your project android resources folder (your project > android > app > src > main > res).

Well, android icons are now changed successfully!

5. Come back to the downloaded files, and copy Assets.xcassets folder to your project iOS resources folder (your project > ios > Runner)

iOS launcher icons are now changed aswell!

What we did here is that we replaced the default flutter app icon set with the newly generated icon and now when you rebuild your application, you should see new icons.

But here’s one problem, if your icon has a square shape then it will look weird on devices with round launcher icons. Like this,

No support for round launcher icons

To add round icon support, we need to go back to appicon.co. But this time upload an image with a round shape and only select the Android checkbox and write the file name as “round_launcher” and hit generate.

Generating round launcher icons for Android only

Once downloaded, copy the android folder again and merge it with your project android resources. (your project > android > app > src > main > res).

Last thing, go to your Android Manifest file (android > app > src > main > AndroidManifest.xml) and add this line:

Hooray, we’re done changing our app icons for Android & iOS.

Icons changed & Round Icon support added

Web Favicon:

Changing flutter web favicon is really easy, just navigate to your project > web folder and replace favicon.png with your desired image.

From this:

To this:

The favicon should be changed successfully!

Windows:

To change your app launcher icon on windows, you need to have a .ico file. Navigate to your project > windows > Runner > Resources and replace app_icon.ico with your .ico file.

If it doesn’t work, restart your android studio, perform flutter clean and rebuild the app.

MacOS:

Changing the macOS app icon is very similar to what we did in iOS, head over to appicon.co and upload your icon as an image (1024 x 1024 is recommended). Check macOS only and hit generate.

Generating app icons for macOS

Extract the downloaded file, copy Assets.xcassets folder, and paste it to your project > macOS > Runner directory.

That’s all for this article, thank you for reading, give it a clap if you liked it.