Issue with Notification Small Icon (AwesomeNotifications) Displaying Flutter Icon Instead of App Icon

General Conversations

Hi everyone,

I'm encountering an issue with notifications in my FlutterFlow app. The notifications display correctly with the large icon showing my app logo, but the small icon is showing the Flutter icon instead of my app icon. Below is a detailed description of the problem and the steps I've tried to resolve it.

Description:

I have a FlutterFlow app where I'm trying to implement notifications using the AwesomeNotifications package. The large icon in the notifications shows my app logo correctly, but the small icon defaults to the Flutter icon. The icons in question are located in these files:

- mademoiselle/android/app/src/main/res/mipmap-hdpi/ic_launcher.png

- mademoiselle/android/app/src/main/res/mipmap-mdpi/ic_launcher.png

- mademoiselle/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png

- mademoiselle/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png

Problem:

I don't have direct access to the code files in FlutterFlow. I can download the code, but I'm unable to edit it directly.

What I've Tried:

1. Initializing without specifying a resource:

   await AwesomeNotifications().initialize(
     null,

2. Specifying the drawable resource:

await AwesomeNotifications().initialize(   
     'resource://drawable/res_app_icon',

3. Using an asset path:

await AwesomeNotifications().initialize(    
    'assets/images/app_launcher_icon.png',

Current Messaging Initialization Code:

Here is the current version of my messaging initialization code:

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/backend/schema/enums/enums.dart';
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:awesome_notifications/awesome_notifications.dart';

Future<void> initializeMessaging() async {
  await Firebase.initializeApp();

  FirebaseMessaging.instance.requestPermission().then((settings) {
    if (settings.authorizationStatus == AuthorizationStatus.authorized) {
      FirebaseMessaging.instance.getToken().then((token) {
        // Update the FCM token in your app's state.
        FFAppState().fcmToken = token ?? 'No token';
      });
    } else {
      // Handle the case where permission is not granted.
      FFAppState().fcmToken = 'No token';
    }
  });

  await AwesomeNotifications().initialize(
    null,
    [
      NotificationChannel(
        channelKey: 'alerts',
        channelName: 'Alerts',
        channelDescription: 'Notification tests as alerts',
        defaultColor: Colors.deepPurple,
        ledColor: Colors.deepPurple,
        playSound: true,
        onlyAlertOnce: true,
        groupAlertBehavior: GroupAlertBehavior.Children,
        importance: NotificationImportance.High,
        defaultPrivacy: NotificationPrivacy.Private,
      ),
    ],
    debug: true,
  );

  FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
    // Handle incoming messages here
    print('Received message: ${message.notification?.title}');
    // You can create and show Awesome Notifications here
    await AwesomeNotifications().createNotification(
      content: NotificationContent(
        id: -1, // -1 is replaced by a random number
        channelKey: 'alerts',
        title: message.notification?.title ?? 'No title',
        body: message.notification?.body ?? 'No body',
        largeIcon:
            'https://mademoiselle.sy/storage/v1/object/public/Mademoiselle/Assets/Logo/Logo-Fillet.png?t=2024-07-27T12%3A31%3A01.016Z',
        notificationLayout: NotificationLayout.Default,
        payload: {'notificationId': '1234567890'},
      ),
      actionButtons: [
        NotificationActionButton(
          key: 'DISMISS',
          label: 'Dismiss',
          actionType: ActionType.DismissAction,
          isDangerousOption: true,
        ),
      ],
    );
  });
}
import '/custom_code/actions/index.dart' as actions;
import 'package:provider/provider.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_web_plugins/url_strategy.dart';

import 'auth/supabase_auth/supabase_user_provider.dart';
import 'auth/supabase_auth/auth_util.dart';

import '/backend/supabase/supabase.dart';
import 'backend/firebase/firebase_config.dart';
import 'flutter_flow/flutter_flow_theme.dart';
import 'flutter_flow/flutter_flow_util.dart';
import 'flutter_flow/internationalization.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:flutter/foundation.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'flutter_flow/nav/nav.dart';
import 'index.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  GoRouter.optionURLReflectsImperativeAPIs = true;
  usePathUrlStrategy();
  await initFirebase();

  // Start initial custom actions code
  await actions.initializeMessaging();
  // End initial custom actions code

  await SupaFlow.initialize();

  await FlutterFlowTheme.initialize();

  final appState = FFAppState(); // Initialize FFAppState
  await appState.initializePersistedState();

  if (!kIsWeb) {
    FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;
  }

  runApp(ChangeNotifierProvider(
    create: (context) => appState,
    child: MyApp(),
  ));
}

Request for Help:

Has anyone faced a similar issue or does anyone have any suggestions on how to ensure the small icon displays correctly as my app icon instead of the Flutter icon? Any help or guidance would be greatly appreciated!

Thank you!

9 replies