What is Firebase Cloud Messaging?

Firebase Cloud Messaging or FCM is used to send notifications to users. To be able to send messages, you need to retrieve the fcm token of the user. After doing that you can either use Firebase Cloud Functions or your own server to be able to send the notifications.

Creating a New Flutter Project

First we will require to create an example Flutter app.

If you have flutter environment already installed in you system, you can run the below command to create a new application:

flutter create flutterfcm

Using flutter create command will create new application with single default screen that will display the number of times a button is clicked. Now navigate to the new project directory:

cd flutterfcm

Now that we’ve got a Flutter project up and running, we can add Firebase. After that we need to create firebase project in google.

Creating a New Firebase Project

To create Firebase project, go to Google Firebase and log in with your Google account. In Firebase dashboard, select the Create new project button and provide  a name.

How to Add Firebase Messaging to your Flutter app
How to Add Firebase Messaging to your Flutter app

Now enable google analytics for your firebase project and click continue.

How to Add Firebase Messaging to your Flutter app
How to Add Firebase Messaging to your Flutter app

Now select your country and accept term and conditions. And click on create project.

Once project created, click on project name and go to  Project Settings. Then enable Cloud Messaging.

Set Up Firebase with Flutter for iOS and Android Apps
Set Up Firebase with Flutter for iOS and Android Apps
Set Up Firebase with Flutter for iOS and Android Apps
Set Up Firebase with Flutter for iOS and Android Apps

 

Set Up Firebase with Flutter for iOS and Android Apps
Set Up Firebase with Flutter for iOS and Android Apps

Next, download google-services.json file and add it to the android/app directory within the Flutter project.

Now add dependency in buid.gradle of your project.

classpath 'com.google.gms:google-services:4.3.3'

And apply plugin in your app’s buid.gradle

apply plugin: 'com.google.gms.google-services'

 

Adding FCM To Flutter

Now it’s time to add firebase plugin to your flutter project. Next, you need to add the following dependency to the pubspec.yaml file.

firebase_core: ^1.12.0
firebase_messaging: ^11.2.6

Now call flutter pub get

After adding above plugins, you need to initialize the firebase first. You can use Futurebuilder or you can initialize it in initstate but in this tutorial we are going to initialize Firebase in the main function.

 

After initializing Firebase, we will check the permission and then we will get the FCM token.

@override
void initState() {
  super.initState();

 /* Firebase.initializeApp().whenComplete(() {

  });*/
  messaging = FirebaseMessaging.instance;

  requestPermissions();

  getToken();
});

 

void requestPermissions()  async {
  messaging = FirebaseMessaging.instance;

  NotificationSettings settings = await messaging.requestPermission(
    alert: true,
    badge: true,
    criticalAlert: true,
    sound: true
  ) ;

  if(settings.authorizationStatus == AuthorizationStatus.authorized){
    print("Authorized");
  }else{
    print("Un-authorized");
  }
}


void getToken()  async {
  messaging = FirebaseMessaging.instance;
  await messaging.getToken().then((value) {
    print(value);
  });
}