This section shows the way to configure the Push Notifications feature.

There are 2 below technologies for this feature:

  1. Push Notifications via Firebase
  2. Push Notifications via OneSignal

You can choose one of them. We recommend you to use Push Notifications via Firebase, because some other features also required Firebase to be set, as Show Address on Google Map, SMS Sign In, Google Sign In,... (From version 1.6.5c, we stop supporting the OneSignal due to its core library is not stable).

1. Push Notifications via Firebase

Push Notifications is a useful Flutter plugin. With this plugin, your Flutter app can receive and process the push notifications on Android and iOS.

iOS Integration

Setup firebase cloud messaging(FCM) push notification in IOS:

Note: if you build and have an error and cannot push notifications in the background and the log returns on Xcode Can't end BackgroundTask ... '' then you may be experiencing errors with iOS versions smaller than version 13.4 and Xcode from version 11. You can view this error at https://forums.developer.apple.com/thread/121990 Until iOS 13.4, this problem was fixed.

Video guide: (Subscribe to InspireUI youtube channel, like, and press the bell icon to get notifications for free video updates)

Manual guide:

Step 1: Create Project in https://console.firebase.google.com

Step 2: Add Firebase to your iOS app.

  • Open your firebase project console, click the gear icon in the upper left corner and select Project setting

homeicon

  • Select the IOS icon in the Your apps section

homeicon

  • Fill in the information with:

    • IOS bundle Id: is bundle ID taken from your application. You can find them by going to project flutter, searching for keyword PRODUCT_BUNDLE_IDENTIFIER in file ios/Runner.xcodeproj/project.pbxproj

    • Enter app nick name (the name here is only used to distinguish between applications on firebase so you can set arbitrary).

    • App Store ID you can omit this parameter.

  • Click Register app

homeicon

  • Click on the buttont Download GoogleService-info.plist to download the file.
  • Copy it to the ios directory of your project. If the GoogleService-info.plist file already exists, delete the old file and copy the new file.

homeicon

homeicon
  • Click Next

homeicon

  • This step is already installed in FluxStore source, click Next to continue

homeicon

  • This step is already included in the FluxStore source, but it seems to be obsolete.
  • You can fix it by removing some unnecessary code. The result will look like this:
import UIKit 
import Flutter 
import GoogleMaps 
import Firebase 
 
 class AppDelegate: FlutterAppDelegate { 
  override func application( 
    _ application: UIApplication, 
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? 
  ) -> Bool { 
    if #available(iOS 10.0, *) { 
      UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate 
    }
		GMSServices.provideAPIKey("your-google-api-key-here") 			
  	GeneratedPluginRegistrant.register(with: self) 
  	return super.application(application, didFinishLaunchingWithOptions: launchOptions) 
  } 
}
  • Click Next to continue

homeicon

  • Next press Skip the step

homeicon

  • Complete the process of creating an IOS application on firebase.

Step 3: Install Cloud Messaging to enable push notifications on iOS. Click Cloud Messaging as shown:

homeicon

  • Installing Cloud Messaging requires you to upload the auth key APNs here

homeicon

homeicon

  • Then choose Certificates, identifiers & Profiles

homeicon

  • Select Keys on the leftmenu, then click the plus icon to add a new key:

Note: 1 developer apple account can only create 2 keys, please consider before creating. But you can still delete them if needed.

homeicon

  • Enter the key name and select Apple Push Notification service (APNs) then click continue

homeicon

  • Click Register

homeicon

  • Click Download to download the APNs key file

homeicon

  • Return to the firebase console to update the APNs auth key. Click Upload

homeicon

  • Click Browse button then select the downloaded key:

homeicon

homeicon

homeicon

  • The key ID is the back part of the downloaded key file name:

homeicon

  • Enter Team ID, if you do not know where Team ID is coming from, please click on the question mark as shown in the picture, then click on the membership tab

homeicon

This is Team ID, copy it and enter the form in firebase:

homeicon

  • Click Upload:

homeicon

In some cases this error will be displayed (in some cases it will not be). If this is the case, please click Upload again:

homeicon

If the following screen appears, congratulations, you have successfully configured:

homeicon

Step 4: Install the push notification on source code: go back to source code. Open the file Runner.xcworkspace with Xcode:

homeicon

homeicon

homeicon

  • Show Runner folder out, you will see the GoogleService-info.plist file just now:

homeicon

homeicon

  • Click on Folder Runner again, select the Signing & Capabilities tab. In the background mode, check the two options of Background fetch and Remote notification have been checked, if not please check these two options:

homeicon

  • Next, click on Capability, find Push Notifications, then double click to select:

homeicon

homeicon

Step 5: Execute the push notification feature.

  • Now turn off Xcode and run the command flutter run. If the app is running for the first time, the app will ask for permission to receive your notifications, please click Allow

homeicon

  • Then continue the steps to enter the app. Then turn off the app and reopen firebase to check again.
  • Drag the left menu to the bottom, in the Grow section will have Cloud Messaging. Click Cloud Messaging, then Send your first message:

homeicon

  • Create a new messenger, fill in the messenger information and click next:

homeicon

In Target part, select the application you want to send, here select the IOS application that was configured in firebase before:

homeicon

homeicon

  • Click Next:

homeicon

  • The remaining steps can be ignored, continue to click Review:

homeicon

  • Click Publish button:

homeicon

  • Now go back to the app and check if it works:

homeicon

Congratulation! You have pushed the notification successfully.

Android Integration

Setup firebase cloud messaging(FCM) push notification in Android: Push Notification is a great feature that supports Vendors pushing their notifications to the end-user instantly. The end-user will receive the notifications on their smart devices.

Video guide: (Subscribe to InspireUI youtube channel, like, and press the bell icon to get notifications for free video updates)

Manual guide:

Step 1: Open your project in https://console.firebase.google.com/

homeicon

Step 2: Open your firebase project console, click the gear icon in the upper left corner and select Project setting

homeicon

Step 3: Select the Android icon in the Your apps section

homeicon

Step 4: Enter info your app

homeicon

  • Android package name is name package of android. Open file android/app/src/main/AndroidManifest.xml, in first line, copy package name after keyword package

homeicon

  • Fill info and click Register app (You can omit the Debug signing certificate SHA-1 parameter)

homeicon

Step 5: Download file google-service.json and move to folder /android/app

homeicon

If your folder /android/app already has a file google-service.json, delete it and make sure the file name is exactly google-service.json

Click next to continue...

Step 6: This step is Add Firebase SDK, because our project has all setup already, so just click next to continue.

homeicon

Step 7: At this stage, it is possible that firebase will not detect your test device, but that's okay, just click Skip step to continue with the following steps. (In case Firebase detect can click Continue to console)

homeicon

Step 8: Back to your project, run flutter clean and thenflutter run

Complete the setup process, now push notification from your firebase.

homeicon

Support Chating

Video guide:

Manual guide:

Install the Firebase CLI via npm by running the following command:

npm install -g firebase-tools

Change project-id by firebase project id:

firebase-function

homeicon

Run this command to deploy:

firebase deploy --only functions

2. Push Notifications via OneSignal

From version 1.3.0, the FluxNews supports the Push Notification via OneSignal.

const kOneSignalKey = {
  'appID': "8b45b6db-7421-45e1-85aa-75e597f62714",
};