Flutter使用flutter_local_notification部分设备通知图标显示白块如何解决

为什么会出现白块？ #

Android 5.0（API 21）及以上版本对通知图标有强制规范：必须是透明背景的单色（白色）图形。如果你的图标有实色背景、多色，或者只放了一个尺寸的图标没适配不同分辨率设备，就会出现白块占位的情况。只把图标放在res/drawable目录，没法覆盖所有dpi的设备，部分设备会因为尺寸不匹配渲染异常。

具体修复步骤 #

1. 制作符合要求的通知图标 #

• 准备一个透明背景、仅白色前景的图标，优先用SVG矢量图，也可以生成不同分辨率的位图：
  • 对应尺寸和存放目录：
    • mdpi: 24x24px → res/mipmap-mdpi
    • hdpi: 36x36px → res/mipmap-hdpi
    • xhdpi: 48x48px → res/mipmap-xhdpi
    • xxhdpi: 72x72px → res/mipmap-xxhdpi
    • xxxhdpi: 96x96px → res/mipmap-xxxhdpi
• 把这些图标按目录放置，统一命名（比如ic_notification.png）。

2. 配置AndroidManifest.xml #

• 在<application>标签内添加以下配置：

  <meta-data
      android:name="com.google.firebase.messaging.default_notification_icon"
      android:resource="@mipmap/ic_notification" />
  <!-- 可选：设置状态栏通知图标的背景色，仅Android 5.0+生效 -->
  <meta-data
      android:name="com.google.firebase.messaging.default_notification_color"
      android:resource="@color/your_notification_color" />
  

• 同时在flutter_local_notification初始化时指定该图标：

  const AndroidInitializationSettings initializationSettingsAndroid =
      AndroidInitializationSettings('@mipmap/ic_notification');
  

3. 排查现有图标的问题 #

如果不想重新制作图标，先检查当前的aaaa_logo.png：

• 是否有透明背景？若带实色背景，Android系统会自动将非透明区域转为白色，直接显示白块。
• 是否为单色？多色图标在Android 5.0+系统中会被过滤为白色，若轮廓不清晰就会变成白块。

4. 清理缓存后测试 #

• 执行flutter clean清理项目缓存，再重新编译运行，然后在出现问题的设备上验证图标显示效果。

内容的提问来源于stack exchange，提问作者Akhil George