Flutter Integrate OneSignale Push Notification

First step: Get iOS cert (mobileprovision + .p12)

NOTE: iOS emulator can NOT get push notification


Config on website

  • Login to https://console.firebase.google.com/
  • Create new project
  • At Project Overview -> Go to Project settings -> Cloud Messaging
    • Copy Server key and Sender ID which keys use to register on OneSignal
    • Create new OneSignal account and goto https://app.onesignal.com/
    • Select Settings ->
    • Select “Google Android” -> Fill “Firebase Server Key” and “Firebase Sender Key” which get from previous step on Firebase console -> Next to save and Leave Setup
    • Select “Apple iOS” -> Select “Upload optional sandbox certificate” -> Upload “.p12” and Next to save and Leave Setup
    • If all correct -> you will see the “ACTIVE” label

Config on Android app

  • Select Project Overview
    • Press “+ Add app”
    • Select Android => Fill “Android package name” -> Register app -> Download “google-services.json” and place that file to “android/app/google-services.json”
  • Goto Flutter project
    • Edit “android/app/build.gradle” -> Add below snip code at top (line 1)
buildscript {
    repositories {
        // ...
        maven { url 'https://plugins.gradle.org/m2/' } // Gradle Plugin Portal
    }
    dependencies {
        // ...
        // OneSignal-Gradle-Plugin
        classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.1, 0.99.99]'
    }
}

apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'
  • Add plugin
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services'
  • Edit “android/build.gradle”
buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
        jcenter()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
        classpath 'com.google.gms:google-services:4.3.3'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}
  •     Edit “android/app/src/main/AndroidManifest.xml”
<application
    ….
    <meta-data
        android:name="com.google.firebase.messaging.default_notification_icon"
        android:resource="@drawable/ic_launcher_background" />
</application>

Config on iOS app

  • Goto https://console.firebase.google.com/
  • Select Project Overview
    • Press “+ Add app”
    • Select iOS => Fill “iOS bundle ID -> Next -> Download “GoogleService-Info.plist” and place that file to “ios/Runner/GoogleService-Info.plist”
  • Goto Flutter project and open “ios/Runner.xcworkspace”
    • Select Runner -> Select Signing & Capabilities -> Select All ->
    • Correct Signing
    • Select “+ Capability” -> Add Background Modes -> Check to “Remote notifications”
    • Select “+ Capability” -> Add Push Notifications

Config on Dart app

  • pubspec.yaml
onesignal_flutter: ^2.3.4
  • Init OneSignal at first start app in lib before “runApp”
/// OneSignal Initialization
void initOneSignal(oneSignalAppId) {
  var settings = {
    OSiOSSettings.autoPrompt: true,
    OSiOSSettings.inAppLaunchUrl: true
  };

  OneSignal.shared.init(oneSignalAppId, iOSSettings: settings);

  OneSignal.shared
      .setInFocusDisplayType(OSNotificationDisplayType.notification);

  // will be called whenever a notification is received
  OneSignal.shared
      .setNotificationReceivedHandler((OSNotification notification) {
    print('Received: ' + notification?.payload?.body ?? '');
  });

  // will be called whenever a notification is opened/button pressed.
  OneSignal.shared
      .setNotificationOpenedHandler((OSNotificationOpenedResult result) {
    print('Opened: ' + result.notification?.payload?.body ?? '');
  });
}

Send test push

  • Go to: https://app.onesignal.com/
  • Select “Audience” on header to check active device -> Select “Subscribed Users” -> Select device option -> Add to Test Users
  • Select “Messages” on header -> NEW PUSH -> Fill info and send to Test Device -> Check on device

Liked it? Take a second to support nhancv on Patreon!

Leave a Reply

Your email address will not be published.Required fields are marked *