Push Notifications in Flutter

In this blog post, you'll learn how to implement Push Notifications in Flutter app development using the Flutter plugin "firebase_messaging." Using this plugin, your app can recieve message and data notificattion in both android and iOS app.

Now let's get started!

Requirements 

1 Setup Firebase Cloud Messaging for both android and iOS.

2 Implement Firebase functions in Flutter project

3 Setup Local Notification in Flutter project

Steps to Integarte 

1 Open pubspec.yaml file and add the notification plugin in dependencies

    firebase_messaging 6.0.9

2 Run Flutter command to attach the dependencies

   Get dependencies

3 Integrations 

To integrate your plugin into the Android:

add this code into androidmainfest.xml file 

<intent-filter>
    <action android:name="FLUTTER_NOTIFICATION_CLICK"/>
    <category android:name="android.intent.category.DEFAULT"/>
</intent-filter>

To integrate your plugin into the iOS:

add this code into appdelegate file

if #available(iOS 10.0, *) {
  UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
}

@available(iOS 10.0, *)
override func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void)
{
    
    completionHandler([.alert, .badge, .sound])
}

4  Get the device token with the help of this code

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

FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = new FlutterLocalNotificationsPlugin();

 void getMessage(){
    final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
    String _message = '';
    _firebaseMessaging.getToken().then((token) {
      print("----------------");
      print(token);
      print("----------------");
    }
    );
    if (Platform.isIOS){
      _firebaseMessaging.requestNotificationPermissions(
          IosNotificationSettings(sound: true, badge: true, alert: true)
      );
      _firebaseMessaging.onIosSettingsRegistered
          .listen((IosNotificationSettings settings)
      {
        print("Settings registered: $settings");
      });
      print("ios platform");
    }
    _firebaseMessaging.configure(
        onMessage: (Map<String, dynamic> message) async {
          print('on message $message');
          showNotification(message);
//          setState(() => _message = message["notification"]["title"]);
        }, onResume: (Map<String, dynamic> message) async {
      print('on resume $message');
//      setState(() => _message = message["notification"]["title"]);
    }, onLaunch: (Map<String, dynamic> message) async {
      print('on launch $message');
//      setState(() => _message = message["notification"]["title"]);
    });
    var initializationSettingsAndroid =
    new AndroidInitializationSettings('@mipmap/ic_launcher');
    var initializationSettingsIOS = new IOSInitializationSettings();
    var platform = InitializationSettings(initializationSettingsAndroid,initializationSettingsIOS);

    flutterLocalNotificationsPlugin.initialize(platform);

  }
  void showNotification(Map<String, dynamic> message) async{
    var android = new AndroidNotificationDetails("channel_id","CHANNLE NAME","channelDescription");
    var ios = new IOSNotificationDetails();
    var platform = new NotificationDetails(android, ios);
    await flutterLocalNotificationsPlugin.show(0, message["notification"]["title"],message["notification"]["body"],platform);

//  message["notification"]["data"]
  }

5 Open firebase console and send the push notification 

Official Links

1 Push notification plugin: https://pub.dev/packages/firebase_messaging#-readme-tab-

2 Firebase Console : https://firebase.google.com

3 Apple Developer : https://developer.apple.com