{"id":1944,"date":"2020-08-25T18:00:54","date_gmt":"2020-08-25T12:30:54","guid":{"rendered":"https:\/\/ayusch.com\/?p=1944"},"modified":"2020-08-25T18:26:15","modified_gmt":"2020-08-25T12:56:15","slug":"implementing-flutter-push-notification-using-firebase","status":"publish","type":"post","link":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/","title":{"rendered":"Implementing Flutter Push Notification using Firebase"},"content":{"rendered":"

In this flutter push notification tutorial, we\u2019ll be taking a look at how to use firebase messaging in flutter to send push notifications.<\/span><\/p>\n

Firebase messaging is easy to set up and works seamlessly with flutter using a plugin. There\u2019s minimal requirement to know native Android\/iOS development.\u00a0<\/span><\/p>\n

So if you don\u2019t know much about android development, you can still go ahead and implement push notifications in flutter using this tutorial.\u00a0<\/span><\/p>\n

A prerequisite to this tutorial is to have Android Studio installed on your computer which we will be using to do some native stuff.<\/span><\/p>\n

 <\/p>\n

Getting Started<\/b><\/h2>\n

Create a new Flutter Project<\/b><\/h3>\n

If you haven\u2019t already set up flutter, have a look at this to get started. Else go ahead and create a new project:<\/span><\/p>\n

flutter create push_notifications<\/pre>\n
I\u2019ll be using Android Studio IDE for this tutorial, VSCode is also perfectly fine. Android Studio just makes it easy to write some native code.<\/span><\/p>\n
 <\/p>\n
Add Firebase Messaging to pubspec.yaml<\/b><\/h3>\n
Next up, add the dependency for flutter firebase messaging to pubspec.yaml file:<\/span><\/p>\n
dependencies:\r\n  flutter:\r\n    sdk: flutter\r\n  firebase_messaging: ^7.0.0\r\n<\/pre>\n
Once done, run pub get command in the terminal:<\/span><\/p>\n
flutter pub get<\/pre>\n
This will add firebase messaging dependency to your flutter app. Next we\u2019ll take a look at how to set up a firebase project for Android.<\/span><\/p>\n
 <\/p>\n
Setup Android Firebase Messaging<\/b><\/h2>\n
Using Firebase Assistant<\/b><\/h3>\n
Setting up firebase for android is really a breeze with the firebase assistant. Earlier it would require you to manually setup a project and download google-services.json<\/strong> file, but now it does it automatically for you.<\/span><\/p>\n
Go to tools -> Firebase<\/strong><\/p>\n
This will open up your web browser, now you can select an existing firebase project or create a new one.<\/span><\/p>\n
Then, select your project and click <\/span>connect.\u00a0<\/b>This connects your app to your firebase console. It’ll also automatically add google-services.json file to your project.<\/p>\n
Next, you\u2019ll need to add firebase messaging dependencies. In the next step, the assistant will show you a button \u201cAdd FCM\u201d<\/strong>. Click on that and all the dependencies will be added to your project automagically. How cool is that !<\/span><\/p>\n
 <\/p>\n
Setting up Manually<\/b><\/h3>\n
If for some reason you\u2019re having trouble with the\u00a0 firebase assistant, you can still set up your project manually.<\/span><\/p>\n
    \n
  1. Go to your firebase console (console.firebase.com)<\/span><\/li>\n
  2. Create a new Project or Select an existing one.<\/span><\/li>\n
  3. Add an Android App to the project.<\/span><\/li>\n
  4. Add your package name (com.example.push_notifications). You can find your package name in \/android\/app\/java\/com\/example\/push_notification{or whatever you named your app}\/MainActivity.java<\/strong>. It will be the first line.<\/span><\/li>\n
  5. Click on Register App. Then download the config file.\u00a0<\/span><\/li>\n<\/ol>\n
    Once you\u2019ve downloaded the google-services.json file, go to {your flutter project}\/android\/app<\/strong> and move the file here.<\/span><\/p>\n
    Next, we\u2019ll need to add dependencies for android firebase messaging. Open up the Android folder in your flutter project in a new Android Studio window.\u00a0<\/span><\/p>\n
    Switch to Project View in Studio and go to <\/span>android\/android.<\/b> Double click the build.gradle file. In the dependencies, add the following line:<\/span><\/p>\n
    classpath 'com.google.gms:google-services:4.3.3'<\/pre>\n
    Now go to android\/android\/app<\/strong> and open up the build.gradle file and add the following to your dependencies:<\/span><\/p>\n
    implementation 'com.google.firebase:firebase-messaging:20.2.4'\r\n<\/pre>\n
    At the bottom of this file, apply the plugin as well by adding the following line:\u00a0<\/span><\/p>\n
    apply plugin: 'com.google.gms.google-services'\r\n<\/pre>\n
    Click on sync and wait for gradle to build completely.<\/span><\/p>\n
     <\/p>\n
    Adding Native Code<\/b><\/h2>\n
    Now it\u2019s time we write some Android native code. It\u2019s pretty simple and you don\u2019t need any knowledge about Android development to do this step.<\/span><\/p>\n
    Go ahead and check where your MainActivity.java (or MainActivity.kt) file is located and at the same location create a new Java class called Application.java<\/span><\/p>\n
    package com.example.push_notifications;\r\n\r\n\r\npublic class Application {\r\n\r\n}\r\n<\/pre>\n
    Then extend it from FlutterApplication class and implement PluginRegistrantCallback. This will show you an error asking to implement the members. Press alt (option key on mac) + enter and implement the member function. <\/span>Also add the onCreate method to this file.<\/span><\/p>\n
    We’ll register the plugin in registerWith method and set the registrar in onCreate method.<\/p>\n
    package com.example.push_notifications;\r\n\r\nimport io.flutter.app.FlutterApplication;\r\nimport io.flutter.plugin.common.PluginRegistry;\r\nimport io.flutter.plugins.GeneratedPluginRegistrant;\r\nimport io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin;\r\nimport io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService;\r\n\r\npublic class Application extends FlutterApplication implements PluginRegistry.PluginRegistrantCallback {\r\n    @Override\r\n    public void onCreate() {\r\n        super.onCreate();\r\n        FlutterFirebaseMessagingService.setPluginRegistrant(this);\r\n    }\r\n\r\n    @Override\r\n    public void registerWith(PluginRegistry registry) {\r\n        FirebaseMessagingPlugin.registerWith(registry.registrarFor(\"io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin\"));\r\n    }\r\n}\r\n<\/pre>\n
    Next up, we\u2019ll edit our <\/span>AndroidManifest.xml<\/b> file to use this application class.<\/span><\/p>\n
    In the AndroidManifest.xml file, find the <application><\/strong> tag and change the android:name<\/strong> to use .Application<\/strong><\/span><\/p>\n
    Also, add the following code in the <activity><\/strong> tag.\u00a0<\/span>This will help you launch the app when you click on the notification. Different callbacks are invoked when you click the notification if the app is terminated or in memory. We\u2019ll discuss that later.<\/span><\/p>\n
    <intent-filter>\r\n    <action android:name=\"FLUTTER_NOTIFICATION_CLICK\" \/>\r\n    <category android:name=\"android.intent.category.DEFAULT\" \/>\r\n<\/intent-filter><\/pre>\n
    This is how your AndroidManifest.xml would look like finally:<\/p>\n
    <manifest xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    package=\"com.example.push_notifications\">\r\n    \r\n    <application\r\n        android:name=\".Application\"\r\n        android:label=\"push_notifications\"\r\n        android:icon=\"@mipmap\/ic_launcher\">\r\n        <activity\r\n            android:name=\".MainActivity\"\r\n            android:launchMode=\"singleTop\"\r\n            android:theme=\"@style\/LaunchTheme\"\r\n            android:configChanges=\"orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode\"\r\n            android:hardwareAccelerated=\"true\"\r\n            android:windowSoftInputMode=\"adjustResize\">\r\n            <intent-filter>\r\n                <action android:name=\"FLUTTER_NOTIFICATION_CLICK\" \/>\r\n                <category android:name=\"android.intent.category.DEFAULT\" \/>\r\n            <\/intent-filter>\r\n\r\n            <meta-data\r\n              android:name=\"io.flutter.embedding.android.NormalTheme\"\r\n              android:resource=\"@style\/NormalTheme\"\r\n              \/>\r\n\r\n            <meta-data\r\n              android:name=\"io.flutter.embedding.android.SplashScreenDrawable\"\r\n              android:resource=\"@drawable\/launch_background\"\r\n              \/>\r\n            <intent-filter>\r\n                <action android:name=\"android.intent.action.MAIN\"\/>\r\n                <category android:name=\"android.intent.category.LAUNCHER\"\/>\r\n            <\/intent-filter>\r\n        <\/activity>\r\n\r\n        <meta-data\r\n            android:name=\"flutterEmbedding\"\r\n            android:value=\"2\" \/>\r\n    <\/application>\r\n<\/manifest>\r\n<\/pre>\n
    We\u2019ve finished setting up our firebase messaging for flutter. Finally, we can go ahead and write some flutter code to see what\u2019s required to implement push notification in flutter.<\/span><\/p>\n
     <\/p>\n
    Sending Flutter Push Notification using Firebase<\/b><\/h2>\n
    Understanding different types of Notifications<\/b><\/h3>\n
    There are two ways of sending notifications in flutter. Segment messages <\/strong>and Topic messages<\/strong>. Let me explain these in a few lines.<\/span><\/p>\n
     <\/p>\n
    Segment<\/b> messages are those which are configured on the basis of some analytics data. For example, you may want to send notifications to users who added items to the cart and left. Or to users who\u2019ve not made a purchase for quite a long time and you want to send them a PN.\u00a0<\/span><\/p>\n
    These are some examples of segments. Segments are created on the basis of analytics from your app. So if you\u2019ve created segments, you\u2019ll be able to send segment notifications.<\/span><\/p>\n
    Topic<\/b> messages are things where you send a notification to users who\u2019ve subscribed to a particular \u201ctopic\u201d. For example, in a news application if I subscribe to a topic called SPORTS, then I\u2019d want to receive notifications related to sports.\u00a0<\/span><\/p>\n
    These are basically segments created not by analytics but voluntarily by users\/developers based on their business logic. Users should also have the ability to unsubscribe from any topic.<\/span><\/p>\n
     <\/p>\n
    Sending Segment Notifications through Firebase<\/b><\/h3>\n
    We\u2019ll be adding some basic code to the main.dart file and send segment notifications to our app.\u00a0<\/span><\/p>\n
    Go ahead and add the following code to your main.dart file. It\u2019s a basic app with an AppBar and an empty container. Once added, run your app.<\/span><\/p>\n
    import 'package:flutter\/material.dart';\r\n\r\nvoid main() {\r\n  runApp(\r\n    MaterialApp(\r\n      home: PushMessagingExample(),\r\n    ),\r\n  );\r\n}\r\n\r\nclass PushMessagingExample extends StatefulWidget {\r\n  @override\r\n  State<StatefulWidget> createState() => PushNotificationScreen();\r\n}\r\n\r\nclass PushNotificationScreen extends State<PushMessagingExample> {\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return Scaffold(\r\n      appBar: AppBar(\r\n        title: Text(\"AndroidVille Push Notification\"),\r\n      ),\r\n      body: buildBody(),\r\n    );\r\n  }\r\n\r\n  Widget buildBody() {\r\n    return Container();\r\n  }\r\n\r\n}\r\n<\/pre>\n
    And we\u2019re ready to send the segment notification now<\/strong>. Yes, this is really it!. You just need to add firebase messaging in flutter properly and create a simple app. And you\u2019re ready to send notifications to your users.<\/span><\/p>\n
      \n
    1. Go to your firebase console.<\/span><\/li>\n
    2. Select your project.<\/span><\/li>\n
    3. On the left hand side, choose Cloud Messaging under Grow.<\/span><\/li>\n<\/ol>\n
      Click on New Notification. Enter the title and message and click on Next.<\/span><\/p>\n
      Now select your user segment. In our case, it will be all the user\u2019s who\u2019ve installed our app.\u00a0<\/span><\/p>\n
      \"flutter<\/a><\/p>\n
      Finally, click on Review<\/strong> and then Publish<\/strong>. Check your android device\/emulator and you\u2019ll see the notification in the <\/span>notification try<\/b>.<\/span><\/p>\n
       <\/p>\n
      Sending Topic Notifications through Firebase<\/b><\/h3>\n
      In order to use flutter firebase messaging<\/strong> to send topic notifications, we\u2019ve to get the user to subscribe to a topic. For our case, we\u2019ll enter the topic manually via a TextField<\/strong>.\u00a0<\/span><\/p>\n
      Add the following code to your main.dart<\/strong> file. It\u2019s just a basic app with a text field, and two buttons to subscribe and unsubscribe from the topic. This will be all for your main.dart<\/strong> file:<\/span><\/p>\n
      import 'dart:io';\r\n\r\nimport 'package:firebase_messaging\/firebase_messaging.dart';\r\nimport 'package:flutter\/material.dart';\r\n\r\nvoid main() {\r\n  runApp(\r\n    MaterialApp(\r\n      home: PushMessagingExample(),\r\n    ),\r\n  );\r\n}\r\n\r\nclass PushMessagingExample extends StatefulWidget {\r\n  @override\r\n  State<StatefulWidget> createState() => PushNotificationScreen();\r\n}\r\n\r\nclass PushNotificationScreen extends State<PushMessagingExample> {\r\n  final FirebaseMessaging firebaseMessaging = FirebaseMessaging();\r\n  final TextEditingController controller = TextEditingController();\r\n\r\n  @override\r\n  void initState() {\r\n    super.initState();\r\n    firebaseMessaging.configure(\r\n      onMessage: (Map<String, dynamic> message) async {\r\n        print(\"onMessage: $message\");\r\n      },\r\n      onLaunch: (Map<String, dynamic> message) async {\r\n        print(\"onLaunch: $message\");\r\n      },\r\n      onResume: (Map<String, dynamic> message) async {\r\n        print(\"onResume: $message\");\r\n      },\r\n    );\r\n    if (Platform.isIOS)\r\n      firebaseMessaging.requestNotificationPermissions(\r\n          const IosNotificationSettings(\r\n              sound: true, badge: true, alert: true, provisional: true));\r\n  }\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return Scaffold(\r\n      appBar: AppBar(\r\n        title: Text(\"AndroidVille Push Notification\"),\r\n      ),\r\n      body: buildBody(),\r\n    );\r\n  }\r\n\r\n  Widget buildBody() {\r\n    return Container(\r\n      height: double.infinity,\r\n      child: Row(\r\n        crossAxisAlignment: CrossAxisAlignment.center,\r\n        mainAxisAlignment: MainAxisAlignment.spaceAround,\r\n        children: [\r\n          Container(\r\n            width: 100,\r\n            child: TextField(\r\n              controller: controller,\r\n            ),\r\n          ),\r\n          RaisedButton(\r\n            color: Colors.white54,\r\n            child: const Text(\r\n              \"Subscribe\",\r\n              style: TextStyle(color: Colors.lightGreen),\r\n            ),\r\n            onPressed: () {\r\n              firebaseMessaging.subscribeToTopic(controller.text);\r\n              clearText();\r\n            },\r\n          ),\r\n          RaisedButton(\r\n            color: Colors.white54,\r\n            child: const Text(\r\n              \"Unsubscribe\",\r\n              style: TextStyle(color: Colors.redAccent),\r\n            ),\r\n            onPressed: () {\r\n              firebaseMessaging.unsubscribeFromTopic(controller.text);\r\n              clearText();\r\n            },\r\n          ),\r\n        ],\r\n      ),\r\n    );\r\n  }\r\n\r\n  void clearText() {\r\n    setState(() {\r\n      controller.text = \"\";\r\n    });\r\n  }\r\n}\r\n<\/pre>\n
      We\u2019ve set up some callbacks to listen to when our notification is clicked\/received<\/strong>. There are three important callbacks you should know about:<\/span><\/p>\n
        \n
      1. onMessage<\/b>: This is called when the app is running in the foreground and a notification is received.<\/span><\/li>\n
      2. onResume<\/b>: This is called when the user clicks the notification and the app is running in the background (pressed home button).<\/span><\/li>\n
      3. onLaunch<\/b>: This is called when the user clicks the notification and the app is terminated.<\/span><\/li>\n<\/ol>\n
        Note<\/b>: An important thing to note here is that onResume and onLaunch will be called only when you send <\/span>\u201cclick_action\u201d: \u201cFLUTTER_NOTIFICATION_CLICK\u201d<\/b> as a key value pair in notification. Else they won\u2019t be called at all.<\/span><\/p><\/blockquote>\n
        The table below sums it up:\u00a0<\/span><\/p>\n
        \"flutter<\/a>
        source: https:\/\/pub.dev\/packages\/firebase_messaging<\/figcaption><\/figure>\n
         <\/p>\n
        And to subscribe\/unsubscribe<\/strong> from the topic we\u2019ll use methods on the FirebaseMessaging instance<\/strong>.<\/span><\/p>\n
        I\u2019ll not show how to use TextEditingController to get values from the text field as we\u2019ll focus this post on flutter push notification. You can copy the code from below and you\u2019ll probably understand it as you go along.<\/span><\/p>\n
        Now run the app and you\u2019ll see the following screen. Enter your topic and click subscribe<\/strong>. This will qualify you for the topic notifications. Click unsubscribe when you want to stop receiving notifications of that topic.<\/span><\/p>\n
        \"flutter<\/a><\/p>\n
         <\/p>\n
        Now to send topic notifications using firebase messaging, login to your firebase console. Go to your Project -> Cloud Messaging<\/strong>. Create a New Notification and in the target section, select <\/span>Topic<\/b> and enter the topic you\u2019ve subscribed to, in the app.<\/span><\/p>\n
        \"\"<\/a><\/p>\n
        Select Review and then click Publish.<\/p>\n
         <\/p>\n
        Flutter Push Notification in iOS<\/b><\/h2>\n
        You\u2019ve probably noticed that I\u2019ve talked very less about iOS stuff here. This is because notifications in iOS work a bit differently.\u00a0<\/span><\/p>\n
        First of all you\u2019ll need to have an Apple Developer account which will cost you $99. <\/span>Then you have to create certificates from the developer account required by apple to send push notifications in iOS.<\/span><\/p>\n
        There\u2019s another caveat where you\u2019ll have to request <\/span>notification permission<\/b> from the user for sending notifications. I\u2019ve added that code in <\/span>initState() <\/b>of main.dart<\/span><\/p>\n
        There are 4-5 steps involved in setting up the APNs and start sending push notifications. A little native code that you can plug and play, but you won\u2019t have to write any separate code in Flutter.<\/strong><\/span><\/p>\n
        The main.dart file provided here, works for iOS as well as Android. Once you have the developer account ready, you can refer to these 5 steps to setup push notifications in iOS<\/a> using firebase messaging.<\/span><\/p>\n
        This completes our tutorial on implementing push notifications in flutter using flutter firebase messaging. Do leave a comment down below if you have any questions.<\/span><\/p>\n
         <\/p>\n
        Want to be a better developer ?!<\/h2>\n
        AndroidVille is a community of Mobile Developers where we share knowledge related to Android Development, Flutter Development, React Native Tutorials, Java, Kotlin<\/strong> and much more.<\/p>\n
        We have a SLACK workspace<\/a> where we share updates related to new job opportunities<\/strong>, articles on Mobile Development\/updates from the industry. We also have channels to help you with any questions, dev-help that you require. Just post a question and people would be ready to help you out \ud83d\ude42<\/p>\n
        Click on this link to join the AndroidVille SLACK workspace. It\u2019s absolutely free!<\/a><\/strong><\/p>\n
        If you like any article, do give it a share on Facebook, Linkedin. You can follow me on LinkedIn<\/a><\/strong>, Twitter<\/a><\/strong>, Quora<\/a>, and Medium<\/a><\/strong> where I\u00a0answer<\/strong>\u00a0questions related to\u00a0Mobile Development, especially Android and Flutter<\/strong>.<\/p>\n
        If you want to stay updated with all the latest articles, subscribe to the weekly newsletter by entering your email address in the form on the top right section of this page.<\/p>\n","protected":false},"excerpt":{"rendered":"
        In this flutter push notification tutorial, we\u2019ll be taking a look at how to use firebase messaging in flutter to send push notifications. Firebase messaging…<\/p>\n","protected":false},"author":1,"featured_media":1950,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[35],"tags":[282,283,280,281,86],"class_list":["post-1944","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter","tag-flutter-firebase-messaging","tag-flutter-firebase-tutorial","tag-flutter-push-notification","tag-flutter-push-notification-tutorial","tag-flutter-tutorial"],"yoast_head":"\nImplementing Flutter Push Notification using Firebase — AndroidVille<\/title>\n<meta name=\"description\" content=\"In this flutter push notification tutorial, we\u2019ll be taking a look at how to use firebase messaging in flutter to send push notifications. Firebase\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implementing Flutter Push Notification using Firebase — AndroidVille\" \/>\n<meta property=\"og:description\" content=\"In this flutter push notification tutorial, we\u2019ll be taking a look at how to use firebase messaging in flutter to send push notifications. Firebase\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/\" \/>\n<meta property=\"og:site_name\" content=\"AndroidVille\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-25T12:30:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-25T12:56:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/ayusch.com\/wp-content\/uploads\/2020\/08\/Push-notifications-in-flutter.png?fit=1200%2C628&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ayusch\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ayuschjain\" \/>\n<meta name=\"twitter:site\" content=\"@ayuschjain\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ayusch\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/\"},\"author\":{\"name\":\"ayusch\",\"@id\":\"https:\\\/\\\/ayusch.com\\\/#\\\/schema\\\/person\\\/354df60a350e635ef7336525e387db28\"},\"headline\":\"Implementing Flutter Push Notification using Firebase\",\"datePublished\":\"2020-08-25T12:30:54+00:00\",\"dateModified\":\"2020-08-25T12:56:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/\"},\"wordCount\":1864,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ayusch.com\\\/#\\\/schema\\\/person\\\/354df60a350e635ef7336525e387db28\"},\"image\":{\"@id\":\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ayusch.com\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Push-notifications-in-flutter.png\",\"keywords\":[\"flutter firebase messaging\",\"flutter firebase tutorial\",\"flutter push notification\",\"flutter push notification tutorial\",\"flutter tutorial\"],\"articleSection\":[\"Flutter\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/\",\"url\":\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/\",\"name\":\"Implementing Flutter Push Notification using Firebase — AndroidVille\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ayusch.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ayusch.com\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Push-notifications-in-flutter.png\",\"datePublished\":\"2020-08-25T12:30:54+00:00\",\"dateModified\":\"2020-08-25T12:56:15+00:00\",\"description\":\"In this flutter push notification tutorial, we\u2019ll be taking a look at how to use firebase messaging in flutter to send push notifications. Firebase\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ayusch.com\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Push-notifications-in-flutter.png\",\"contentUrl\":\"https:\\\/\\\/ayusch.com\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Push-notifications-in-flutter.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ayusch.com\\\/implementing-flutter-push-notification-using-firebase\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ayusch.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Implementing Flutter Push Notification using Firebase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ayusch.com\\\/#website\",\"url\":\"https:\\\/\\\/ayusch.com\\\/\",\"name\":\"AndroidVille\",\"description\":\"Become a better mobile developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/ayusch.com\\\/#\\\/schema\\\/person\\\/354df60a350e635ef7336525e387db28\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ayusch.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/ayusch.com\\\/#\\\/schema\\\/person\\\/354df60a350e635ef7336525e387db28\",\"name\":\"ayusch\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/ayusch.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/cropped-text_logo_4-1-2.png\",\"url\":\"https:\\\/\\\/ayusch.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/cropped-text_logo_4-1-2.png\",\"contentUrl\":\"https:\\\/\\\/ayusch.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/cropped-text_logo_4-1-2.png\",\"width\":360,\"height\":100,\"caption\":\"ayusch\"},\"logo\":{\"@id\":\"https:\\\/\\\/ayusch.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/cropped-text_logo_4-1-2.png\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Implementing Flutter Push Notification using Firebase — AndroidVille","description":"In this flutter push notification tutorial, we\u2019ll be taking a look at how to use firebase messaging in flutter to send push notifications. Firebase","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/","og_locale":"en_GB","og_type":"article","og_title":"Implementing Flutter Push Notification using Firebase — AndroidVille","og_description":"In this flutter push notification tutorial, we\u2019ll be taking a look at how to use firebase messaging in flutter to send push notifications. Firebase","og_url":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/","og_site_name":"AndroidVille","article_published_time":"2020-08-25T12:30:54+00:00","article_modified_time":"2020-08-25T12:56:15+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/i0.wp.com\/ayusch.com\/wp-content\/uploads\/2020\/08\/Push-notifications-in-flutter.png?fit=1200%2C628&ssl=1","type":"image\/png"}],"author":"ayusch","twitter_card":"summary_large_image","twitter_creator":"@ayuschjain","twitter_site":"@ayuschjain","twitter_misc":{"Written by":"ayusch","Estimated reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/#article","isPartOf":{"@id":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/"},"author":{"name":"ayusch","@id":"https:\/\/ayusch.com\/#\/schema\/person\/354df60a350e635ef7336525e387db28"},"headline":"Implementing Flutter Push Notification using Firebase","datePublished":"2020-08-25T12:30:54+00:00","dateModified":"2020-08-25T12:56:15+00:00","mainEntityOfPage":{"@id":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/"},"wordCount":1864,"commentCount":0,"publisher":{"@id":"https:\/\/ayusch.com\/#\/schema\/person\/354df60a350e635ef7336525e387db28"},"image":{"@id":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/#primaryimage"},"thumbnailUrl":"https:\/\/ayusch.com\/wp-content\/uploads\/2020\/08\/Push-notifications-in-flutter.png","keywords":["flutter firebase messaging","flutter firebase tutorial","flutter push notification","flutter push notification tutorial","flutter tutorial"],"articleSection":["Flutter"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/","url":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/","name":"Implementing Flutter Push Notification using Firebase — AndroidVille","isPartOf":{"@id":"https:\/\/ayusch.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/#primaryimage"},"image":{"@id":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/#primaryimage"},"thumbnailUrl":"https:\/\/ayusch.com\/wp-content\/uploads\/2020\/08\/Push-notifications-in-flutter.png","datePublished":"2020-08-25T12:30:54+00:00","dateModified":"2020-08-25T12:56:15+00:00","description":"In this flutter push notification tutorial, we\u2019ll be taking a look at how to use firebase messaging in flutter to send push notifications. Firebase","breadcrumb":{"@id":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/#primaryimage","url":"https:\/\/ayusch.com\/wp-content\/uploads\/2020\/08\/Push-notifications-in-flutter.png","contentUrl":"https:\/\/ayusch.com\/wp-content\/uploads\/2020\/08\/Push-notifications-in-flutter.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/ayusch.com\/implementing-flutter-push-notification-using-firebase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ayusch.com\/"},{"@type":"ListItem","position":2,"name":"Implementing Flutter Push Notification using Firebase"}]},{"@type":"WebSite","@id":"https:\/\/ayusch.com\/#website","url":"https:\/\/ayusch.com\/","name":"AndroidVille","description":"Become a better mobile developer","publisher":{"@id":"https:\/\/ayusch.com\/#\/schema\/person\/354df60a350e635ef7336525e387db28"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ayusch.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":["Person","Organization"],"@id":"https:\/\/ayusch.com\/#\/schema\/person\/354df60a350e635ef7336525e387db28","name":"ayusch","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/ayusch.com\/wp-content\/uploads\/2018\/12\/cropped-text_logo_4-1-2.png","url":"https:\/\/ayusch.com\/wp-content\/uploads\/2018\/12\/cropped-text_logo_4-1-2.png","contentUrl":"https:\/\/ayusch.com\/wp-content\/uploads\/2018\/12\/cropped-text_logo_4-1-2.png","width":360,"height":100,"caption":"ayusch"},"logo":{"@id":"https:\/\/ayusch.com\/wp-content\/uploads\/2018\/12\/cropped-text_logo_4-1-2.png"}}]}},"jetpack_featured_media_url":"https:\/\/ayusch.com\/wp-content\/uploads\/2020\/08\/Push-notifications-in-flutter.png","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/ayusch.com\/wp-json\/wp\/v2\/posts\/1944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ayusch.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ayusch.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ayusch.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ayusch.com\/wp-json\/wp\/v2\/comments?post=1944"}],"version-history":[{"count":4,"href":"https:\/\/ayusch.com\/wp-json\/wp\/v2\/posts\/1944\/revisions"}],"predecessor-version":[{"id":1957,"href":"https:\/\/ayusch.com\/wp-json\/wp\/v2\/posts\/1944\/revisions\/1957"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ayusch.com\/wp-json\/wp\/v2\/media\/1950"}],"wp:attachment":[{"href":"https:\/\/ayusch.com\/wp-json\/wp\/v2\/media?parent=1944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ayusch.com\/wp-json\/wp\/v2\/categories?post=1944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ayusch.com\/wp-json\/wp\/v2\/tags?post=1944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}