A Simple Flutter Splash Screen: Part 1
Getting started with splash screens
Flutter is a framework that anyone who is interested in coding can easily learn. This framework brings everything to develop an amazing user-friendly mobile app with its eye-catching features.
By going through this article, you will be able to develop a simple flutter splash screen that can use to build a creative mobile app. Splash screens provide a simple initial experience for the user while your app getting loaded.
In Flutter, splash screens can be created in two ways.
1. Editing launch_background.xml file
2. Use Flutter splash screen package
This article is focused on the first method and the second method will be discussed in part 2 of this article.
HANDS-ON…!
Step 1: Create a new flutter project
You can choose any IDE based on your preference for this. I’m using Intellij IDEA, so every screenshot has been taken from it. This is the initial page you get when you run the project.
Step 2: Go to the launch_background.xml file on android/app/src/main/res/drawable
By editing this you can customize the splash screen.
Step 3: Change the background color of the splash screen
Initially, the splash screen is white. You can change the color by changing the following code.
Step 4: Add an Image
You also can add an image for your splash screen as follows.
Here I have used the initial flutter app icon which is located at mipmap files as the splash image. You also can try with any image you like.
That’s simple right?
Now your splash screen is ready.
Let’s discuss the second method in part 2 of this article.
Thank you for reading so far and hope you learned something. If you enjoy my article, make sure to hit the clap button.
Happy coding!
