Flutter Launch Image in iOS

fluttertanzania

Flutter Tanzania

Posted on January 20, 2024

Flutter Launch Image in iOS

In this article we'll learn how to add a custom Launch Image in Flutter, by default when you run you're Flutter project in iOS simulator or phone you'll notice that it first start's a blank white screen and continues to you're project Splash Screen.

Here's an outcome of this article

Image description

Let's work on that.

If you have you're app logo you can generate a splash screen Image from this website.

When you upload you're logo image, website will provide a pop where you can adjust logo position and background color, after finishing adjustment click generate asset button.

Image description

For this article we'll focus on Phones screen and not iPad. When assets are generated we'll scroll down until we see phone's splash screen.

Image description

You can click any portrait splash screen and download it.

Now let's switch to Xcode.

Open you're Flutter project in Xcode and let's through the following process.

First expand Runner by clicking the expand Icon on the left side of the Runner

Image description

After expand Runner You'll see another Runner folder just below Flutter folder and expand it again.

Image description

After expanding the Runner, you'll see a Folder named Assets click it, and it will give you two options

  • AppIcons - for you're app Icon
  • LaunchImage - for you're app launch image

Image description

Click LaunchImage option and you'll see three options for uploading image but current they're blank.

Double click each option and select the downloaded splashScreen

Image description

And boom we're done, you can now run you're app and you'll see it start's with a custom launch image and not a blank white screen again.

💖 💪 🙅 🚩
fluttertanzania
Flutter Tanzania

Posted on January 20, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related