Adding a splash screen to Flutter apps

by

I want to shed some more light on the actual way of doing a Splash screen in Flutter.

I followed a little bit the trace here and I saw that things aren’t looking so bad about the Splash Screen in Flutter.

Maybe most of the devs (like me) are thinking that there isn’t a Splash screen by default in Flutter and they need to do something about that. There is a Splash screen, but it’s with white background and nobody can understand that there is already a splash screen for iOS and Android by default.

The only thing that the developer needs to do is to put the Branding image in the right place and the splash screen will start working just like that.

Here is how you can do it step by step:

First on Android (because is my favorite Platform 🙂 )

  1. Find the “android” folder in your Flutter project.

  2. Browse to the app -> src -> main -> res folder and place all of the variants of your branding image in the corresponding folders. For example:

  • the image with density 1 needs to be placed in mipmap-mdpi,
  • the image with density 1.5 needs to be placed in mipmap-hdpi,
  • the image with density 2 needs to be placed in mipmap-xhdpi,
  • the image with density 3 needs to be placed in mipmap-xxhdpi,
  • the image with density 4 needs to be placed in mipmap-xxxhdpi,

By default in the android folder there isn’t a drawable-mdpi, drawable-hdpi, etc., but we can create them if we want. Because of that fact the images need to be placed in the mipmap folders. Also the default XML code about the Splash screen (in Android) is going to use @mipmap, instead of @drawable resource (you can change it if you want).

  1. The last step on Android is to uncomment some of the XML code in drawable/launch_background.xml file. Browse to app -> src -> main -> res-> drawable and open launch_background.xml. Inside this file, you shall see why the Slash screen background is white. To apply the branding image which we placed in step 2, we have to uncomment some of the XML code in your launch_background.xml file. After the change, the code should look like:

     <!--<item android:drawable="@android:color/white" />-->

 <item>

     <bitmap
         android:gravity="center"
         android:src="@mipmap/your_image_name" />

 </item>

Please pay attention that we comment the XML code for the white background and uncomment the code about the mipmap image. If somebody is interested the file launch_background.xml is used in styles.xml file.

Second on iOS:

  1. Find the “ios” folder in your Flutter project.

  2. Browse to Runner -> Assets.xcassets -> LaunchImage.imageset. There should be LaunchImage.png, [email protected], etc. Now you have to replace these images with your branding image variants. For example:

If I am not wrong [email protected] doesn’t exist by default, but you can easily create one. If [email protected] doesn’t exist, you have to declare it in the Contents.json file as well, which is in the same directory as the images. After the change my Contents.json file looks like this :

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

That should be all you need, next time when you run your app, on Android or iOS you should have the right Splash Screen with the branding image which you added.

Thanks

More Related Contents:

  1. How to deal with unwanted widget build?
  2. What is the difference between functions and classes to create reusable widgets?
  3. How to get height of a Widget?
  4. Flutter: How to correctly use an Inherited Widget?
  5. How to show/hide widgets programmatically in Flutter
  6. How to add a ListView to a Column in Flutter?
  7. How can I add a border to a widget in Flutter?
  8. Flutter: Expanded vs Flexible
  9. The equivalent of wrap_content and match_parent in flutter?
  10. How can I layout widgets based on the size of the parent?
  11. The argument type ‘String’ can’t be assigned to the parameter type ‘Uri’
  12. Check whether there is an Internet connection available on Flutter app
  13. Dart set default value for parameter
  14. Scaffold.of() called with a context that does not contain a Scaffold
  15. call method in one stateful widget from another stateful widget – Flutter
  16. How do I Set Background image in Flutter?
  17. How to add image in Flutter
  18. How to know if a widget is visible within a viewport?
  19. Flutter: How to hide or show more text within certain length
  20. Flutter Back button with return data
  21. Flutter: how to prevent device orientation changes and force portrait?
  22. How can I check if a Flutter application is running in debug?
  23. Why is riverpod failing even to initialize in project? Method not found: ‘Error.throwWithStackTrace’
  24. Incorrect use of parent data widget. expanded widgets must be placed inside flex widgets
  25. Flutter use variable created inside Future builder outside of the build method,
  26. How should I check if the input is an email address in Flutter? [duplicate]
  27. How to create number input field in Flutter?
  28. Flutter – How to make a custom TabBar
  29. Null check doesn’t cause type promotion in Dart
  30. Flutter Gradle task assembleDebug failed with exit code 1 zip END header not found

Leave a Comment