Dynamic Splash-Screen in Flutter

Question

I'm pretty new to flutter and I try to build a splash-screen that waits for some widget to be built. Is there a possibility to do it without just setting a random time of delay for the splash screen to appear?

Thank you very much.

Answer 1

It's not possible to do with the native splash screen. but you can create a custom screen. I'm assuming that you want to load some data through a http request or something like that. you can load the data in your custom splash screen and once loading is done navigate to the screen you want.

Take a look at this too. flare_splash_screen 3.0.1

Answer 2

You have to do this in a native way. First for Android (because is my favorite Platform :) )

1. Find the "android" folder in your Flutter project.

2. Browse to 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-xdpi,
   • the image with density 3 needs to be placed in mipmap-xxdpi,
   • the image with density 4 needs to be placed in mipmap-xxxdpi,

By default for the android folder there isn't drawable-mdpi, drawable-hdpi etc., but everybody can create if he wants. That's why the images need to be placed in mipmap folders. Plus that the default XML code about the Splash screen (in Android) is going to have a look in @mipmap not in @drawable (you can change it if you want).

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

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

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

Now for iOS:

• Find the "ios" folder in your Flutter project.
• Browse to Runner -> Assets.xcassets -> LaunchImage.imageset. There should be LaunchImage.png, [email protected] etc. Now you have to replace these images with you branding image variants. For example:
• the image with density 1 needs to override LaunchImage.png,
• the image with density 2 needs to override [email protected],
• the image with density 3 needs to override [email protected],

• the image with density 4 needs to override [email protected], If I am not wrong [email protected] does not 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 like 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" } }

And that should be all. Next time when you run your app, on Android and iOS you should have the right Splash Screen with the branding image which you added.

Anyway if have created the project using flutter create you should better take a look at this docs : https://flutter.dev/docs/development/ui/assets-and-images#updating-the-launch-screen