Native + Animated Splash Screen in Flutter | Flutter Tutorial [2022] | Android & IOS

if you watch this video until the end you will be able to add native splash screen for both light and dark mode and as a bonus we will see how to create an animated flash screen so for this we will be using this flutter native splash package which simplifies the whole process for both android and ios and here i have already created an acid folder with a dark and a light image then open the pubspec dot ml file in it first add the fetter native splash dependency and then below here we will add the path to the asset folder now in order to customize the splash screen settings add the flutter network splash here then give it an image parameter with a light image path which in my case is inside the acid folder and then we will give it a background color now at this point our application will show this image in both the light and dark mode which is ok for most cases but if you want to add a different image for the dark mode that can be done by simply adding this dark image property giving it the path to the dark image and adding or we will see the slash screen now we are all set and just one command away from our end result but before going forward make sure to save the ml file and open the terminal inside it run this command and it will generate the splash screen for android ios and web and now when we run our application we will see the splash screen both in case of light mode and dark mode and if you are enjoying this video then please make sure to like and subscribe so do it i won't be asking again but jokes aside let's see how to add this animated splash screen which is basically a video clip which i have added inside the asset folder as you can see here now in order to play this video we will add the video player dependency and also add the flutter native splash as our tape dependency and the reason for using it is to change the background color of the splash screen to that of the video which in this case is black now in the main.dart file i have created this splash screen widget which is simply a stateful widget with a scaffold now first create the video player controller and make sure to import the video player then inside the init state we will initialize this controller with its asset constructor and give it a path to the nike animation video then call the initialize method and once it's initialized then we will call the set state and also we will set the volume to zero but if you want the sound effect then sure go for it and after that we will dispose our controller and now it's time to add the video player widget so first add the center widget inside its child we will check that if the controller value is initialized and if so we will return an expert ratio widget and give it an expect ratio of the video now add the video player widget and give it a controller and if the controller is not initialized then we will show an empty container and now when we hot restart the application nothing is shown because we have not had start to play the video so let's create a play video method inside it call controller.play method then we will add a delay of 4 second which is the duration of the video and after that we will navigate it to the home route and finally call the play video method after the controller is initialized and now when we hot restart our application we can see this sick animation and if you like to learn more on animation then check out our loti animation video and that's it from our site see you in the next one

Channel: Flutter UI Dev

Views: 56,906

Keywords: flutter splash screen tutorial, flutter tutorial, flutter splash screen, splash screen in flutter, flutter splash screen tutorial, flutter, splash screen, flutter animated splash screen, flutter ui, flutter animation, flutter animation tutorial, flutter animation ui, android splash screen, flutter splash screen ios, flutter tutorial for beginners, beginners guide to flutter, guide to flutter, flutter guide 2022, flutter animated screen, flutter onboarding screen animation

Id: ySaVFCpK4M8

Length: 3min 43sec (223 seconds)

Published: Fri Mar 04 2022