skip to Main Content

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.

2

Answers


  1. Chosen as BEST ANSWER

    Here's how I fixed this issue

    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

    How I fixed the issue

    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.


  2. This issue occurs because the launch icon has not been set up. To fix it, follow these steps:

    Follow these steps:

    Using Package:

    1. Install the flutter_launcher_icons package:
    flutter pub add flutter_launcher_icons
    
    1. Configure your pubspec.yaml file:
    flutter_launcher_icons:
      android: "launcher_icon"
      ios: true
      image_path: "assets/icon/icon.png"
      min_sdk_android: 21 # android min sdk min:16, default 21
      web:
        generate: true
        image_path: "path/to/image.png"
        background_color: "#hexcode"
        theme_color: "#hexcode"
      windows:
        generate: true
        image_path: "path/to/image.png"
        icon_size: 48 # min:48, max:256, default: 48
      macos:
        generate: true
        image_path: "path/to/image.png"
    
    1. run the package & it generates the icons for all the required platforms:
    flutter pub get
    flutter pub run flutter_launcher_icons
    

    Manually (using XCode)

    1. Open the workspace file in Xcode and run the project:
    ios/Runner.xcworkspace
    

    1. Generator App icon & import it into the assets directory. You can use this to generate the icons: App icon Generator Link

    2. Navigate to the assets folder in Xcode and import the icon into the following directory:

    ios/Runner/Assets.xcassets/AppIcon.appiconset
    

    AppIcon

    Ensure the asset name is AppIcon

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search