Setup push notifications in your flutter app with ApparenceKit

You must first have a firebase project and setup your apparencekit project. If you haven't done it yet, please follow the setup guide.

Introduction

We use the firebase_messaging plugin to handle push notifications. It allows us to send notifications on Android and iOS devices. If you intend to use notifications on Android you don't have many options and you must use firebase.

How it works

  1. When the app starts, we ask for the user permission to send notifications
  2. If the user accepts, we register the device token in our backend
  3. We initialize the firebase messaging plugin
  4. We Initialize the flutter local notifications plugin
  5. We listen to the firebase token refresh event. When it happens, we update the device token in our backend
  6. When we receive a notification, we show it to the user. If the app is in the foreground, we show a the notification using the flutter local notification plugin. If the app is in the background, firebase will automatically show it.

If the use log out, we unregister the device token from our backend.

Here is a complete article on how it works

Setup

Plugins

Notifications relies on those two packages

🤖 Android setup

Congratulations, you have nothing to do.

🍏 iOS setup

setup local notifications

Open the iOS project with Xcode

Add the following lines to the application method in the AppDelegate.m/AppDelegate.swift file of your iOS project. See an example of this here.

if #available(iOS 10.0, *) {
  UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
}

Here is an example of how it should look like in your AppDelegate.swift file

Source: flutter_local_notifications

setup push notifications with firebase

Firebase will need to authenticate with your Apple account. So you need to create a key to allow firebase to send notifications to your app.

1 - Go to the Apple Developer Member Center and sign in with your credentials.
2 - In the "Certificates, Identifiers & Profiles" click on 'Keys' .
3 - Click on the '+' button to create a new key.
Create a new key apple apn key for firebase 4 - Enter the key name and check the Apple Push Notifications Service (APNS)
5 - click on register
register apple apn key for firebase 7 - then download it
download apple apn key

Note that you can’t have more than two keys and you can download it only once. So keep this file in a safe place. You will be able to use it for all your apps.

Upload the key to firebase

You can now upload this file to firebase.
1 - Go to your firebase project and click on the gear icon next to your project name.
2 - Click on project settings
3 - Click on the cloud messaging tab
4 - Click on upload your APNs authentication key
download apple apn key 5 - Select the file you just downloaded and click on upload
6 - Put your key id and your team id.

Related article