Create Splash Screen in Flutter App the Right Way in 2021

i am going to show you how to replace this wide screen when you launch your flutter app by a custom splash screen like this one if this is something that you would like to learn keep watching for those who don't know when your app launches there may be some delay between when the user start the app and when the first frame of the app is actually painted on the screen during this time flutter shows a white screen called splash screen or launch screen launch screens are useful because they give the user the impression that your app is fast and responsive but rather than showing this wide screen i will show you how to customize this launch screen to show your company's logo or an image related to your app since the steps to add a splash screen is different from android to ios we will do the implementation for both platforms and also at the end of the video i will share some best practices when implementing a splash screen let's start with the android side to properly display our splash screen in an android app built with flutter we need two themes a launch theme and a normal theme fortunately the flutter team has already created those two themes for us since december 2019 with the release of embedded version 2 when you create a new project the photo ships the sample apps with the two themes already created the only things left to do are add in your image and background color let's do that right now first we will locate the android folder in our project ir key then in this folder we will navigate to this path android app src main res drawable and here we need to add the image that we want to show in the splash screen i have already added mine now let's open this file launch background.xml as you can read in the comments modify this file to customize your launch splash screen the first thing we will modify here is the background color for the splash screen by default it is white that's why when we launched the app we saw a white screen let's change it to black now if we restart the app we will see a black screen when the app launches as you can see we have replaced the white screen by a black screen now let's add an image over the background again the flora theme has us covered you can insert your image assets here let's uncomment those line of codes and replace admit map by add drawable slash the name of the image file we will talk about the maps later let's test it as you can see it shows the image centered in the screen but it would be nicer if we could use another color in the background to add a custom color since we are doing this in the android native environment it is good practice to define a colors.xml file in the values folder now we can paste this piece of code in this code we are specifying a name and the value for the color using the hexadecimal format now let's use this background color in the launch background.xml we will replace at android color black by add color background color let's test it i think it looks better now another thing that is important to mention is that you don't always want to put your launch image in this drawable folder since your app will be used on different device sizes it is preferable to put the different resolutions of your launch image in those mipmap folders and then let android decide the appropriate launch image to show depending on the device screen size as i have done here in that case make sure that the image resource in the launch background xml is set to add map launch image so if you restart we will have the same splash screen the question you will ask right now is were the two themes that i was talking about earlier as i said the flooded sim has created the themes for us so we don't need to modify them to customize the splash screen but in the case you would like to implement a more complex launch screen let me quickly show you how this works let's open the style.xml in the values folder in this file we have the launch theme and the normal theme in fact the launch background that we are modifying is being called here in the launch theme moreover if we open the androidmanifest.xml we can see that when we launch the app android will show the launch team first then here this metadata is to say after the launch team the view should switch to the normal team which is defined here in the style.xml now the other question is why is this normal theme imported for flutter the normal theme is not really important since our flora widgets will always cover the entire screen the view with the normal theme will be there but not visible to us to be more precise we could see this view because when android has finished loading the app in memory the flutter engine will take some time to load the first frame of our app during this brief period we could see the view with the normal theme however to simplify our tasks and improve the user experience the flutter team added this metadata in the androidmanifest.xml this code means that when the floater engine is loading instead of showing the normal theme keep showing the launch background as splash screen so if you want to see the normal theme we can just commit this part of the code change the color of the normal theme and relaunch the app as you can see the normal theme was visible for a brief period then our apps would just cover it therefore as a recap for android when your app starts it shows the launch team that is defined by the launchbackground.xml then it switches to the normal theme but because of this metadata here in the androidmanifest.xml it will keep showing the launch background until fodder starts painting the first frame of the app on the screen for the ios platform the customization of a launch screen is more straightforward there's no coding required to achieve that when you create a new project flutter automatically adds a splash screen with a white background and a blank image it does this by including an xcode storyboard named launch screen.storyboard that can be customized with your own assets you could customize it by replacing the launch images here with your images and updating the content.json file as specified in this readme file but fortunately apple made it extremely easy to modify the launch screen in xcode using the interface builder by drag and drop let's do that right now we will start by launching our project in xcode by writing this command in the terminal make sure that you are in the root folder of your project now that we are in xcode let's select runner then assets.xcode assets from the project navigator and here we have our launch image that we want to change we only need to drag and drop the appropriate image sizes to those placeholders we need to provide the image at different resolutions 1x 2x and 3x as specified in the apple's human interface guidelines the link will be in the description below let's run the app to test the changes that we just made as you can see we still have a white background let's change that by providing a background color again this is very easy to do this time we will select the launch screen storyboard in the project navigator then go to the attribute inspector and change the background attribute of the storyboard to the color we want if you restart the app again we will see our splash screen now that we know how to customize the launch screens for both platforms it's important to keep in mind some best practices or recommendations one avoid text using text on your launch screen is discouraged because the content in a lounge screen doesn't change any display text won't be localized two avoid static image don't use a static image for your launch screen any used images should scale well for different screen sizes therefore use images with different resolutions put them in the midmap folders for entering and in the appropriate image placeholder for ios links will be in the description below 3 dot advertise the launch screen is not a branding opportunity don't design an entry experience with a lot of animation or that looks like an about window and four nearly identical to the first screen the launch screen should be as close as possible to your app's first page the closer your splash screen gets to your first page the smoother your app's first impression will be the best way to learn is by doing now go improve your app user experience by customizing the splash screens but if you would like to continue learning about flutter watch this video or that video since you made it so far please give us a like subscribe and hit the notification bell for future contents

Channel: MJSD Coding

Views: 88,758

Keywords: Create splash screen in flutter app the right way in 2021, Create splash screen in flutter apps right way, flutter splash screen, splash screen flutter, splash screen in flutter, flutter splash screen tutorial, splash screen the right way, flutter launch screen, Real Splash Screens Tutorial, flutter real splash screen, create launch screen in flutter, flutter splash screen background image, flutter splash screen logo, create real splash screen in flutter

Id: JVpFNfnuOZM

Length: 9min 46sec (586 seconds)

Published: Thu Dec 31 2020