Push Notification di Flutter untuk Android Menggunakan Firebase Cloud Messaging (FCM)

Untuk mengimplementasikan push notification di flutter salah satunya dapat menggunakan firebase cloud messaging (FCM). Sudah tersedia library firebase pada flutter sehingga tidak cukup sulit digunakan, karena masih memerlukan beberapa setting pada file dan gradle secara manual. Berikut langkah-langkahnya :

Install library untuk firebase messaging di flutter dengan menambahkan pada file pubspec.yaml :

dependencies:firebase_messaging:^6.0.15

Selanjutnya tentunya kita perlu membuat project di firebase console untuk mendapatkan file  google-services.json dan ditempatkan pada direktori android/app.

Edit file build.gradle untuk menambahkan classpath gms google service yang berada di /android/build.gradle seperti :

dependencies {
     // Example existing classpath 
     'com.android.tools.build:gradle:3.5.3'
     //Add the google services classpath
      classpath 'com.google.gms:google-services:4.3.2'
}

Tambahkan apply plugin pada file build.gradle dalam direktori app (/android/app/build.gradle)

// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'

Selain apply plugin, tambahkan juga dependency berupa library firebase-messaging dalam file yg sama :

implementation 'com.google.firebase:firebase-messaging:latest_version;'

Edit juga file AndroidManifest.xml yang ada di untuk menambahkan

jika menurut dokumentasi plugin firebase di flutter, selanjutnya dengan menambahkan file Application.java pada lokasi MainActivity.java berada, namun untuk flutter terbaru biasanya sudah menggunakan file kotlin pada MainActivity nya. Jadi buat file kotlin Application.kt pada lokasi MainActivity.kt berada.

Untuk isi file Application.kt adalah :

package app.test.com

import io.flutter.app.FlutterApplication;
import io.flutter.plugin.common.PluginRegistry;
import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback;
import io.flutter.plugins.GeneratedPluginRegistrant;
import io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService;

class Application : FlutterApplication(), PluginRegistrantCallback {

  override fun onCreate() {
    super.onCreate()
    FlutterFirebaseMessagingService.setPluginRegistrant(this)
  }

  override fun registerWith(registry: PluginRegistry) {
    GeneratedPluginRegistrant.registerWith(registry)
  }
}

Silahkan ganti nama package app.test.com sesuai dengan nama package yang kita gunakan.

Selanjutnya pada set Application properti tersebut ke dalam file AndroidManifest.xml :

Jika sebelumnya kita selalu melakukan setting disisi enviroment androidnya, selanjutnya mulai pada coding dalam flutter nya

import 'dart:io';

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

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  final scaffoldState = GlobalKey();
  final firebaseMessaging = FirebaseMessaging();
  final controllerTopic = TextEditingController();
  bool isSubscribed = false;
  String token = '';


  static Future onBackgroundMessage(Map message) {
    print('onBackgroundMessage: $message');    
    return null;
  }

  @override
  void initState() {
    firebaseMessaging.configure(
      onMessage: (Map message) async {
        print('onMessage: $message');
      },
      onBackgroundMessage: onBackgroundMessage,
      onResume: (Map message) async {
        print('onResume: $message');

      },
      onLaunch: (Map message) async {
        print('onLaunch: $message');

      },
    );
    firebaseMessaging.requestNotificationPermissions(
      const IosNotificationSettings(sound: true, badge: true, alert: true, provisional: true),
    );
    firebaseMessaging.onIosSettingsRegistered.listen((settings) {
      debugPrint('Settings registered: $settings');
    });
    firebaseMessaging.getToken().then((token) => setState(() {
          this.token = token;
        }));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    debugPrint('token: $token');
    return Scaffold(
      key: scaffoldState,
      appBar: AppBar(
        title: Text('Flutter Test FCM'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text(
              'TOKEN',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            Text(token),
            Divider(thickness: 1),
            Text(
              'TOPIC',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            TextField(
              controller: controllerTopic,
              enabled: !isSubscribed,
              decoration: InputDecoration(
                hintText: 'Enter a topic',
              ),
            ),
            Row(
              children: [
                Expanded(
                  child: RaisedButton(
                    child: Text('Subscribe'),
                    onPressed: isSubscribed ? null : () {
                      String topic = controllerTopic.text;
                      if (topic.isEmpty) {
                        scaffoldState.currentState.showSnackBar(SnackBar(
                          content: Text('Topic invalid'),
                        ));
                        return;
                      }
                      firebaseMessaging.subscribeToTopic(topic);
                      setState(() {
                        isSubscribed = true;
                      });
                    },
                  ),
                ),
                SizedBox(width: 16),
                Expanded(
                  child: RaisedButton(
                    child: Text('Unsubscribe'),
                    onPressed: !isSubscribed ? null : () {
                      String topic = controllerTopic.text;
                      firebaseMessaging.unsubscribeFromTopic(topic);
                      setState(() {
                        isSubscribed = false;
                      });
                    },
                  ),
                ),
              ],
            ),
            Divider(thickness: 1),
            
          ],
        ),
      ),
    );
  }

}

pada coding diatas kita dapat mengetahui detail dari push notification di terminal melalui print yang kita implementasikan diatas. Selamat mencoba