skip to Main Content

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
enter image description here

android notification icon
enter image description here

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)
  );
}

5

Answers


  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

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
  3. 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

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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search