How to Create Splash Screen in Flutter

[Music] hello guys again in this video we will talk about splash screen in flutter you can add splash screen manually or using packages they are the two most common ways to do [Music] this the first way go to vs code and add the image of the logo you want in splash screen for example Le I will add the Channel's logo copy the path to the image we will need it later create a splash screen. Dart this way is very common but it is not the best now we create a state full Widget the reason I call State full is because I need an init State function import material dot dot I will replace container with scaffold and I put the logo image in the center widget here you can control the shape of the image here I will change the background color to a distinctive color and you can modify many properties use the init State function and inside it I will call a private function go to home now we create a go home function that will run automatically when splash screen is called because it exists inside in its state we add Asin because it is a value that will be returned future function the delayed function has the primary task of delaying execution to the time you have previously chosen for example I will choose 2,000 mise which is equivalent to 2 seconds 2,000 isans is when the splash screen appears here after 2 seconds it will be moved to the AK test page by Navigator do push replacement do not use push but rather use push replacement in order to ensure that the user does not return from the homepage to the splash [Music] screen [Music] added cons to improve performance to see the final result I will run the project sorry I forgot to call splash screen and I will try again it actually worked the second way go to a browser and search for the flutter native Splash package in Pub dodev install the [Music] package copy the path of the image you want to place in the splash screen now I will create a flutter native sash. yaml file go back to your browser and copy this code and paste it here we see many properties including background color and image path for Android and the web and many more properties that we can control I will change the background color and then the background image the image path must be forward slash [Music] uncomment tour for Android and iOS and web there are many options you can take advantage of to create an attractive splash screen in the final step we copy this command and write it in [Music] terminal goodbye to White [Music] screens it actually worked to see the final result I will run the [Music] project it's not pretty but it works thank you for watching I hope the video is useful see you next week

Channel: AK Flutter

Views: 1,677

Keywords:

Id: EY0MFWe6jb4

Length: 6min 28sec (388 seconds)

Published: Wed Dec 27 2023