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!