Search code examples
iosswiftflutterdart

How do I remove the iOS white grid launcher icon from a Flutter app?

Photo of the white grid iOS launcher icon

I recently started to see this icon appear when locally testing my app on iPhone. Android works as intended, and iOS has worked really well until a recent Flutter update. Now, I see a white grid instead of the launcher icon I've designated.

This thread from discussions.apple.com says that the white grid app icon is due to an app that has not loaded completely, but even after installation, extensive testing, and disconnecting the phone, the launcher icon remains a white grid.

Things I've tried

Starting a debug session in VS Code produces a white grid

flutter run produces a white grid, as does flutter run --release

Here is a photo of the contents of my AppIcon.appiconset folder:

appiconset folder structure

Its structure is project/ios/Runner/Assets.xcassets/AppIcon.appiconset, and the size goes from 16 to 1024.

Again, this was working a couple of weeks ago, but the icon recently disappeared without me seemingly doing anything at all.

Solution

  • Problem: Contents.json was incorrect

    During some Flutter upgrade troubleshooting, my Contents.json file was edited and pointed to default Flutter icons that no longer exist. This meant that the PNG could not be found during compile time, so it left me with the plain white grid launcher icon

    Steps

    Open the Flutter ios folder in Xcode, click Runner in the navigator, click the Runner folder, then select Assets. Right-click AppIcon in the second-level navigator, then select Delete.

    At the bottom of the second-level navigator is a plus sign. Click the plus sign, then select Import from the menu. I previously used https://www.appicon.co/ to generate the folders and files necessary for iOS/Android mobile apps, so I found and selected the folder AppIcon.appiconset and clicked Open.

    enter image description here

    This generated a new AppIcon element in the second-level navigator, as well as a new Contents.json file to point to the images.

    Select your iOS device, then flutter run. You should see the new launcher image after the build finishes!

    P.S. I am not very proficient in Xcode, and I made up some of the verbiage for UI elements based on their function. Apologies if it doesn't line up with Apple's documentation.