Flutter 2019: Real Splash Screens Tutorial
When we talk about flutter, I feel it’s very easy to do everything but you just have to know from where to start. When it comes to things like implementing splash screen then maybe because if you are not familiar with android and ios native development then it scares us.
So that’s the reason I thought about making a tutorial specific for it to show that it’s also very easy to do these kinds of implementation now.
(Checkout — https://pawan.live to know about me.)
So follow these steps to make a simple and recommended splash screens.
For Android
Step 1: Go to android/app/src/main/res/drawable folder
Here you will find a file launch_background.xml. This is where you can write some code and make it work.
Step 2: Open launch_background.xml
Step 3: Change Background
Uncomment line 7–11 and this is where you can change your background, maybe a color or image on line 4
<item android:drawable=”@color/ic_launcher_background” />
Step 4: Change Image/Icon
This is where (on line 10) you can change your app icon or to an image which will be in the center if android:gravity is center (Make sure you add your icons for different size devices for better result).
android:src=”@drawable/qart_trans”
And That’s it!! Woohoo
For iOS
Step 1: Open the project in iOS stuff in XCode
Step 2: Go to ios/Runner Folder
You will see here Assets.xcassets folder and LaunchScreen.storyboard. These are two things which we want.
Step 3: Open Assets.xcassets and click on LaunchImage
Paste your images/icons in 1x 2x 3x Options according to recommended sizes for devices
Step 4: Now Open LaunchScreen.storyboard
Click on the view and on the right panel click the down arrow like symbol change properties like background and content mode according to your need.
Step 5: Now Click the Image on the storyboard
Now on the right panel click the down arrow like symbol gain and change its properties as per need.
And That’s it again!! Voila!!!
Your splash screens are ready.
You can also watch the video tutorial on my channel MTechViral
Link — https://youtu.be/BjV4RMkVY6w
If you want to see the flutter specific implementation for the splash screen then watch this video.
Learn More
If you would like to learn more, check out the tutorial below as well as some links with several Flutter examples to get started with.
YouTube Tutorials: https://www.youtube.com/c/MTechViral
Flutter Example Apps: https://github.com/iampawan/FlutterExampleApps
Facebook Group: https://www.facebook.com/groups/425920117856409/
I hope you have enjoyed my second attempt to write a blog post, Thank you for reading so far.
Happy developing! If you enjoyed the article make sure to show me some love and hit that clap button!
