Adding A Splash Screen To Flutter Apps


Answer :

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, LaunchImage@2x.png, etc. Now you have to replace these images with your branding image variants. For example:

  • the image with density 1 needs to override LaunchImage.png,
  • the image with density 2 needs to override LaunchImage@2x.png,
  • the image with density 3 needs to override LaunchImage@3x.png,
  • the image with density 4 needs to override LaunchImage@4x.png,

If I am not wrong LaunchImage@4x.png doesn't exist by default, but you can easily create one. If LaunchImage@4x.png 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" : "LaunchImage@2x.png",       "scale" : "2x"     },     {       "idiom" : "universal",       "filename" : "LaunchImage@3x.png",       "scale" : "3x"     },     {       "idiom" : "universal",       "filename" : "LaunchImage@4x.png",       "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


The easiest way to add a splash screen in flutter is imho this package: https://pub.dev/packages/flutter_native_splash

enter image description here

Installation guide (by the author of the package):

1. Setting the splash screen

Add your settings to your project's pubspec.yaml file or create a file in your root project folder named flutter_native_splash.yaml with your settings.

flutter_native_splash:   image: assets/images/splash.png   color: "42a5f5"

image must be a png file.

You can use # in color as well. color: "#42a5f5" You can also set android or ios to false if you don't want to create a splash screen for a specific platform.

flutter_native_splash:   image: assets/images/splash.png   color: "42a5f5"   android: false

In case your image should use all available screen (width and height) you can use fill property.

flutter_native_splash:   image: assets/images/splash.png   color: "42a5f5"   fill: true

Note: fill property is not yet implemented for iOS splash screens.

If you want to disable full screen splash screen on Android you can use android_disable_fullscreen property.

flutter_native_splash:   image: assets/images/splash.png   color: "42a5f5"   android_disable_fullscreen: true

2. Run the package

After adding your settings, run the package with

flutter pub pub run flutter_native_splash:create When the package finishes running your splash screen is ready.


Flutter actually gives a simpler way to add Splash Screen to our application. We first need to design a basic page as we design other app screens. You need to make it a StatefulWidget since the state of this will change in a few seconds. 

import 'dart:async'; import 'package:flutter/material.dart'; import 'home.dart';  class SplashScreen extends StatefulWidget {   @override   _SplashScreenState createState() => _SplashScreenState(); }  class _SplashScreenState extends State<SplashScreen> {   @override   void initState() {     super.initState();     Timer(         Duration(seconds: 3),         () => Navigator.of(context).pushReplacement(MaterialPageRoute(             builder: (BuildContext context) => HomeScreen())));   }    @override   Widget build(BuildContext context) {     return Scaffold(       backgroundColor: Colors.white,       body: Center(         child: Image.asset('assets/splash.png'),       ),     );   } }

Logic Inside the initState(), call a Timer() with the duration, as you wish, I made it 3 seconds, once done push the navigator to Home Screen of our application.

Note: The application should show the splash screen only once, the user should not go back to it again on back button press. For this, we use Navigator.pushReplacement(), It will move to a new screen and remove the previous screen from the navigation history stack.

For a better understanding, visit Flutter: Design your own Splash Screen


Comments

Post a Comment

Popular posts from this blog

Converting A String To Int In Groovy

Answer : Use the toInteger() method to convert a String to an Integer , e.g. int value = "99".toInteger() An alternative, which avoids using a deprecated method (see below) is int value = "66" as Integer If you need to check whether the String can be converted before performing the conversion, use String number = "66" if (number.isInteger()) { int value = number as Integer } Deprecation Update In recent versions of Groovy one of the toInteger() methods has been deprecated. The following is taken from org.codehaus.groovy.runtime.StringGroovyMethods in Groovy 2.4.4 /** * Parse a CharSequence into an Integer * * @param self a CharSequence * @return an Integer * @since 1.8.2 */ public static Integer toInteger(CharSequence self) { return Integer.valueOf(self.toString().trim()); } /** * @deprecated Use the CharSequence version * @see #toInteger(CharSequence) */ @Deprecated public static Integer toInteger(String self) { return toInteg
Read more

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Answer : if anyone pass through here, this is shorter solution: sudo chown -R $USER $HOME/.composer it seems to me the group information is missing in your command sudo chown -R <user> /home/<user>/.composer/cache/repo/https---packagist.org Shoud be sudo chown -R <user>:<group> /home/<user>/.composer/cache/repo/https---packagist.org But to avoid other permission issues, I would rather advise: sudo chown -R <user>:<group> /home/<user>/.composer/cache (you'll need access to other folders in there) and sudo chown <user>:<group> /home/<user>/.composer To make sure your user has permissions enough on the global composer folder. Mind the missing recursion so the user don't own keys created by root. If you need to find out the group: groups <user>
Read more

Android How Can I Convert A String To A Editable

Answer : As you probably found out, Editable is an interface so you cannot call new Editable() . However an Editable is nothing more than a String with Spannables, so use SpannableStringBuilder: Editable editable = new SpannableStringBuilder("Pass a string here"); If you only want to change the Spannables, never the text itself, you can use a basic SpannableString. Use Editable.Factory.getInstance().newEditable(str) From the android documentation: Returns a new SpannedStringBuilder from the specified CharSequence. You can override this to provide a different kind of Spanned.
Read more