as Flutterflow natively supports post notification
using Firebase Cloud Messaging however some of you guys are asking for one-signal integration
in the community so here it is let's learn how to set up one-signal post notification in
Flutterflow using custom code let me show you the demo of an working one-signal integration
let me send a notification to this app and this is running on a real device because we can't test notification on
test mode Now, OneSignal gives us a very user-friendly dashboard for
sending notifications and also provides an API to send notifications programmatically.
That means we can automate notifications easily and integrate it within our app using API calls.
Also, if you are using SuperBase, then you can use the Edge function to trigger notifications
to specific users for specific events. So, let's see how to achieve this in Flutterflow.
I assume you already have a OneSignal account. Now let's create an app in one signal by clicking
on the new app button. Write your app name. Now select Google Android AppCM. Next. Here
we need to upload Firebase Service Account JSON file. Let's retrieve our service account
from Firebase. Open your Firebase console. Select your project. Click on the setting icon
to open project settings. Go to the service account tab menu. Here we need to generate a
new key by clicking on the generate key button. Now that we have our service account JSON file.
Let's upload it on OneSignal. So click Choose File and upload the downloaded service account
key here. Then click Save and Continue. Next, we need to select Flutter because it is a Flutter
project. Save and Continue. Now we have obtained our OneSignal app ID which we will use in our
app later. Now let's open Flutterflow. Here I have already created an app project. You can
use any of your projects to follow along. Now navigate to the Custom port section. In this
section, we need to add new custom port. Click on Add button and select Action. Now let's give
a name to our action. OneSignal Paste the provided code in the editor. Also
add the pubspec dependency. Next, we need to make a small modification in the action form. We just need to replace
the app ID with our generated OneSignal app ID. Let me replace it. For this demo, the app
ID is hardcoded here. However, for a production app, it is recommended to store the app ID.
in the app state variable. Storing sensitive information like the app id directly in the
code is not secure. Now, I have added the app id. Let's save our action. Let's compile the
code so we can use it in the app. The code has been successfully compiled. Now, go to the
main.dart section. Add one signal action in the initial action of main.dart. Now, we are
done from this side. Now, let's test if it's working. We can't test this in test mode. So,
we need to use a real device. Download the APK and install it on your real device. After
downloading, I have installed the app. Now let's open it. It's asking for permission to
send notifications. Let's allow it. Now let's open one signal and click check subscribe user
to verify if it's working or not. As you can see, it's working. Here is my device and it
shows that I can send notifications to that user. So let's test it by clicking send a message
button. Let's write something here. Test message. Click review and send. Here it shows that we
only have one user that we can send a notification to. So let's send it. We have successfully sent
a notification. Here on the phone, you can see the notification has arrived instantly.
Now let's send a notification with the image. Create a new post notification and write the
message name. Add a title and message. Let's select an image. You can upload any image you
want, but I'm going to use web search. Okay, so let's search for one single. I like this
one, so let's save it. Okay, so let's send it. Here you can see that our app received the
notification with the image we selected. Now let's send an in-app notification. Select in-app,
new message, new in-app. Enter a message name for the in-app notification. Here you can design
your in-app notification using a blog editor or an HTML editor. For this demo, I will be
choosing the blog editor. But before sending a notification, let's add a test user so we
can instantly test our in-app notification. Click on send test in-app, add test user, select
the user, add to test subscription. Name the test user and then add it. Now let's refresh
the list. Let's select an image here. Let's send it to our test user. Here you can see our
in-app notification is also working. Thanks for watching. If you found this tutorial helpful,
please like the video and consider subscribing to our channel for more Flutterflow tutorials and updates. If you have
any question or suggestion, feel free to leave a comment below. Keep building
awesome apps.
