Android & iOS 使用 flutter_launcher_icons 0.9.2 时的通知图标（灰色）

Question

I believe the question has been asked in various places like GitHub, Stackoverflow, Reddit & other forums.

Using flutter and firebase notifications some devices are generating 'grey area' icons when receiving a notification.

For example: I've used the plugin flutter_launcher_icons 0.9.2 Which generates icons for both iOS & Android, also updates AndroidManifest.xml file for android. code below:

    package="xxxxxxDeletedxxxxx">
   <application
        android:label="xxxxxxDeletedxxxxx"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name="xxxxxx"
            android:exported="true"
            android:launchMode="singleTask"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <!-- Set custom default icon. This is used when no icon is set for incoming notification messages. -->
            <meta-data
                android:name="com.google.firebase.messaging.default_notification_icon"
                android:resource="@drawable/ic_launcher" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
            <intent-filter android:autoVerify="true">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data
                    android:scheme="https"
                    android:host="xxxx" />
            </intent-filter>
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
   </manifest>

The AndroidManifest.xml files indicates, that path for Icon has been set and the icons are generated.

To troubleshoot:

I've added same icon in both drawable and mipmap (found on github that this might help). [https://i.stack.imgur.com/OGGtj.png]

The end result ->

Samsung s10 receives notification with the expected icon. Pixel 6 phone(physical) or a random emulator with Android 27lvl API shows grey area icon .

There are multiple answers/solutions but none of them are pointing to what is actually causing the main problem.

I understand this is a repeated question, but there are no proper solutions/documentation to this case. I'm sure other people will benefit from it.

Regards

Answer 1

Some phones need monochrome notification icons with transparent background. So if you don't have transparent background, all colours will be converted to one and you will only see monochrome circle/square. Also meta-data inside activity didn't worked for me, so you can try to move it outside, something like this:

<application>
<activity>
   ...
</activity>

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_notification" /></application>