Firebase Cloud Messaging

WHAT YOU'LL LEARN
  • Push Notification
  • Receive Notification

Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost.

Using FCM, you can notify a client app that new email or other data is available to sync. You can send notification messages to drive user re-engagement and retention. For use cases such as instant messaging, a message can transfer a payload of up to 4 KB to a client app.

Installation

1. Add dependency

pubspec.yaml
dependencies:
flutter:
sdk: flutter
firebase_core: "^0.7.0"
firebase_messaging: "^7.0.3"

1. Download dependency

$ flutter pub get

3. Android Integration

info

If you are using Flutter Android Embedding V2 (Flutter Version >= 1.12) then no additional integration steps are required for Android.

Flutter Android Embedding V1

For the Flutter Android Embedding V1, the background service must be provided a callback to register plugins with the background isolate. This is done by giving the FlutterFirebaseMessagingBackgroundService a callback to call your application's onCreate method.

In particular, its Application class:

// ...
import io.flutter.plugins.firebase.messaging.FlutterFirebaseMessagingBackgroundService;
public class Application extends FlutterApplication implements PluginRegistrantCallback {
// ...
@Override
public void onCreate() {
super.onCreate();
FlutterFirebaseMessagingBackgroundService.setPluginRegistrant(this);
}
@Override
public void registerWith(PluginRegistry registry) {
GeneratedPluginRegistrant.registerWith(registry);
}
// ...
}

Which is usually reflected in the application's AndroidManifest.xml. E.g.:

<application
android:name=".Application"
...

Note: Not calling FlutterFirebaseMessagingBackgroundService.setPluginRegistrant will result in an exception being thrown when a message eventually comes through.

4. Apple Integration

iOS & macOS require additional configuration before you can start receiving messages through Firebase. Read the integration documentation on how to setup iOS or macOS with Firebase Cloud Messaging.

5. (Web Only) Add the SDK

If using FlutterFire on the web, add the firebase-messaging JavaScript SDK to your index.html file:

web/index.html
<html>
...
<body>
<script src="https://www.gstatic.com/firebasejs/{{ web.firebase_cdn }}/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/{{ web.firebase_cdn }}/firebase-messaging.js"></script>
</body>
</html>

6. Rebuild your app

Once complete, rebuild your Flutter application:

$ flutter run

Next Steps

Once installed, you're ready to start using Firebase Cloud Messaging in your Flutter Project.