Latest Flutter Splash Screen Tutorial 2023 | Splash Screen Design UI

asalam alikum welcome back to cing with t today we are going to learn how to set up native splash screen in flutter if you're already following you know that we are creating flutter e-commerce application and today we're officially going to start our section two in which we will start developing our application in the previous tutorial we learn how to set up or configure our application in a way that any large application can easily be configured and definitely our project should be designed in a way that we can easily enhance new functionality or we can reuse our project features and functional ities in other projects so in section two we're going to learn how to create login applications the first thing we need before coding anything is the splash screen cuz every app has a brand so it's a best way to do The Branding so without wasting time let's get start with the [Music] coding open Andro studio and we are inside our flutter project so the first thing we need to do is go to the pope.l file and inside you have to add flutter native Splash this is the the URL of lternative Splash and you have to get the latest version from here just copy it open the psml file and you just have to past it once pasted you can run from the terminal flutter pubg or hit pubg from here once the dependency is added there are two ways to add flutter native splash the first one is we can directly start coding inside the pop speec DML file and the other way is we should create a separate file and then add anything related to splash screen inside that new file the reason to create a separate file for splash screen is that we can simply copy and paste that flash file into other projects so let's first start creating at the top at the root level right click create a new file we're going to name it splash. yl this is a yl file so let's hit enter now to create a flutter native splash screen inside this we just have to write flutter native Splash colon in the yl file we have to be very careful with the spaces so you can see at the CH we don't have any space and then next it's automatically given two spaces one and two now we have to create properties for both the light mode and for the dark mode so first of all let's see if we want to add color to our background to add a color we have a color property in which I'm going to pass light color in the previous St I talked about that you have to add hexa colors to use colors in the dart but in here inside this EML file you don't have to add hexa you just have to directly add your color and definitely it will be inside double quotes and then if you want to add add dark mode you have again another property called coloror dark and inside you have to pass the dark color next to add a logo we are going to use the image property we to add light mode image again it's a light mode so first of all you have to add assets go to assets inside the logos I have added two images this is for the light mode and this is for the dark mode to copy this right click and go to copy path reference copy the path from content route go to ml file and past it right away you can see I have not added any single quote or double quotes then same control D to duplicate and for the dark mode logo it's again image undor dark copy path reference and I have to copy the same image and paste it over here basically the splash screen is ready but one more thing that if you're going to use your application above Android 12 you just have to write Android 12 again right below this image dark and you just have to copy and paste files the same way we have at the top and then down below we are going to use web as F because web is not going to keep contain any splash screen and you can see the identation now here come the tricky part in which you have to put your focus open the terminal you have to write this command flutter P run flutter native Splash colon create because want to create the splash screen and then with the two hyphens path should be provided because we are creating a separate file if you don't have separate file you just have to write column create and that's it you don't have to pass this path over here but if you want to create a separate file if it's inside some other folder you have to write a folder complete path but as we have directly inside the root directory slash. AML we don't have to provide any path so hit enter again you can see that our splash screen is completed and it's already added inside our project okay so let's run the application okay as you can see with the dark mode splash screen appears for a few seconds and it's gone now let's try to switch it to the light mode Let's rerun it and you can see the light mode appears for a few second and again it's gone so this is how we create Splash screens in flutter now the next thing is that how we can remove it let's go to terminal again if you want to remove your flutter splash screen you just have to write again flutter pub run flutter native Splash column previously we write create and now we have to write remove and that's it you just have to hit enter and your flutter native Splash will be removed and one more thing that in up up coming videos in the main Ro Dart we are going to add native Splash over here because we want our native Splash to wait until our application loads properly and all the back end all the database loads so in the upcoming videos we will first write a weit sign over here and then we are going to remove the splash screen in the authentication repository okay so that's it for today's tutorial I hope you learn something new if you learn something new please like the video and if you're new to this channel don't forget to subscribe and hit the Bell icon to get notified of all the upcoming videos If you want to get the code you can get it from the coding with .c link is also in the description once again thank you for watching take care Allah

Channel: Coding With T

Views: 29,951

Keywords: flutter splash screen 2023, flutter native splash screen 2023, flutter splash screen ui, flutter splash screen native, flutter splash screen tutorial, flutter splash screen, flutter native splash screen, launch screen in flutter, splash screen flutter tutorial, flutter splash screen animation, splash screen using flutter, create splash screen using flutter, splash screen in flutter app, flutter splash screen example, remove flutter native splash screen, Coding with t

Id: ShR_aqji3Mg

Length: 5min 35sec (335 seconds)

Published: Fri Sep 29 2023