Flutter: Firebase notifications (FCM)

A quick way to get notifications on flutter apps is firebase cloud messaging.

I hope you know how to make a firebase project and add it to the flutter app.

If not, try this first: Add Firebase to Flutter

Now let's start with real implementation with flutter, android, firebase notifications.

Navigate to android/app/src/main/AndroidManifest.xml and add the following lines in <activity> … </activity>

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

android manifest

Your manifest file should look like this.

Its time for some flutter coding.

Add firebase messaging dependency in pubspec.yaml

firebase_messaging: ^4.0.0+1

Run packages get to sync projects for added dependency. then….

Create a file as firebase_notification_handler.dart and add the following code.

import 'dart:io';

import 'package:firebase_messaging/firebase_messaging.dart';

class FirebaseNotifications {
  FirebaseMessaging _firebaseMessaging;

  void setUpFirebase() {
    _firebaseMessaging = FirebaseMessaging();
    firebaseCloudMessaging_Listeners();

  }

  void firebaseCloudMessaging_Listeners() {
    if (Platform.isIOS) iOS_Permission();

    _firebaseMessaging.getToken().then((token) {
      print(token);
    });

    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print('on message $message');
      },
      onResume: (Map<String, dynamic> message) async {
        print('on resume $message');
      },
      onLaunch: (Map<String, dynamic> message) async {
        print('on launch $message');
      },
    );
  }

  void iOS_Permission() {
    _firebaseMessaging.requestNotificationPermissions(
        IosNotificationSettings(sound: true, badge: true, alert: true));
    _firebaseMessaging.onIosSettingsRegistered
        .listen((IosNotificationSettings settings) {
      print("Settings registered: $settings");
    });
  }
}

Make a call to this file from your first page or file or activity or view or Stateful widget or stateless widget whatever you have ;)

import firebase_notification_handler.dart

import 'package:myapp/firebase_notifications/firebase_notification_handler.dart';
@override
void initState() {
  super.initState();
  new FirebaseNotifications().setUpFirebase();
}

Its time for action on firebase console. Open firebase in a browser and then go to cloud messaging. If it is your first time then you will see something like this

firebase cloud messaging

Hit on send your first message and then for fill all fields

firebase notification steps

Hit next button. Now click on the select app and select one app where you have written above firebase notification codes.

Hit next and for now keet scheduling as Now

Hit next and then again next skip Conversion events (optional) part

Fill Additional options if you want or skip

click on review

then click on publish. you will receive a notification on your phone.

Note: build the above code in the app and install it in your phone before publishing this notification.

Connect with me on: Github Twitter LinkedIn Instagram Youtube Patreon

#Happy Coding

• **Subscribe for upcoming posts. Thanks for reading. Let me know what you think about this post.

#fcm #firebase #firebasecloudmessaging