Push Notifications with Flutter and Firebase Cloud Messaging - Android






Most apps are forgotten very quickly by its users after they have been installed. Push notifications are a perfect way to bring your app back into the minds of the customers and increase the retention rate.

In this post, I will show you how to easily incorporate push notifications into your Flutter app, and how to send easy Firebase console notifications. The article assumes that you have an existing project in Flutter or that a new one has been created, for example with the standard project template in Flutter.

let's get into action !!

Creating a Firebase project


Sending Firebase Cloud Messaging push notifications call for a Firebase project. If you don't already have one, build your own at firebase.google.com.


Firebase messaging Package Implementation


The "firebase messaging" package was developed by Google's Flutter team for the integration of Firebase Cloud Messaging. Add the package dependency to the "pubspec.yaml" of your project, and load it by having the running flutter pub.


Configurations unique to Android


The Google Services Gradle Plugin has to be included in the Gradle Setup on the Android side. Only add the following line to your "android/build.gradle" section of the "dependencies" file: classpath 'com.google.gms:google-services:x.x.x'

To activate the plugin add the line following line to the end of your “android/app/build.gradle": apply plugin: ‘com.google.gms:google-services’.




Next, create an Android-App in your Firebase-Project’s “Project Overview” section. The package name can be found and defined in your “app/build.gradle” file.

Now let's move to firebase configuration:


Firebase account configuration for Android


Step:1 Create a project



Step 2: Add Firebase to your android app



Step 3: Next skip all other steps...


After the application has been registered, download the created google-services.json and place it in the "android / app" folder for your project. If the app will open when the user taps a notification, within the activity portion of your AndroidManifest, add the following intent filter.



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


When sending messages from the Firebase console, it is important to add the value "FLUTTER NOTIFICATION CLICK" with the key "click action" to the section "custom info" in order to receive these types of attempts.


In order to get the token which we need while testing the push notification please paste the below code in your main.dart file.



import 'package:flutter/material.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
void main() {
  runApp(Home());
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setUpNotification();
  }
  void setUpNotification()  async{
    _firebaseMessaging.getToken().then((token) => print("onToken:$token"));
    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
       // _showItemDialog(message);
      },
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
       // _navigateToItemDetail(message);
      },
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
        //_navigateToItemDetail(message);
      },
    );
    _firebaseMessaging.requestNotificationPermissions(
        const IosNotificationSettings(
            sound: true, badge: true, alert: true, provisional: true));
    _firebaseMessaging.onIosSettingsRegistered
        .listen((IosNotificationSettings settings) {
      print("Settings registered: $settings");
    });
    _firebaseMessaging.getToken().then((String token) {
      assert(token != null);
      setState(() {
      //  _homeScreenText = "Push Messaging token: $token";
      });
    //  print(_homeScreenText);
    });
}

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        body: Center(
          child: RaisedButton(
            child: Text('Click'),
            onPressed: ()
            {},
          ),
        ),
      )
    );
  }
}


So all set !! cool


Now next step is to compose the notification, check the below image, and compose the way I did by filling all the details.



once you are done, click on the Send test message button on the right side by adding the token key and hit test, the very next moment you will receive the same message as notification on your device, please find the device with push notification below.


that's set for Android part, will come back soon with IOS configuration ...

34 views
Never Miss a Post. Subscribe Now!

Contact Us: nawabblog@gmail.com

Location : Bangalore India.

© 2019 proudly created  by Nawab Ahmad. 

  • Nawab Ahmad
  • Grey Twitter Icon
  • Nawab Ahmad