Flutter Animated Native Splash - No NEED any package

many of us have always wondered how we can change this white or sometimes black screen that flutter shows before starting the application as you may know this screen that flutter shows before starting the application is called native Splash and now we want to change this the flutter document has a tutorial about this and we can change its color or replace it with the image but what about the animation how can we show animation in Native Splash for this we need our animation format to be Json designers can export the animation in Json format and then the developer can easily use it in this video we use the Lottie files website where we can download the animations in Json format for example I download this animation now we return to the project and the first thing we have to do is to add these two lines to the build.gradle file in the app folder and in the dependencies section in the next step we create a new directory called raw in the res directory and copy the Lottie Json file we have downloaded name your Lottie Json file is Splash screen.json in order to use Lottie Json file and display the animation we have to create a splash view class with its layout in res directory we create a new directory called layout it doesn't already exist and then create a new resource file called Splash view.xml and paste these contents now we need to create the splash view class we can do that by going to kotlin directory in Main and create a new kotlin class call it Splash view then ensure it looks like the following as you can see this view is in flatting Splash view layout the final step is to let main activity know about our custom Splash view so click on Main activity file here flutter activity provides a method called provide splash screen and we just need to implement it as follows and finally run the app and see that the animation is displayed in the native Splash and make the sure hit the Subscribe button to get next video foreign

Channel: Flutter Guys

Views: 30,023

Keywords: flutter tutorial, flutter, flutter 2023, flutter tutorial for beginners, flutter tips, flutter 2023 course, flutter 2023 tutorial, flutter 2023 roadmap, flutter animation, flutter animated splash screen, flutter splash screen, flutter splash screen animation, flutter animation ui, flutter animation splash screen, splash screen flutter, animation course beginners, flutter animation tutorial, lottie flutter, lottie flutter animation, lottie in flutter, flutter lottie animations

Id: PpGtiui4rXA

Length: 1min 41sec (101 seconds)

Published: Sun Mar 19 2023