Monochrome Icon Problem and Compatibility Issues with Older Phones

[odenath]

Hi, I'm developing an app and I'm almost finished, but I'm facing an issue with the app icon. I'm using two different packages: flutter_launcher_icons to generate icons and flutter_local_notifications to send notifications from my API.

Here are my configurations:

flutter_launcher_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/logo/logo.png"
  min_sdk_android: 24 # android min sdk min:16, default 21
  adaptive_icon_monochrome: "assets/logo/monocro_logo.png"
  adaptive_icon_background: "#FFFFFF"
  adaptive_icon_foreground: "assets/logo/logo.png"
#
# dart run flutter_launcher_icons

This setup works fine on my Android tablet running Android 14 with UI 6.11. However, on newer phones that use monochromatic icons (when you scroll down), it only displays a black icon.

Here’s the code snippet I’m using for notification initialization:

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

Unfortunately, this doesn't work when scrolling down on recent Android versions, including Android 10.

Here’s how it looks on my tablet (working correctly):

And here’s how it appears on an Android 10 device (not working as expected):

This is how it’s supposed to look on modern phones: when you scroll down, the app should display a monochromatic icon. However, in my case, nothing shows up:

I hope someone can help me figure out what’s going wrong!

[odenath]

import 'dart:async';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await NotificationService.instance.setupFlutterNotifications();
  await NotificationService.instance.showNotification(message);
}

class NotificationService {
  NotificationService._();
  static final NotificationService instance = NotificationService._();

  final _messaging = FirebaseMessaging.instance;
  final _localNotifications = FlutterLocalNotificationsPlugin();
  bool _isFlutterLocalNotificationsInitialized = false;
  String? tokenPublico;
  Future<void> initialize() async {
    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

    // Request permission
    await _requestPermission();

    // Setup message handlers
    await _setupMessageHandlers();

    // Get FCM token
    final token = await _messaging.getToken();
    tokenPublico = token;
    print('FCM Token: $token');
  }

  Future<void> _requestPermission() async {
    final settings = await _messaging.requestPermission(
      alert: true,
      badge: true,
      sound: true,
      provisional: false,
    );

    print('Permission status: ${settings.authorizationStatus}');
  }

  Future<void> setupFlutterNotifications() async {
    if (_isFlutterLocalNotificationsInitialized) {
      return;
    }

    // Android setup
    const channel = AndroidNotificationChannel(
      'high_importance_channel',
      'High Importance Notifications',
      description: 'This channel is used for important notifications.',
      importance: Importance.high,
    );

    await _localNotifications
        .resolvePlatformSpecificImplementation<
        AndroidFlutterLocalNotificationsPlugin>()
        ?.createNotificationChannel(channel);

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

    // iOS setup
    final initializationSettingsDarwin = DarwinInitializationSettings();

    final initializationSettings = InitializationSettings(
      android: initializationSettingsAndroid,
      iOS: initializationSettingsDarwin,
    );

    // Flutter notification setup
    await _localNotifications.initialize(
      initializationSettings,
      onDidReceiveNotificationResponse: (details) {
        final payload = details.payload;
        if (payload != null) {
          print('Payload recebido: $payload');
          // Adicione lógica para tratar a interação com a notificação
        }
      },
    );

    _isFlutterLocalNotificationsInitialized = true;
  }

  Future<void> showNotification(RemoteMessage message) async {
    RemoteNotification? notification = message.notification;
    AndroidNotification? android = message.notification?.android;
    if (notification != null && android != null) {
      await _localNotifications.show(
        notification.hashCode,
        notification.title,
        notification.body,
        const NotificationDetails(
          android: AndroidNotificationDetails(
            'high_importance_channel',
            'High Importance Notifications',
            channelDescription:
            'This channel is used for important notifications.',
            importance: Importance.high,
            priority: Priority.high,
            icon: 'ic_notification', // Use o nome do ícone sem extensão
          ),
          iOS: DarwinNotificationDetails(
            presentAlert: true,
            presentBadge: true,
            presentSound: true,
          ),
        ),
        payload: message.data.toString(),
      );
    }
  }

  Future<void> _setupMessageHandlers() async {
    // Foreground message
    FirebaseMessaging.onMessage.listen((message) {
      showNotification(message);
    });

    // Background message
    FirebaseMessaging.onMessageOpenedApp.listen(_handleBackgroundMessage);

    // Opened app
    final initialMessage = await _messaging.getInitialMessage();
    if (initialMessage != null) {
      _handleBackgroundMessage(initialMessage);
    }
  }

  void _handleBackgroundMessage(RemoteMessage message) {
    if (message.data['type'] == 'chat') {
      // Open chat screen
    }
  }
}

``

Here are the full code, about how i have implemented, my notifications!

[jayantur13]

Try making the icon with icon.kitchen website , looks fine for me in Android 11

[odenath]

Try making the icon with icon.kitchen website , looks fine for me in Android 11

Does the flutter_local_notifications package automatically use the monochromatic logo, when is required?

[jayantur13]

@odenath I think not, I tried "@mipmap/ic_launcher or ic_launcher_monochromatic" and you can also use "@drawable/image_name"