Flutterexperts

Google recently announced that more than over 2 million Developers Worldwide have laid their hands on Flutter. After the language’s roll-out at the Google I/O ‘18, This revelation from the search giant immensely Signifies diversion of developers from Native development to the Newer Technologies Building Extensive Cross-Platform Apps. Flutter started its life as an open source UI framework that helps developers build native interfaces supporting different device sizes, pixel densities & orientations creating magnificent digital experience.

In this Article ,We will have a look at How to send Push Notification in a Flutter project through the help of firebase its features and customisation available:

Introduction to Push Notification:

Push Notification is a Infallible medium of alerting app users of Information they might have opt-in from apps and services . It is also a prominent retention medium to drive User-Engagement for the apps that might have gone Unnoticed after their being Installed .

Firebase Cloud Messaging (FCM) avails a comprehending set of online tools to send notifications to the user audience intended . You can always select your target audience for the push notification on the basis of firebase predictions to dynamically segment your user & the engagement you’re trying to recieve by always keeping in sight of their relative number from the total user base. We Intend To learn Sending messages to a flutter app and the role of back-end cloud function & firebase analytics in their being broadcast notification to a Single User|Segmented Audience creating a pipeline for Push Notifications.

FCM push notifications can be comprehended to be of three types:

: Token Based Notification- This can be sent with help of user device token for sending notifications on the basis of Individual User Activities .

: Topic based Notification- This kind of Push Notification is sent for subscription based notification to the users that user might have opted-in .

: Segment based Notification : Sending Notification on the basis of firebase analytics to a segment of your user .

Firebase Cloud Messaging Project Creation

In order to send Push Notification ,We need to create a firebase project for the Firebase Cloud Messaging from firebase.google.com by logging in with your google account. This brings us to the following screen::

Click on Add Project Button (+) initiating firebase project creation process.

Select the appropriate name for the project entering continue further

You can either select the firebase analytics and then clicking on Continue Project. Firebase messaging is now created and ready to use .

This Progress indicator will show before the dashboard indicating success.

In the project overview page, click the iOS icon to launch the setup workflow as we now needs to register your flutter project for the android and iOS application. .

Integration with iOS App

Enter the iOS bundle ID which can be founded also at info.plist of being the next line after CFBundleIdentifier.

Make sure you enter the correct ID As this can’t be edited further at the moment .

Next step , We need to download the config file named as GoogleService-info.plist & repeating the similar process to register your android app there savoing the Google-service.json file .Keep those configuration files in ready-to-use with Flutter app later.

Click Project setting from the option further. Select Cloud messaging noting down the server key signified there.

Flutter Application Setup with FCM

Create a new Flutter Project making sure application name is same as package or bundle ID at the time of firebase project creation

Open pubspec.yaml entering the firebase messaging dependencies :

dependencies:

firebase_messaging:           <add-latest-version>
device_id:                    <add-latest-version>

Android-specific configurations

: Open build.gradle of android section. In the dependencies section add :

dependencies {classpath 'com.google.gms:google-services:4.3.3'}

: Open android/app/build.gradle . In the dependencies section add the following & In the end enter the required plugin as shown up:

dependencies {
implementation 'com.google.firebase:firebase-analytics:17.2.2'
implementation 'com.google.firebase:firebase-messaging:20.1.5'
}

apply plugin: 'com.google.gms.google-services'

Add the following intent filter inside of the activity element of your AndroidManifest so that when user taps in Content is Being Displayed.

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

Add the google-services.json file previously downloaded by putting the file in android/app of your project file folder.

iOS Specific Configuration:

We need to register our app seperately in the firebase project for its configuration for iOS apps:

: In Xcode , Open ios/Runner/Runner.xcodeproj and check whether the Bundle identifier at general section is same from the Bundle Id entered at the Project , otherwise edit this to make them similar and Register.

: Enter the Downloaded GoogleService-Info.plist from the firebase console into Xcode project within Runner:

Important Note: Do not just copy the folder without the help of Xcode by simply copy-pasting outside of Xcode as this will likely not work

Adding Firebase SDKs

1. Create a Podfile if you don’t already have one:

$ cd your-project-directory
$ pod init

2.Install the pods, then open your .xcworkspace file to see the project in Xcode:

pod install
open your-project.xcworkspace

3. Initialize Firebase in your app:

Import the Firebase module in your UIApplicationDelegate

import Firebase

Configure a FirebaseApp shared instance, typically in your app’s application:didFinishLaunchingWithOptions: method:

// Use Firebase library to configure APIs

  FirebaseApp.configure()

FCM Notification Types:

1. Individual Device Token Based Notification : Personalised notification are most used for sending Push Notification as they are more apt and specific to Key needs of the user being sent on the basis of analytical methods . Though they are being sent mostly in the form of Cloud Functions but you can also send them from the firebase console which is depicted below:

In the Grow Section , Select Cloud Messaging option after this you will see a prompt to Send your first message

Enter the Notification title & description text . We can also add the Notification Image as depicted . Before Sending the notification message a user can always preview the notification in (expanded & Initial state) the notification will likely be shown on devices.

The only thing needed right now to send the notification is the device token which can be availed by using the device_id plugin at the dependencies:

final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

@override
void initState() {

  super.initState();


  Future.delayed(Duration.zero, () {
    this.firebaseCloudMessagingListeners(context);});}

void firebaseCloudMessagingListeners(BuildContext context) {
  _firebaseMessaging.getToken().then((deviceToken) {
    print("Firebase Device token: $deviceToken");

  });
}

Device token obtained from the flutter code can be entered for the push notification enabling device specific Push Notification.

2. Segmented User Based Notification: Segmented notification are sent on the basis of various factor : country, last app engagement , user audience . Firebase Prediction Tools comes out handy for this making possible by studying your app’s analytics helping you in driving campaign driving better user engagement.

: After Successfully Entering the Notification Details . You need to select the segment of user audience on the basis of various tools alongwith firebase prediction that use your analytics to drive user campaign most suitable .

You will then see the preview for the segmented notification . Publish here for successfully sending of the notification.

3. Topic based Notification: Topic based notification are another personalised way of sending notification that may have opted in for a particular services . This can be done either in the background or by manually making the user subscribing to a service offered.

MaterialButton(
    child: Text('Subscribe to FlutterDevs'),
    onPressed: () => _fcm.unsubscribeFromTopic('FlutterDevs')
),

Here, If the User taps on the button will result in him subscribing to the topic FlutterDevs which maybe later used for sending notification on the topic .

This will result in sending notification to the subscriber of ‘FlutterDevs ’ topic.

All Push Notification were recieved to the Intended Users:

Closing Thoughts:

We have Surely realised the Importance of Using Push Notification for our mobile apps quite apparently and It’s Integration with Firebase really Alleviates the problems of many apps getting unnoticed after being installed being a great retention medium for them .Firebase facilitate multiple services collection availed at a single place such as storage, cloud functions, real time databases, authentication. Hope After reading the article you must have gotten an insightful of Push Notification in Flutter with Firebase. Give it a TRY!!

---

Feel free to connect with us:

And read more articles from FlutterDevs.com

FlutterDevs has been working on Flutter from quite some time now. You can connect with us on Facebook and Twitter for any flutter related queries.

We welcome feedback, and hope that you share what you’re working on using #Flutter. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!

Thank you for reading. 🌸