Flutter Tutorial - Native Splash Screen [2021] & Real Splash Screen - Android & iOS

within the splash screen you can put your brand identity and company logo inside and we want to create real and native splash screens for our flutter app and we will also look at how you can set a different splash screen for your light seam and also for your dark scene a splash screen always has to be integrated natively so you cannot implement it with dart and flutter directly and there are many examples outside which show you how you can create a splash screen however this is not working and you will quickly see why so if you open your app then there is a white screen and normally what we want to have is a splash screen and then it takes some time until the flutter engine is loaded and after this flutter will draw your app however you cannot implement the splash screen directly in flutter if you are new here subscribe to my channel and make sure to watch this video to the end let's get started by implementing our native splash screen and therefore we make user of this flutter native splash plugin to integrate this plugin you need to go to your pubspec drama file and here under the def dependencies you need to add this flutter native splash inside and secondly we need to create here this statement flutter native splash and under it we need to create a color this is the background color of our splash screen and secondly this image itself and here we are basically pointing to this image which i have stored within this assets folder and here we have the splash image which we want to show in our splash screen and in our case we supply here a white color however you can also change it here to a different hex color so in my case i have here this white color as a background and then in the middle we have our splash logo and before this can work you also need to supply here android and ios to true and this will make sure that we generate our splash screen for both platforms and now we want to generate our splash screen therefore we go inside of our console and we go then to the flutter project location so make sure that you are in the root folder of your flutter project within the console and here you need to write three commands the first one is flutter clean secondly we write here flutter pubget and therefore make sure that you have saved here this pop spec drummer file and lastly we run here flutter pup run and here we want to execute this flutter native splash create command and then you also press enter and this will then generate our splash screen and after this you should see that he has generated it for android and ios and now you can simply start your application and now if i run this app you see here our splash screen with our logo in the middle and this command flutter pub run create will then resize our image which we have here initially and we'll put it inside of our android folder to the app source main and here inside of the res you have here these different folders and here it has generated our splash with different sizes and everything was automatically generated for you for these different folders and also within the ios folder it was generated now we want to change here the background color of our splash screen and therefore you simply can go to google and write your hex color and then you can choose your basically your color which you like and here you copy then this hex code and then you can paste it here inside of the color property after this make sure that you save this file and after this we run again these three commands in our terminal however you can also write everything inside of one command and i will put this command inside of the description of this video and then you press enter and after this you can restart your application again and now you see we have here a different background color for our splash screen now let's look at how we can change the size of this logo here and therefore the size of your splash image which you have set is really important so right now i have set it here to 250 by 250 pixels however if you want to change the logo size then you can also supply a different size so i take you another image which has 400 by 400 pixels and now i simply go again to the pubspec jammer file and put here this new file inside and i save it after this you need to run again the commands in your terminal and i run here the single command and now if i restart the app you see that this logo is a little bit bigger next we want to look at how we can add a different color for our dark seam and also for our light seam so in the case of the light seam we want to have a white background color and for the dark scene we want to have a dark background color therefore go again to your pops back drama file and here i change the color to a white color and secondly you can also supply here a color dark and this is then for the dark mode and here i supply basically a dark color and if you like you can also change the image which is displayed in the dark mode so you have here this property image dark and here you can basically set then a different image inside for the dark mode however i will take you the same image right now and these both properties are then responsible for showing the light seam color and image and these bows are for the dark seam after this save again this file run again this command and now if i restart the app you see here first of all this white color and this is because we are right now here within our light seam however you can also go inside of your settings and then you go here to the display mode and here you can activate your dark seam after this you can close your application and start it again and now you see we have here this dark color for our background and this is exactly the color which we have chosen here for this color dark property and lastly i want to show you how you can add a splash screen which has the full screen mode therefore i take here also another format for my image and within the pubspec jumble file i'll change then the image location to this new image and now if i restart this app you see here the splash screen however it was not resized to the full size of our screen and to do this you go again to your pop spec jumble file and here you need to set two properties first for android here we set this android gravity to fill and this will then be responsible for filling it on android and secondly we have to supply here the ios content mode and here we also scale and fill it and this is then only for ios responsible to fill it then save again this file and run alts again this comment and now if we are starting here our app again then you see the splash screen is in full screen mode hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Applause] you

Channel: Johannes Milke

Views: 44,715

Keywords: flutter, flutter tutorial, flutter splash screen image, flutter splash screen tutorial, flutter splash screen example, flutter splash screen, flutter splash, android splash screen, ios splash screen, flutter splash screen animation, flutter beautiful splash screen, flutter real splash screen, create launch screen in flutter, flutter launch screen, splash screen in flutter, real splash screens tutorial

Id: 8ME8Czqc-Oc

Length: 6min 56sec (416 seconds)

Published: Wed Jan 27 2021

Reddit Comments

[u/kegesch]

The hard part is not to use a library that will set the native splashscreens, but to master the transition between the native splash screen and the flutter splash screen.

How do you preserve the image to be exactly the same size and the exact same position?

[u/JohannesMilke]

Source code: https://github.com/JohannesMilke/native_splash_screen_example

Follow me on Twitter: https://twitter.com/JohannesMilke

Integrate a real & native Splash Screen to your Flutter app for Android & iOS with the Flutter Native Splash Package.

[u/Regular-Town4288]

Very useful! Thanks