Flutter App by Default shows a white screen on app startup. I know you want a custom splash screen on the app start. That’s why I am writing this article to help you out with this problem.
When you work on flutter, the very first thing you will notice is the White Screen on app startup. Flutter is best for app development, app performance and cross-platform development. But by default flutter splash screen background colour is white. The white splash screen will be shown to the user for at least two seconds. I am sure that you don’t want to see that white screen on app startup. So how to remove default splash screen in flutter? You can easily fix the white splash screen on the flutter app. If you will look for the solution to this problem in Flutter & dart only, So you will not find anything. Actual solution lias on native android & iOS development. So you will to just use the same tactic on flutter as well.
Checkout — kamal bunkar to know more about me. Read the Complete Article Here. You can watch it on Youtube as well.
For Android App
If you are a native android app developer, then you definitely know that to show any custom splash screen on app startup, add the splash screen image inside the drawable folder. If you will look into the flutter project & android folder.
app -> src -> main -> res
Inside the drawable folder, you will find launch_background.xml file. Here you can choose from two options. Both are working fine, it is just a matter of writing the code.
Option 1) Edit this launch_background.xml by adding a new item and set the splash screen image as an item value(see below).
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/custom_color_here" /> <!-- You can insert your own splash image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="@drawable/splash_screen" />
</item>
</layer-list>
That’s it …… Super Easy
Option 2) — Another way is — don’t make changes on launch_background.xml, Just replace the reference of the launch_background.xml file with the new splash screen file that you want to display on the app startup. I am assuming you already added a new splash screen image into the drawable folder. Now open the AndroidManifest.xml file & look for the meta tag android:name=”io.flutter.embedding.android.SplashScreenDrawable” Just replace the launch_background name with your splash screen image name. ( change meta tag like below)
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="@drawable/splashscreen"
/>
Go inside res –> values folder and here also replace the launch_background name with your splash screen image name. Do this action on both folder values and values-night.
Well Done … Run the Flutter Project on Android
For iOS app
Open flutter project on Xcode for Adding splash screen to flutter ios app. To open the iOS module on Xcode, open android studio and on the top menu select tools. Go to flutter –> open ios module on Xcode.
On Xcode window, Click on Runner-> Runner -> Assets.xcassets folder. Here you can see LaunchImage paste your splash screen image with all three different dimensions in this folder.
Open LaunchScreen.storyboard
Again on the left side menu just below the Assets.xcassets folder, you will see LaunchScreen.Storyboard. Click on view controller scene -> view controller -> view. Note: — select (click on ) view only don’t click on LaunchImage. You already paste the new splash screen in the LaunchImage folder in the previous step. So you will see the same new image here in this window. When you select (click on ) view then on the right side window you can see options to change view settings like content mode, background, alpha etc. change the background colour as you want and set content mode to scale to fill.
Adjust Splash Screen
You can adjust the splash screen position, size & background colour on the same window. Just click on launchImage OR select the image on the preview window. You can resize the image and can adjust the image position. On the Right side window, you can make another setting as well.
iOS App Splash Screen is Ready.
Now flutter white splash screen problem has been resolved successfully for both android and iOS. You can change the flutter splash screen background colour as per your requirements.
You can also watch the video tutorial on my channel — https://www.youtube.com/channel/UC0tb4vuqPimSCWdnJailrTw
Learn Complete Flutter App Development — https://www.dripcoding.com/best-flutter-online-course/
Tweeter — https://twitter.com/kamal_bunkar
Facebook — https://www.facebook.com/dripcoding
Linkedin — https://www.linkedin.com/in/kamal-bunkar/
Telegram — t.me/dricoding
Instagram — https://www.instagram.com/the_kamal_bunkar/
If you have any doubts, Feel Free to contact us.
Top comments (0)