Flutter vs FCM: Firebase IOS Setup📲🚀(Part 3)

Lazizbek Fayziyev
4 min readFeb 11, 2024

--

Unlock smooth push notifications on iOS in your Flutter app!

Wondering how to boost user engagement with seamless notifications? Look no further! This guide tackles the nuances of enabling Firebase Cloud Messaging (FCM) for iOS devices in your Flutter app.

In this part, we will talk about enabling FCM to IOS devices. Testing first notifications, and Add notification icon.

To work FCM in ios devices, there are bunch of stuffs to do. They are all well documented and explained in this link. So i don’t want to wast your time with dublicating the same instruction again and again. But focus on fixing some issues, that you would face even after you have done all steps in the documentation. Sound good? )

Stop struggling with iOS FCM — it’s time to take control!

Your app is working fine, without any issue… But notification is not coming? Then Check all below cases:

  1. Please test the app on real IOS device. You have to test it in real device, to work notification correcly.
  2. Make sure your APN key IDs is correct, and uploaded on firebase console.
  3. Before calling getToken(), call getAPNSToken():
 if (Platform.isIOS) {
await FirebaseMessaging.instance.getAPNSToken();
} else {}
String? token = await FirebaseMessaging.instance.getToken();

3. Add following keys to Info.plist file:

 <key>FirebaseAppDelegateProxyEnabled</key>
<string>NO</string>

Still not getting notifications? Open AppDelegate.swift file, and import Firebase(if not imported). And add following code inside FlutterAppDeletegate method:

import UIKit
import Flutter
import GoogleMaps
import Firebase

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {

// Add the following line, with your specific Firebase options:
if #available(iOS 10.0, *) {
UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
}
FirebaseApp.configure()
application.registerForRemoteNotifications()
// added content end

GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}

4. Make sure you enabled Push Notifications and Background Modes in all modes: Release/Debug/Profile

After following above steps, i could successfully enabled notification. And it is working even in release mode.

You wanna to update app icons or Notification icons? I recommend you to install AppIconBuilder app in your mac. All you need to to drag and drop you icon inside it, and it will generate icons for IOS, Android, Mac/Windows even Web ))

Then replace AppIcon.appiconset folder with the folder(named the same and located: ios/Runner/Assets.xcassets/AppIcon.appiconset). Run the app again. This time it will be build with your brand new icon!

Let’s test first notifications!

To test notifications, in most cases, you will need to get fcm token, and save it to somewhere.

You can get fcm token with this method (i mentioned it above as well):

FirebaseMessaging messaging = FirebaseMessaging.instance;
String token = await messaging.getToken();

And on Firebase console:
1. Open cloud messaging tab
2. Create new campaign > choose Notification
3. Give notification title and body

4. click send test message button, add the token you got on testing device, and hit Test button. Your first test message sent!

If you’re having trouble with implementing FCM to android devices, please following article:

If you want and show interests in comments, I will write about most asked questions and answers regarding FCM in Flutter.

Thanks a bunch for diving into this guide! If you had a good time or found it useful (or maybe both), show some love by hitting that subscribe button, showering it with claps, and sending in your fantastic feedback! Your support means the world and keeps the fun posts coming. Let’s make this journey together even more awesome — stay tuned for more! 😊🚀

--

--

Lazizbek Fayziyev

[🌟100% Follow-Back🌟] Mobile/Desktop App Developer 🧑‍💻. Follow for more tips and best practices in Flutter 📱