Firebase通知是灰色的Flutter。

Question

我正在使用Firebase Cloud Messaging向我的Flutter应用发送通知。它运行良好，但我的应用程序图标通知在Google Pixel XL上为灰色。我可以看到轮廓，但由于某种原因，它仍然是灰色的。我在不同的文章中读到，这与Android SDK级别有关，但Flutter中的minSdkVersion已经是16（小于21），所以我不明白为什么颜色不会显示。

那么，是否有可能显示我的应用程序图标的颜色通知？

--提前致谢

- Prince Hodonou

---

你在说哪种类型的图标？是托盘栏上的图标还是锁定/向下滑动屏幕上看到的通知图标？ - shadowsheep

你在锁定/向下滑动屏幕看到的通知图标。 - Prince Hodonou

是的，我给它添加了一条注释。 - Prince Hodonou

嘿，你好^^。 你最终有彩色通知图标了吗？ - shadowsheep

你是否按时完成了任务？有什么消息吗？ - shadowsheep

Answer 1

这里 你可以阅读:

自定义默认通知

自定义默认图标

设置自定义默认图标允许您指定在通知负载中未设置图标时用于通知消息的图标。还可使用自定义默认图标设置从Firebase控制台发送的通知消息使用的图标。 如果未设置自定义默认图标且通知负载中未设置图标，则使用应用程序图标（以白色显示）。

自定义默认颜色

您还可以定义与您的通知一起使用的颜色。不同的Android版本以不同的方式使用此设置: Android < N将其用作图标的背景颜色。Android >= N将其用于着色图标和应用名称。

尝试将上述内容放入您的 AndroidManifest.xml 中。

<!-- 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_stat_ic_notification" />
<!-- Set color used with incoming notification messages. This is used when no color is set for the incoming notification message.  -->
<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/colorAccent" />

你可以在这里找到更多信息。

同时，你需要定义colorAccent。你可以在res文件夹中创建一个colors.xml文件，类似于以下内容：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorAccent">#E91E63</color>
</resources>

在这个文件夹中：/android/app/src/main/res/values

此外，图标必须位于drawable文件夹中。

但请记住，这个图标必须是白色，并且有一个透明的背景。

对于某些类型的图标，要使它们变成彩色，需要在某些设备集上添加您已经在AndroidManifest.xml中添加的meta-tags，并且您的图标必须遵循一些规格（必须是白色的透明背景）。您可以在这里尝试生成一个。试试吧。请记得将其放在drawable文件夹中，并更新清单meta-tag图标名称。

也可以阅读这个SO问题来加强我在这里所说的。

我已经在运行API级别27的Pixel 2模拟器上尝试过：

希望能对您有所帮助。

- shadowsheep

---

谢谢你的回答，但我遇到了一个“错误：找不到资源颜色/ colorAccent（又名com.package.package：color/colorAccent）”的错误。我应该在哪里添加颜色资源？ - Prince Hodonou

我已经尝试过这样做： 它编译一切正常，但图标仍然是灰色的。感谢您的帮助！ - Prince Hodonou

@PrinceHodonou 真奇怪。不幸的是我没有那么幸运拥有一个Pixel XL来尝试一下 ^_^。在不同的设备上，您是否看到真实颜色或始终为黑白的图标？我可以问一下您是否将图标设置为通知JSON负载中的一部分吗？到目前为止，所有我的flutter FCM尝试，在未在JSON负载中设置图标的情况下，在我的设备上都会显示带有鲜艳颜色的flutter图标。 - shadowsheep

哈哈，我在一台旧的Android设备上运行了应用程序，图标是彩色的。不，我没有在我的负载中设置图标。我甚至不知道你可以这样做哈哈。所以当你使用FCM时，所有的图标都是彩色的吗？这确实很奇怪。 :) - Prince Hodonou

@PrinceHodonou，要使这些图标变成彩色的，您需要在某些设备上设置元标记，而您已经在manifest.xml中添加了该元标记，并且您的图标必须遵循一些规格。您可以尝试在此处生成一个图标，然后将其放置在drawable文件夹中并更新manifest元标记。试试看吧。记得让我知道结果。 - shadowsheep

Answer 2

我知道这个问题与Firebase通知有关，但是当我搜索本地通知灰色图标错误时，此帖子出现了...最终我能够找到解决方法（在我的情况下，在调试模式下图标工作正常，但在构建apk时图标变成了灰色方框）

解决方法：在 Android/app/src/main/res中创建一个名为 raw 的新目录，在该目录中添加一个名为 keep.xml 的文件，并将以下内容复制粘贴：

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools"
    tools:keep="@drawable/*" />

- Pushkara Sharma

---

你真的让我的一天变得美好，也省去了我一整天的搜索时间。但是出于好奇，你是如何想到这个解决方法的呢？ - techpool

只是很多搜索和尝试。当我找到答案时，我会回到这个问题，以便其他人不必面对同样的问题。感谢@techpool的赞赏。 - Pushkara Sharma

为什么这个不能用 "tools:keep="@mipmap/*""？ - Ania

Answer 3

我按照以下步骤操作成功：

1. 创建一个透明且白色的通知图标（可以使用 AndroidAssetStudio 工具）

下载zip文件并解压，你会看到里面包含带有不同drawable文件夹的res文件夹。将res文件夹中的内容复制并粘贴到“android\app\src\main\res”路径中。

2. 然后打开AndroidManifest.xml文件并添加以下行：

ic_stat_calendar_today是我的通知图标名称。每个被粘贴的drawable文件夹都包含相同名称但大小不同的图标。

3. 如果您想更改图标的颜色，请查看上面的图片。在通知图标标记后添加元数据标记

4. 转到“android\app\src\main\res\values”并添加一个colors.xml文件

<color name="colorAccent">#00FF00</color>

我也在以下的 Github 链接中分享了这个答案：解决方案。

- user2549980

Answer 4

大多数人都犯了一个错误。他们把元标签放在了错误的位置。

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

在 <activity> 标签内部放置代码，而它们应该放在 <application> 标签的上面和内部。 例如:

    package="xxxx">
   <application
        android:label="xxxx"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
       <meta-data
           android:name="com.google.firebase.messaging.default_notification_icon"
           android:resource="@drawable/ic_notification" />
       <meta-data
           android:name="com.google.firebase.messaging.default_notification_color"
           android:resource="@color/colorAccent" />
        <activity
            android:name="xxxx"
            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"
              />
            <meta-data
                android:name="com.google.android.gms.wallet.api.enabled"
                android:value="true" />
            <!-- Set custom default icon. This is used when no icon is set for incoming notification messages. -->
            <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="flutterstripe" android:host="safepay" />
                <data
                    android:scheme="https"
                    android:host="xxxxx" />
            </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>


Also its important to create separate file colors.xml and include color of your choice.
```` <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splash_color">#00ABC8</color>
 </resources>



Rebuild app (close and run again)

and it will work.

- petras J

Answer 5

如果在添加以下内容后仍然遇到问题：

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" … />

请确保将它直接添加到 <application/> 标签下，而不是 <activity/> 标签下，在 AndroidManifest.xml 中。

- Volodymyr Lymar

Answer 6

这是我的发现。

1. 使用AndroidAssetStudio生成通知图标。

2. 尝试将其放入您的AndroidManifest.xml中。

<!-- 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_stat_ic_notification" />
<!-- Set color used with incoming notification messages. This is used when no color is set for the incoming notification message.  -->
<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/colorAccent" />

注意：以上更改应该在<application>标签下，而不是<activity>标签下。

3. 还要检查minSdkVersion。当我使用minSdkVersion 20时，它不能正常工作，但当我设置为minSdkVersion 21时，它可以正常工作。

- Abhijeet Navgire

Answer 7

如果在发布版中没有显示图标，请在android/app/build.gradle文件的“buildTypes”部分添加以下内容：

shrinkResources false

buildTypes {
    release {
        shrinkResources false  //  <------------

    }
}

- stacklover