• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Flutter

      • Home
      • Blog
      • Flutter
      • Firebase Cloud Messaging Using Flutter
      Fcm

      Firebase Cloud Messaging Using Flutter

      • Posted by Shivam Srivastava
      • Categories Flutter, Developers
      • Date March 21, 2020
      Spread the love

      What is Firebase Cloud Messaging

      Firebase Cloud Messaging (FCM), erst known as Google Cloud Messaging (GCM), could be a free cloud service from Google that enables app developers to send notifications and messages to users across a different platform, including with Android, iOS and Web applications.

      Purpose of this article?

      In this Flutter tutorial, we’ll show you ways to integrate Firebase Cloud Messaging (FCM) push notification to Android Apps, we’ll use firebase_messaging plugin.

      Setup Flutter SDK

      If you don’t have a flutter set up in your machine so you have to need to install it first. Click here to learn how to set up flutter on Windows and for Linux click here.

      Create a Firebase Project

      For use firebase properties you have to need to register your app in firebase. First, integrate your flutter project to firebase, if you don’t know how to do it, read my Flutter Firebase Integration article.

      • Add the below code in AndroidMenifest.xml.
            <intent-filter>
                      <action android:name="FLUTTER_NOTIFICATION_CLICK" />
                      <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>

      • Add  firebase_messaging dependency in your project pubspec.yaml file.
      dependencies:
        flutter:
          sdk: flutter
        firebase_messaging: ^6.0.13
      Run flutter packages get command on terminal

      • Add the below code in your main.dart file for import dependency.
      import 'package:firebase_messaging/firebase_messaging.dart';
        void firebaseCloudMessaging_Listeners() {
          _firebaseMessaging.getToken().then((token) {
            print(token);
          });
          try {
            _firebaseMessaging.configure(
              onMessage: (Map<String, dynamic> message) async {
                print("onMessage: $message");
                final notification = message['notification'];
                print(notification);
              },
              onLaunch: (Map<String, dynamic> message) async {
                print("onLaunch: $message");
      
                final notification = message['data'];
                print(notification);
              },
              onResume: (Map<String, dynamic> message) async {
                print("onResume: $message");
      
                final notification = message['data'];
                print(notification);
              },
            );
            _firebaseMessaging.requestNotificationPermissions(
                const IosNotificationSettings(sound: true, badge: true, alert: true));
          } catch (e) {
            print('Error----$e');
          }
        }


      We have done all programming, now we are testing it using push notification from firebase console.

      • Go to firebase console -> grow -> cloud messaging.
      • Click send your first message.
      • Enter Notification Title and body text.
      Notificationtitle | Firebase Cloud Messaging Using Flutter

      • Select an app
      Selectapp | Firebase Cloud Messaging Using Flutter

      • Schedule notification delivered time.
      Schedule | Firebase Cloud Messaging Using Flutter

      • Set the listener and body parameter of notification. Key click_action and it’s value FLUTTER_NOTIFICATION_CLICK should be the same as given in the below image but another parameter can be a change, if you update the parameter’s key then don’t forget to update the key in code also.
      Imageedit 5 6159229081 | Firebase Cloud Messaging Using Flutter

      • Now we have done everything, now just click on the review button and publish it.
      Publish | Firebase Cloud Messaging Using Flutter

      Done3 | Firebase Cloud Messaging Using Flutter

      Get complete source code

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:firebase_messaging flutter, flutter firebase messaging background, flutter firebase messaging example, flutter firebase push notifications

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      Objects Detection From Image Using Flutter
      March 21, 2020

      Next post

      Golang Setup In Windows
      March 21, 2020

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now