Flutter is on pace in gathering more and more userbase every day. With its increasing popularity, push notification is a feature that is a must-have so that the app can be made more interactive.
You may also check our flutter app development services
To add a push notification feature to the flutter app, Google has provided a powerful platform that is Firebase. With Firebase Cloud Messaging we can enable push notification feature for iOS and Android app at the same time.
Let’s start with the code-based implementation.
At first, we will need to add firebase_messaging package to our pubspec.yaml file.
|
1 2 |
dependencies: firebase_messaging: ^7.0.3 |
Now we will need to add some boilerplate code to enable push notification in the Android app.
Add the google-services.json file downloaded from the firebase project and place it inside android/app. Assuming you are familiar with thegoogle-services.json.
Then, make sure to add to your root-level build.gradle file:
|
1 2 3 4 5 6 7 |
buildscript { // ... dependencies { // ... classpath 'com.google.gms:google-services:4.3.3' } } |
Then, in your module-level Gradle file (usually the app/build.gradle), add the ‘apply plugin’ line at the bottom of the file to enable the Gradle plugin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
apply plugin: 'com.android.application' android { // ... } dependencies { // ... implementation 'com.google.firebase:firebase-core:9.6.1' } // ADD THIS AT THE BOTTOM apply plugin: 'com.google.gms.google-services' |
If want to be notified in your app (via onResume and onLaunch, see below) when the user clicks on a notification in the system tray include the following intent-filter within the <activity> tag of your android/app/src/main/AndroidManifest.xml:
|
1 2 3 4 |
<intent-filter> <action android:name="FLUTTER_NOTIFICATION_CLICK" /> <category android:name="android.intent.category.DEFAULT" /> </intent-filter> |
In this way, we can start receiving notifications in our Flutter app. In the upcoming blog, we will see how to handle background notifications.
Reference
2 comments
It’s nice to know this post was helpful to you.