Customize Splash Screen in flutter - Native Splash Screen - Flutter Remove White Screen

hey guys welcome to protocol does point okay so when you load your selector app you might see that there is a wide screen or a black screen that appears before loading your actual app so it is actually a flash screen that appears so in this tutorial we gonna learn how to customize our flag screen in flutter okay so let's begin so here i have created a lot of project in my android studio ide and it is a default code given by flutter team that is a counter app okay so let's begin so first of all we need to add a dependency in pub specification dot yaml's file so just open pub specification dot ml file and under dependency section you need to add this dependency that is native flash okay so after adding this library or dependency just hit this pub get button to download this dependency as an external library okay so it is downloading from the internet so we need to wait okay so it was successful with code zero okay so now let's start customizing our flash screen so for that in your project structure you need to create a new file by name flutter native flash dot yaml cell okay so here we are going to define the properties of your flash screen so here we must make use of a property that is flat flutter native flash and inside this property we can make the flash screen customizable okay so let's begin so here first of all let us change the color of our flash screen from white color to some other color so for that here there is a property called as color and here you can define the color that you want for your flash screen okay so let's google and take a color okay okay so let me take this color code and paste it over here okay so this is how we can change the color of our flash screen okay so now suppose you want a image to be shown at a center of our flash screen so at that time there is a property called as image and here you need to provide the path of the image okay so for now here in my project i have created a flutter folder by name assets and inside this folder i have my logo above float uh protocol just point okay so let me give a part of this image in this pop alpha okay so assets slash logo.png okay so this is how we can change the color or image of our flash screen okay so after adding this properties what we need to do is we must go to a terminal and hit a command that is flutter pub run flutter native flash dot create colon create okay so this will set the property that we have defined over here in our native code okay so you can see our selective uh native flask is completed okay so let me show you the directory where our flash screen is been affected okay so if i go to android and drawable folder you can see our image is over here that is flash.png and here there is a property for a background color okay so let's run the app on my device and check out okay so this is my physical device so let me run the project on my device okay so our app is running and you can see the background color and the logo at the center of our screen before starting our actual app okay so this is how we can customize our flash screen easily by making use of a library that is flutter native flash okay so let's customize some more okay so let's go to over here that is native flash lmfl okay and here there is a property called as background color so sorry the background image underscore image and here we need to pass the image of our background okay so our image is under assets and the name of the background image is back dot jpg okay so now let's customize uh run the create command again and check out okay so here it is saying me we cannot use color and background image property as at once so i'll just remove this color property for now okay so now let's run this create command again okay sorry it is saying me that it need a png image instead of jpg so let me copy our png image over here okay so i have copied a png email so let me delete this image from here and give a path of the png image okay so let's create so this time it was successfully completed so let me stop the app and run it again okay so app has been installing on my device so let's wait okay so now you can see there is a background image with a logo at the center of our screen okay so before starting our actual app so this is how we can customize our flash screen in flutter okay so now suppose if you are making use of a dark theme instead of a light stream of your customer or your app user is using a dark theme at that time there are various properties been provided by this library so here instead of this normal image what we can do is we can make use of a property that is image dark and here you can just specify the path of the image as usual so i am not going to do this because i need to restart the app again and we need to check and we need to change the dark to dark theme also so it will be time consuming okay so after that here there is a background image dot underscore dark and this also part of the dark theme image over here okay and then [Music] color as shown set a color code over here something okay okay so now uh suppose if your app is been run on android version 12 and above so now the latest version is 12 so here you need to define a property if your app has been working in android version 12 and above so this is the property that you must make use of that is android underscore 12 and in this properties you must redefine this properties so that this theme get applied on android 12 and above okay so this is the thing you need to customize you must do separately for android 12 version okay so this is how we can customize our flash screen in flutter easily uh that's all for this video tutorial hope you got the concept of how to change the flash screen in flutter so thanks for watching please do subscribe does point thank you

Channel: Proto Coders Point

Views: 7,619

Keywords: flutter, flutter change splash screen, flutter native splash, flutter splash, flutter splash screen, flutter splash screen example, flutter splash screen tutorial, flutter tutorial, flutter white screen, flutter white screen on start, how to remove default splash screen in flutter, how to remove flutter white, remove default splash screen flutter, remove flutter white, remove splash screen flutter, splash screen flutter, splash screen in flutter, splashscreen

Id: XYz6pRNdlAo

Length: 8min 6sec (486 seconds)

Published: Sun Apr 03 2022