Recently, I successfully implemented push notifications using FlutterFlow, Firebase FCM, a Supabase webhook with an edge function, and the Awesome Notifications package.
I followed this tutorial, skipping the iOS steps since I don't have a Mac device. Therefore, my implementation so far has been Android-based.
The only piece of code I modified was the getFCMToken function, as the version in the article didn’t retrieve the token. This version does:
Future<String?> getFCMToken() async {
await Firebase.initializeApp();
FirebaseMessaging messaging = FirebaseMessaging.instance;
//await FirebaseMessaging.instance.requestPermission();
String? token = await messaging.getToken();
return token;}After making it work, I was ecstatic. Initially, I implemented it without Awesome Notifications. I managed to send a simple notification with my app's icon. However, the notification didn’t appear as an overlay on the screen or show when the app was open. To fix this, I had to use the Awesome Notifications package, which allows for customized notification appearances. I got the notifications to display when the app is open and as overlays when the user is using their phone or another app. However, the notifications handled by Awesome Notifications show the Flutter icon instead of my app's icon.
Since my app is built with FlutterFlow, I have no idea how to configure the icon properly for notifications—specifically, where to source it from. I tried various solutions, but all of them were unsuccessful and frustrating.
After some research, I discovered that icons for Android are placed in this directory: android/app/src/main/res, which contains folders for different image sizes (mipmap-mdpi, mipmap-hdpi, mipmap-xhdpi). In iOS, it's managed in the AppDelegate.swift file.
I could try solving this by replacing the Flutter icon with my app's icon in those folders when I download the app’s code locally, but I don’t see this as an ideal solution since it would require significant effort. In fact, I haven't been able to run the FlutterFlow code on my computer after downloading it due to several errors preventing the app from running. However, I should note that the local run through FlutterFlow itself works fine.
Has anyone managed to implement push notifications using Awesome Notifications with their app’s icon instead of Flutter’s? Does anyone know why simple notifications use the app’s icon, but advanced ones with Awesome use Flutter’s? Does anyone know which directory I should access to point to my custom icon?
Update 7/10/2024:
The problem with the icon was due to the difficulty in finding the correct directory where Flutterflow saves it. In the answers to this post I show how to solve it.