How to add splash screen in Flutter

Posted on

Splash screen is something which is very important and you must have seen this in most any of the application when you start an application for the first time. Having a beautiful splash screen will make an impact.  I am making tutorials on how to make a splash screen and can be used it in any of our flutter application. So, this tutorial will help you through to make your own splash screen.

Actually there is a splash screen, but it is diplay with white background and nobody could understand that there is already splash screen for iOS and Android by default.

Flutter uses native platform procedure to draw transitional launch screens to your Flutter app while the Flutter framework loads. This launch screen will remain until Flutter renders the first frame of your application.

Android

Step 1: Navigate to …/android/app/src/main folder

Step 2: Open res/drawable/launch_background.xml

Step 3: Modified XML

You also can customize the look of your launch screen with this layer list drawable XML. The existing template provides an example for adding an image to the middle of a white splash screen in commented code. You can uncomment it or use other drawables to attain the intended effect.

iOS

Step 1: Open a project an navigate to …/ios/Runner folder

Step 2: Put your images/icons

Drop images in Assets.xcassets/LaunchImage.imageset according to recommended sizes for devices and named it LaunchImage.png, [email protected], [email protected].

If you want use different filenames, you also would have to update the Contents.json file in the same directory.

Step 3: Any customization

You can also fully customize your launch screen storyboard in Xcode by opening .../ios/Runner.xcworkspace. Navigate to Runner/Runner in the Project Navigator and drop in images by opening Assets.xcassets or do any customization using the Interface Builder in LaunchScreen.storyboard.

Done! Now you have your customize splash screen that can run both in iOS and Android. It should load and display before any other content.

Loading...

Leave a Reply

Your email address will not be published. Required fields are marked *