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.
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.
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
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
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.