Custom Splash Screens for Your Flutter App (flutter_native_splash) #Flutter #AppDevelopment #Web

i'm going to show you how to do a custom splash screen for your flutter app usually when you open up the app from your home screen the first thing you always see is a blank white screen but you can show a custom splash screen if you want to this is the app we're going to build today so when you open up the app it will show you this splash screen and after everything is loaded it will show you your normal app let's get started the package we're going to use is called flutter native splash this is the current version so click on this to copy it to your clipboard then go to your pubspec.yml file and then under your dependencies just paste this in here another thing we will have to define are our assets so under your root project create a new folder called assets and then in your pubspec.yaml file uncomment this line for assets and then write this line so that it refers to your assets folder now for using the flutter native splash package you can actually still show your splash screen while your app is still running and initializing something so if you want to do that then you should have your flutter native splash package defined under your dependencies otherwise you could define it in the root hierarchy like so and then define your custom properties in here or you could create a custom file for your splash screen package where you define all the properties you want to use so i created a file called flutter native splash this is under your root directory as you can see here in your assets folder then you have to put in the images you want to use so the first thing we have to look at is the background image you could either define a background image or color either or you can't define both for the color it's just a simple hex code so you can uncomment this and comment this if you prefer to use color in this case i'm using the splashscreen.png as background image this is the background image then in the middle of our splash screen we can have another image in this case it's the flutter.png which is simply the flutter logo as you can see then at the bottom of our splash screen we can have a custom image in this case i use the eclectify logo and then you can also define how the branding should be placed so it can either be bottom centered bottom right or bottom left that means when your splash screen is showing either it's centered here or it's bottom left or bottom right of course you don't have to define these at all the background image or the colors everything you could already use but if you want to use some more customization within your splash screen you can then define these properties also another thing to mention for android 12 and later it no longer works with the splash screen correctly so there's actually another step you would have to do for android 12 so here define your own image and so on also since this package is working with android and ios and web it automatically generates the splash screen for all three platforms if however you don't want to use one of these three platforms then you can simply uncomment for example android and then say false so it won't generate the splash screen for android once you have everything in your assets folder you have to find all your properties then you can run this full command in your terminal so first it cleans the flutter app then it runs the pubget to download our splash screen package and then we create the splash screen you can use this without defining the path if you defined your custom properties already within the pubspec.yml file underneath the package here but if you have a custom file like me then you also have to define the path to your custom yaml file then simply run this command and once that is done then we can run our simpleflutter app and i simply build a very simple flutter app where we just have an app bar and in the center some text and as you have seen before when we start this app our custom splash screen is loaded and once the splash screen is loaded it will show our normal app one last thing to mention is that if you have some initialization going on in your app and your app is already started and it's no longer showing the splash screen there is an option to still show the splash screen while your initialization is still running this is also very simple to do this just go to your main function and then copy these two lines in here so it will tell the flutter native splash package to preserve your splash screen and then once your custom initialization is done you can remove the splash screen and then the user can use your normal app in this case i simply waited for five seconds and then removed the splash screen to give you a feeling of how this looks like so again when we close our app here and reopen it up it's gonna load the splash screen and then wait five seconds so doing some initialization in the background and then our normal app is showing if you have any problems with this package on the website for the package there are some frequently asked questions with some errors you might get so if you get some kind of error check here because it's likely that it's already answered here how to resolve your problem so i hope you liked this video please leave a like and subscribe if you have any questions please ask them down in the comments thank you for watching

Channel: eclectify University - Flutter

Views: 26,801

Keywords: Flutter Native Splash, splash screen, splash_screen, flutter_native_splash

Id: x0a6_ILbvAk

Length: 5min 17sec (317 seconds)

Published: Wed Apr 06 2022