Flutter firebase push notification


Flutter firebase push notification :

Flutter firebase push notification is used to send user the updates regarding the app services, it is used to improve and provide better performance by making user know the latest updates regarding the service he has opted for.

Push notifications are a key elements in every app to make user interact with the app every now and then.Also social networking app’s like whatsapp, facebook, twitter, youtube, gmail and much more… use them in alerting the user with new arrivals.


Google firebase provides a user interface to send push notifications to devices both android & iOS aswell.We can also send a images in flutter firebase push notification.

Food delivery apps swiggy, zomato, uber eats, food panda &  cloud image storage apps like google photos, Picasso use these image based push notifications.

We are going to deal with displaying flutter firebase push notification in android and iOS devices can observe the screen’s

Flutter firebase push notification video tutorial :

Go through the below tutorial for more detailed information.


Flutter firebase push notification Project Structure :

This image depicts the project structure of Flutter firebase push notification implementation.


pubspec.yaml :

We need to add flutter_local_notifications, firebase_messaging plugins to our dependency’s and also provide the versions accordingly to latest available.

    sdk: flutter


Google Firebase Console :

Need to make some configurations in google firebase console to get google-services.json for android and GoogleService-Info.plist for iOS.



Add Android and iOS project to your project

             Flutter firebase push notification

Then we get the two configuration files which we need to add in our project folder as below

Flutter firebase push notification                          Flutter firebase push notification


Then add initialization codes for android & iOS


Android :

Flutter firebase push notification Flutter firebase push notification


iOS :

Flutter firebase push notification

main.dart :

Add a default class MyApp to the main() and extend it with StatelessWidget

import 'package:flutter/material.dart';

import 'notifications.dart';

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      home: Notifications(title: 'Push Notifications'),

Now navigate the home to Notifications.dart


notifications.dart :

Initialize firebase messaging and flutter local notification plugins

final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = new FlutterLocalNotificationsPlugin();


void initState() {
  var initializationSettingsAndroid = new AndroidInitializationSettings('@mipmap/ic_launcher');

  var initializationSettingsIOS = new IOSInitializationSettings(
      onDidReceiveLocalNotification: onDidRecieveLocalNotification);

  var initializationSettings = new InitializationSettings(
      initializationSettingsAndroid, initializationSettingsIOS);

      onSelectNotification: onSelectNotification);

    onMessage: (Map<String, dynamic> message) {
      print('on message ${message}');
    onResume: (Map<String, dynamic> message) {
      print('on resume $message');
    onLaunch: (Map<String, dynamic> message) {
      print('on launch $message');
      const IosNotificationSettings(sound: true, badge: true, alert: true));
      .listen((IosNotificationSettings settings) {
    print("Settings registered: $settings");
  _firebaseMessaging.getToken().then((String token) {
    assert(token != null);


Display Android Notification :

Future displayNotification(Map<String, dynamic> message) async{
  var androidPlatformChannelSpecifics = new AndroidNotificationDetails(
      'channel-id', 'fcm', 'androidcoding.in',
      importance: Importance.Max, priority: Priority.High);
  var iOSPlatformChannelSpecifics = new IOSNotificationDetails();
  var platformChannelSpecifics = new NotificationDetails(
      androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
  await flutterLocalNotificationsPlugin.show(
    payload: 'fcm',);


on Select of notification

Future onSelectNotification(String payload) async {
  if (payload != null) {
    debugPrint('notification payload: ' + payload);

  // On Select Android Notifications



Display iOS Notification :

Future onDidRecieveLocalNotification(
    int id, String title, String body, String payload) async {
  // display a dialog with the notification details, tap ok to go to another page
    context: context,
    builder: (BuildContext context) => new CupertinoAlertDialog(
      title: new Text(title),
      content: new Text(body),
      actions: [
          isDefaultAction: true,
          child: new Text('Ok'),
          onPressed: () async {
            Navigator.of(context, rootNavigator: true).pop();

            // On select iOS notification



Flutter firebase push notification output :

This screen depicts the Flutter firebase push notification

Flutter firebase push notification



















If you have any query on this tutorial on Flutter firebase push notification do let us know in the comment section below.If you like this tutorial do like and share for more interesting tutorials.


Show Buttons
Hide Buttons
Read previous post:
Flutter SVG image tutorial | image, svg

  Flutter SVG : Flutter SVG implementation is explained in this part of the blog, let us see the usage...