Hii all, I read some posts from frustrated FlutterFlow users about OneSignal integration in FlutterFlow without Firebase authentication.
If you tried activating OneSignal in your FlutterFlow app, you'll have noticed that you have to enable Firebase authentication to make it work. However, I found a workaround with some very simple custom code I will showcase in this post.
I fixed it all within a few hours myself, but if you don't have any dev knowledge, it's understandable that it might be daunting to implement this by yourself. Let me walk you through the steps, so I can save you all some time.
If you have never done this before the steps may seem confusing, but follow everything step by step, it will make sense in the end.
I assume you already have a OneSignal account. If not create this first and follow the instructions. You will need a Firebase account and follow the OneSignal Firebase instructions, but you DO NOT need to enable Firebase authentication, and you also don't need the paid "blaze" plan.
Step 1: Create a popup in FlutterFlow that asks the user whether they want to receive push notifications.
Step 2: Create a custom action that triggers when the user clicks "Yes" in the popup. Create the boilerplate code, but do not edit any of the code here. We will not edit this code within FlutterFlow. This is what mine looks like:
I added an email parameter, because I want to add a tag in OneSignal with the email of the user so I can target specific notifications towards them. However, this is not required, it's up to you whether you want to do this.
Step 3: Make sure you have a GitHub account. Also install Git on your machine if you don't have it. Instructions of how to do this are online.
Step 4: Push your code from FlutterFlow to GitHub. I won't get into details of how to do this as FlutterFlow has instructions about this already.
Step 5: Install GitHub desktop (it will make it easier for you to work with GitHub if you're not a developer).
Step 6: Make sure you have VSCode and an Android SDK installed, as we will test this on Android first. Instructions of how to install these are online. I installed Android Studio because it's easier to manage the SDK like this.
In Android studio you can go to Edit -> Settings -> Android SDK -> SDK Tools tab and make sure it has the following installed/checked just like in the screenshot:
Step 7: Make sure you have the flutter SDK installed. When you download the .zip, unpack it in a place that doesn't require admin privileges and doesnt contain spaces or special characters, and add the path to your environment variables PATH (instructions of how to do this are online). Mine looks like this:
C:\Users\username\OneDrive\Documents\flutter\bin
You might have to add this to the environment variables PATH as well:
C:\Users\username\OneDrive\Documents\flutter\bin\cache\dart-sdk\bin
Step 8: Pull the GitHub repo you pushed from FlutterFlow to your machine so you can edit the code. You can do this by logging into GitHub with GitHub desktop and pulling the repo.
Step 9: Open the project in VSCode and add a .gitignore file that looks like this:
.dart_tool
.idea
build
.flutter-plugins
.flutter-plugins-dependencies
pubspec.lock
Commit and push changes with GitHub desktop. It will ignore files that flutter and VSCode add, but are not necessary for version control.
Step 10: Create another branch from the repo in your command line in VSCode: git branch push-notifications
This will create a branch named "push-notifications". You can name it whatever you want though.
Step 11: do git checkout push-notifications to go to the branch you just created.
Step 12: Follow the steps for OneSignal Flutter SDK here, jump to "Add SDK" and then jump to the Android setup (I haven't done iOS yet as I don't have a Mac): https://documentation.onesignal.com/docs/flutter-sdk-setup
Step 13: In the OneSignal steps you had to add some code to the main.dart, however I changed it to only contain the following for OneSignal:
The reason why is that I only want to opt in the user if they accept the notification popup we created earlier.
Step 14: Edit the custom action we created earlier in VSCode (we created it in FlutterFlow, but you have to edit it in VSCode). In VSCode you can search for a file with Ctrl + p. Press these simultaniously and type the name of the custom action, for me it looks like this:
Then the code for me looks like this:
IMPORTANT:
Add this line to the imports of any file you want to use the OneSignal SDK in:
import 'package:onesignal_flutter/onesignal_flutter.dart';I know the green comment says to not modify the code above blablabla, but you'll have to add this otherwise it won't work.
Step 15: Test on Android by connecting your smartphone, enabling developer options debug mode (find instructions online), and typing the commands in terminal within VSCode:
flutter pub get
flutter run
If you get any problems with these commands, follow the instructions or find the error on Google.
A common error is that the package name in google-services.json does not match. You will have to change everywhere where it says package_name to the value of your package name. You can find this in FlutterFlow settings -> app details -> package name, copy paste the value. Example:
VERY IMPORTANT:
If you want to keep these changes you'll have to keep repeating this process whenever you edit your app in FlutterFlow:
Push your code to github.
Pull to code to your machine.
Go on the branch with your custom notification code in VSCode, if you're not already on it, with the git checkout branch_name command.
Do the command: git merge flutterflow (flutterflow is the name of the branch from FlutterFlow code push). The merge command will merge the new edits of your app in FlutterFlow into the custom code edits for OneSignal push notifications. If you don't do this, the edits of push notifications will not be in your app.
When you are done always build the app from the branch with your custom code, otherwise it won't work.
I also have optout functionality and will add multiple tags for better targetting, but it's too elaborate to show here. If you need any help you can always reach out. Hope this post helped some people.