'Flutter Android Notification Icon (Grey Square)

I'm using flutter_local_notifications and everything is ok on debug mode but when I checked it on my phone with release mode the icon is turning grey square.

I'm also using this tool to generate monochrome white icon using just clipart: AndroidAssetStudio

Physical Device: Samsung galaxy s10plus

  • It works fine on emulator because it is debug mode?
  • If I use launcher icon which is colored it works on my phone + release mode BUT grey square work on emulator. I've read that since lollipop notification icon should be monochrome.

Thanks!



Solution 1:[1]

For others who might encounter the same issue.

You have to create /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/*" />

Solution 2:[2]

I did the following and it worked for me:

  1. Create a transparent and white notification icon (you can use the following tool: [AndroidAssetStudio]https://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=image&source.space.trim=1&source.space.pad=0&name=app_icon ) Download the zip folder, unzip and you'll see it contains a res folder with different drawable folders. Copy and paste the contents of the res folder in "android\app\src\main\res" path

  2. Then open the AndroidManifest.xml file and add the following lines to it: ic_stat_calendar_today is the name of my notification icon. And each of the drawable folders that have been pasted contain a different size of icon with the same name.

  3. If you want to change the color of the icon then check the above image. Add the metadata tag after the notification icon tag

  4. Go to "android\app\src\main\res\values" and add a colors.xml file

<!-- 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/app_icon" />
        <!-- 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" />

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--    color red for android notification-->
    <color name="colorAccent">#BB2030</color>
</resources>

+++ AND if you use .show, you can add color in function:

_flutterLocalNotificationsPlugin.show(
        notification.hashCode,
        notification.title,
        notification.body,
        NotificationDetails(
          android: AndroidNotificationDetails(
            _channel.id,
            _channel.name,
            channelDescription: _channel.description,
            icon: 'app_icon',
            importance: Importance.max,
            priority: Priority.max,
            color: Color(0xFFBB2030),
          ),
        ),
        payload: jsonEncode(message.data),
      );

+++ References: https://github.com/flutter/flutter/issues/17941#issuecomment-622268132

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 superariesss
Solution 2 Ke Nguyen Duc