📱 Send Mobile Push Notifications with Flutter

This guide will walk you through sending push notifications to your Flutter application for Android using NotificationAPI and Firebase Cloud Messaging (FCM).

Overview

Sending push notifications to Android devices is exclusively handled by Google’s Firebase Cloud Messaging (FCM). Implementing this from scratch requires significant backend infrastructure to manage device tokens and communicate with FCM.

NotificationAPI simplifies this process by managing the entire backend complexity for you. Our Flutter SDK handles device token registration, and our service sends the notifications through FCM on your behalf.

The setup process is as follows:

1. Set up a Firebase Project
2. Connect NotificationAPI to FCM
3. Configure your Flutter project for Firebase
4. Install and initialize the NotificationAPI Flutter SDK
5. Send a notification from your backend

1. Set up a Firebase Project

If you don’t have one already, you’ll need to create a Firebase project.

1. Go to the Firebase Console and create a new project.
2. Within your new project, navigate to Project Settings > General.
3. Click the Android icon to add an Android app to your project. Use your Flutter app’s package name (e.g., com.example.my_app).
4. Follow the on-screen instructions to register the app, and download the google-services.json file.
5. Place the downloaded google-services.json file into the android/app/ directory of your Flutter project.

2. Connect NotificationAPI to FCM

To allow NotificationAPI to send notifications on your behalf, you need to provide it with your Firebase project’s credentials.

1. In the Firebase Console, go to Project Settings > Service Accounts.
2. Click Generate new private key. A JSON file containing your service account key will be downloaded.

3. Go to your NotificationAPI Dashboard and navigate to the Integrations page.
4. Find the Firebase Cloud Messaging (FCM) integration and click Configure.
5. Upload the service account JSON file you downloaded from Firebase.

Your NotificationAPI account is now connected to your Firebase project.

3. Configure your Flutter project for Firebase

Next, you need to add the Google Services plugin to your Flutter project’s Android configuration.

In android/build.gradle:

Add the google-services plugin to the buildscript dependencies.

buildscript {
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:4.3.15'
    }
}

In android/app/build.gradle:

Apply the com.google.gms.google-services plugin at the top of the file.

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'
// ...

Now, build your app to ensure the Firebase configuration is correct.

flutter build apk

4. Install and initialize the NotificationAPI Flutter SDK

Our Flutter SDK makes it easy to register the device for push notifications.

Install the SDK from pub.dev:

flutter pub add notificationapi_flutter_sdk

Then, initialize the SDK in your main.dart file when your app starts. A good place is in the initState of your main widget.

import 'package:flutter/material.dart';
import 'package:notificationapi_flutter_sdk/notificationapi_flutter_sdk.dart';

// ...

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    NotificationAPI.instance.configure(
      clientId: 'YOUR_CLIENT_ID', // from NotificationAPI dashboard
      userId: 'test_user_1234', // your app's user ID
    );
  }

  // ...
}

This will automatically handle requesting push permissions and registering the device token with NotificationAPI.

Parameters

5. Send a notification from your backend

With the SDK initialized, you can now trigger notifications from your backend. The userId must match the one used to initialize the SDK.

Here’s an example using cURL:

curl -X POST \
  -H "Authorization: Bearer <YOUR_AUTH_TOKEN>" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "new_comment",
    "to": {
      "id": "test_user_1234",
      "email": "test@example.com"
    },
    "parameters": {
      "comment": "This is a test comment"
    }
  }' \
  "https://api.notificationapi.com/<YOUR_CLIENT_ID>/sender"

Schematic Diagram

This diagram illustrates the entire flow, from app initialization to receiving a notification.

Frequently Asked Questions (FAQs)

Why are my notifications not arriving?

There can be several reasons:

• FCM Setup: Double-check that your google-services.json is correct and that your service account key is correctly uploaded to the NotificationAPI dashboard.
• User ID Mismatch: Ensure the userId in your Flutter app is identical to the one you’re sending to in the backend API call.
• Device/Emulator Issues: Ensure your device or emulator has Google Play Services installed and is connected to the internet.
• App State: On some Android versions, notification delivery behavior can change if the app is in the foreground, background, or terminated. Check Android’s documentation for details.

Why does this guide only cover Android?

This guide focuses on Android to provide a clear and concise setup experience. The process for iOS is similar but involves setting up an Apple Push Notification service (APNs) key instead of using Firebase. We are working on a detailed iOS guide and will publish it soon.