My Hexaville
Spead the Word
flutter one signal plugin

Flutter One Signal Plugin


There aren’t many official Flutter plugins yet, One Signal is not an exception. If you’re like me and have used One Signal in your projects before, you’ll probably find this one useful

Update

This post is about a pre-release version. For complete latest API documentation refer to the GitHub repo

Implementation details

Obviously, there will be a first party plugin, since One Signal has React Native, PhoneGap, Xamarin, Cordova and many more cross-platform frameworks supported. But for now, this could work

Android setup went smooth, but I had a really hard time with iOS setup for a couple of days. Luckily, by using this repo as a reference and multiple trial/errors, I got my iOS part up and running to start implementing Flutter One SIgnal plugin

Now, I”m not going to explain how I created it, rather just how to use it in its currently limited functionality

Current Features

There’re three features currently available

  • Sign up for push notifications
  • Send a client tag
  • Handle notification receive/open events with notification as an input

Android Setup

Just follow these steps, and ignore all the native instructions from both Firebase and One Signal, a big chunk of that boilerplate code is handled by this plugin

Create a One Signal, Firebase projects

Open android/app/src/main/AndroidManifest.xml and copy package value

flutter one signal plugin

Open Firebase console/Project Settings, add Android app and paste package copied before into Android package name

flutter one signal plugin

Click Register app in the next step download google-services.json and paste in in android/app

flutter push notifications with firebase cloud messaging

Now, add an Android app in One Signal using Server key and Sender ID from Firebase Project Settings/Cloud messaging

flutter one signal plugin

Next, add this code to android/app/src/build.gradle, replacing APP_ID with your One Signal App ID

 iOS Setup

Open ios directory in Xcode and copy Bundle identifier

flutter push notifications with firebase cloud messaging

Now open FIrebase console, add an iOS app for your project using that Bundle ID and download GoogleService-info.plist from the next step. Click continue for the next steps, just ignore them

Open Xcode and paste GoogleService-info.plist into Runner directory

flutter push notifications with firebase cloud messaging

It’s important that you paste it using Xcode, if you use just a file explorer there will be some missing setting that I think Xcode does for you and your app won’t work

Now go to the General tab and make sure you have Automatically manage signing on and select your profile, this is going to save you from taking an extra step

flutter push notifications with firebase cloud messaging

 

If you don’t have an Apple developer profile – set it up first

Next open Capabilities tab and turn Push Notifications on

flutter push notifications with firebase cloud messaging

And Background Modes

flutter one signal plugin

Next, generate a .p12 file for your app using this tool, download it and keep the password

Add iOS app is One Signal/Settings and upload .p12 file and the password that you get before

Flutter Part

Add this dependency to pubspec.yaml, check for the latest version here

And this code anywhere where you want to initialize One Signal push notifications in your app

This code covers three features: startInit method signs you up for notifications and you pass notificationReceivedHandler, notificationOpenedHandler just like in the native SDK’s and sending a tag

The only required attribute here is appIdinFocusDisplaying by default is InAppAlert, unsubscribeWhenNotificationsAreDisabled works only on Android, it’s false by default

You could’ve noticed that I have a duplicated way of declaring One Signal app id. This is due to a very different iOS/Android setup logic. So, for now, you have to include it in build.gradle file. In the next iterations, I’ll try to  get rid of this part

Notification Open Handler

By default you have your home page opened when notification is clicked. This is not a behavior you’d want for a real app. To disable this behavior on Android add this code to android/app/src/main/AndroidManifest.xml

And now you can open the screen you want in Flutter

I haven’t figured out an iOS fix to disable the default open behavior. You can still use the Flutter logic, it’s just that your initial page will appear before the intended one

Alright, the repo itself is here. Feel free to create pull requests, I’ll deploy it to Pub later

 


About the Author Ihor Klimov

Formerly an Android developer, lately picked up some Flutter. This blog is everything that I find exciting about Android and Flutter development. Stay tuned and hope to see you again!

follow me on: