如何更改本地通知图标？

Question

I made the local notification icon with png file. However, in android, the icon looks transparent. It looks good in ios app. How can I show the original icon image as a notification icon?

ios notification icon

android notification icon

Notification code

import 'package:flutter_local_notifications/flutter_local_notifications.dart';
// import 'package:timezone/data/latest_all.dart' as tz;
// import 'package:timezone/timezone.dart' as tz;

final notifications = FlutterLocalNotificationsPlugin();

initNotification() async {

  var androidSetting = const AndroidInitializationSettings('ic_launcher');

  var iosSetting = const IOSInitializationSettings(
    requestAlertPermission: true,
    requestBadgePermission: true,
    requestSoundPermission: true,
  );

  var initializationSettings = InitializationSettings(
      android: androidSetting,
      iOS: iosSetting
  );
  await notifications.initialize(
    initializationSettings,
  );
}

showNotification() async {

  var androidDetails = const AndroidNotificationDetails(
    'ID',
    'notification',
    priority: Priority.high,
    importance: Importance.max,
    // color: Color.fromARGB(255, 255, 0, 0),
  );

  var iosDetails = const IOSNotificationDetails(
    presentAlert: true,
    presentBadge: true,
    presentSound: true,
  );

  notifications.show(
      1,
      'title1',
      'content1',
      NotificationDetails(android: androidDetails, iOS: iosDetails)
  );
}

Answer 1

I have the same problem today. For android, you need to change the icon, android -> app -> main -> res -> drawable and that name put inside

var androidSetting = const AndroidInitializationSettings('ic_launcher');

inside but for iOS I don't know where to change

Answer 2

You can try this for android icon

https://medium.com/nonstopio/change-the-firebase-notification-icon-in-a-flutter-245b7f7dc546

Answer 3

Yes, you can use png image color, and it will show color icon on notification.

ex: image file ic_launcher.png

create new file in your drawable folder

launcher_notification.xml

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:gravity="fill" android:src="@drawable/ic_launcher"/>
    </item>
    <item>
        <bitmap android:gravity="center" android:src="@drawable/ic_launcher"/>
    </item>
</layer-list>

and put "launcher_notification" in

var androidSetting = const AndroidInitializationSettings('launcher_notification');

if it show grey icon on emulator, try it on your phone. It's same if you want to use it for firebase notification icon

Answer 4

If it helps, I just change the icon in the @mipmap files and keep the same name as ic_launcher . The code does the rest. It's a lazy approach but prevents you from an big headache

Answer 5

If your notification Icon is displaying a grey or white color, check if the image you are using is transparent.

Answer 6

1. You need an image with a transparent background
2. Put the image inside android/app/src/main/res/drawable . Ex: notification.png
3. Set the image configuration

 const androidSetting = AndroidInitializationSettings('notification');

where notification is the name of the image you put inside the drawable directory without the extension .png .