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

Chemistry - Bond Angles In NH3 And NCl3

Answer : Solution 1: As Tan Yong Boon stated, it is Bent’s Rule with which we can explain the lower bond angle of \ce N F 3 \ce{NF3} \ce NF 3 when compared to \ce N H 3 \ce{NH3} \ce N H 3 . The rule as stated by Henry Bent: Atomic s character concentrates in orbitals directed towards electropositive substituents. Fluorine is more electronegative that hydrogen, and the \ce N − F \ce{N−F} \ce N − F bond would have greater p character than the \ce N − H \ce{N−H} \ce N − H bond. And more s character leads to large bond angles. Thus, the bond angle is greater in \ce N H 3 \ce{NH3} \ce N H 3 than in \ce N F 3 \ce{NF3} \ce NF 3 . Now, consider \ce N C l 3 \ce{NCl3} \ce NCl 3 . Clearly, \ce C l \ce{Cl} \ce Cl atom islarger in size than the central atom, nitrogen. Hence the higher bond angle here is due to the steric crowding caused by \ce C l \ce{Cl} \ce Cl atoms.(More pronounced than the electrongativity of \ce C l \ce{Cl} \ce Cl atom). They repel eachother and hence b
Read more

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Answer : VACUUM is only needed on updated or deleted rows in non-temporary tables. Obviously you're doing lots of INSERTs but it's not obvious from the description that you're also doing lots of UPDATEs or DELETEs. These operations can be tracked with the pg_stat_all_tables view, specifically the n_tup_upd and n_tup_del columns. Also, even more to the point, there is a n_dead_tup column that tells, per table, how much rows need to be vacuumed. (see Monitoring statistics in the doc for functions and views related to statistics gathering). A possible strategy in your case would be to suppress the scheduled VACUUM, keeping an eye on this view and checking on which tables the n_dead_tup is going up significantly. Then apply the aggressive VACUUM to these tables only. This will be a win if there are large tables whose rows never get deleted nor updated and the aggressive VACUUM is really necessary only on smaller tables. But keep running the ANALYZE for the optimiz
Read more

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?

Answer : Diagram machinery works also for perturbation theory in classical statistical mechanics and classical field theories. Generally, various kinds of diagrams constitute a pictorial way of talking about tensor products and their contractions while hiding the multi-linear algebra from the layman. In the simplest case, vertices (or blobs) represent vectors, matrices, tensors; vertices have ingoing and/or outgoing ports; ingoing ports denote (contravariant) ro indices; outgoing ports denote (covariant) co indices; directed arcs between blobs give a pair of equal indices summed over; different base spaces ⇔ \Leftrightarrow ⇔ different arc types; symmetric tensors ⇔ \Leftrightarrow ⇔ undirected diagrams; no labels are needed for internal lines. In many cases, the directed arcs are decorated (as thin, thick, broken,wavy, curly lines), each decoration indicating the presence of a so-called propagator, a function of its label to use as a weight in the sum, which may beco
Read more