> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Flutterflow SDK setup
> Instructions for adding the OneSignal Flutter SDK to your Flutterflow app for iOS and Android
export const SdkReleasesIframe = ({sdkFilter = undefined, viewMode = undefined, height, ...frameProps}) => {
const baseUrl = 'https://onesignal.github.io/sdk-releases';
const buildUrl = (theme, sdkFilter, viewMode) => {
const url = new URL(baseUrl);
const params = new URLSearchParams();
if (theme) {
params.set('theme', theme);
}
if (sdkFilter) {
params.set('sdk', sdkFilter);
}
if (viewMode) {
params.set('viewMode', viewMode);
}
if (params.toString()) {
url.search = params.toString();
}
return url.toString();
};
const detectTheme = () => {
if (document.documentElement.classList.contains('dark')) {
return 'dark';
}
return 'light';
};
const [theme, setTheme] = useState('light');
const [iframeSrc, setIframeSrc] = useState(() => {
const initialTheme = detectTheme();
return buildUrl(initialTheme, sdkFilter, viewMode);
});
useEffect(() => {
const currentTheme = detectTheme();
setTheme(currentTheme);
setIframeSrc(buildUrl(currentTheme, sdkFilter, viewMode));
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleThemeChange = () => {
const newTheme = detectTheme();
setTheme(newTheme);
setIframeSrc(buildUrl(newTheme, sdkFilter, viewMode));
};
if (mediaQuery.addEventListener) {
mediaQuery.addEventListener('change', handleThemeChange);
} else {
mediaQuery.addListener(handleThemeChange);
}
window.addEventListener('storage', handleThemeChange);
const observer = new MutationObserver(handleThemeChange);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class', 'data-theme']
});
return () => {
if (mediaQuery.removeEventListener) {
mediaQuery.removeEventListener('change', handleThemeChange);
} else {
mediaQuery.removeListener(handleThemeChange);
}
window.removeEventListener('storage', handleThemeChange);
observer.disconnect();
};
}, [sdkFilter, viewMode]);
const getIframeHeight = () => {
if (viewMode === 'table') {
return '450';
}
if (viewMode === 'mini') {
return '170';
}
return '800';
};
const iframeHeight = height || getIframeHeight();
return
;
};
This guide is for Flutterflow mobile app setup. If you have a Flutterflow site, please see our [Web SDK setup](./web-sdk-setup) guide.
## Requirements
* Flutterflow plan: Standard or higher
* Configured OneSignal app and platform
**iOS Requirements**
* macOS with Xcode 14+ (setup instructions use Xcode 16.2)
* Device with iOS 12+, iPadOS 12+, or Xcode simulator running iOS 16.2+
* CocoaPods 1.16.2+
**Android Requirements**
* Android 7.0+ device or emulator with Google Play Store (Services) installed
### Configure your OneSignal app and platform
Configure your OneSignal app with the platforms you support — Apple (APNs), Google (FCM), Huawei (HMS), and/or Amazon (ADM).
If your organization already has a OneSignal account, [ask to be invited](/docs/en/manage-team-members) to the Organization. Otherwise, [sign up for a free account](https://onesignal.com) to get started.
Create a new app by clicking **New App/Website**, or add a platform to an existing app in **Settings > Push & In-App**. Select the platform(s) you want to configure and click **Next: Configure Your Platform**.
Enter the credentials for your platform:
* **Android**: [Set up Firebase credentials](/docs/en/android-firebase-credentials)
* **iOS**: [p8 token (recommended)](/docs/en/ios-p8-token-based-connection-to-apns) or [p12 certificate](/docs/en/ios-p12-generate-certificates)
* **Amazon**: [Generate API key](/docs/en/generate-an-amazon-api-key)
* **Huawei**: [Authorize OneSignal](/docs/en/authorize-onesignal-to-send-huawei-push)
Click **Save & Continue** after entering your credentials.
Your **App ID** is displayed on the final screen. Copy and save it — you need it when initializing the SDK. Select your SDK platform, then follow the setup guide.
***
## Setup
### 1. Create a new custom action
In your Flutterflow project, navigate to Custom Code, then click the +Add button and select Action.
Under Action settings on the right-hand toolbar, click Add Dependency and enter the following dependency and click refresh to add it to the action:
```yaml dependency theme={null}
dependencies:
onesignal_flutter: ^5.1.2
```
In the Action Code, under the pre-loaded code add the following, then save and compile your action.
Replace `YOUR_APP_ID` with your OneSignal App ID found in your OneSignal dashboard **Settings > [Keys & IDs](./keys-and-ids)**.
If you don't have access to the OneSignal app, ask your [Team Members](./manage-team-members) to invite you.
```javascript Flutter theme={null}
import 'package:onesignal_flutter/onesignal_flutter.dart';
Future onesignal() async {
//Remove this method to stop OneSignal Debugging
OneSignal.Debug.setLogLevel(OSLogLevel.verbose);
OneSignal.initialize("YOUR_APP_ID");
// The promptForPushNotificationsWithUserResponse function will show the iOS or Android push notification prompt. We recommend removing the following code and instead using an In-App Message to prompt for notification permission
OneSignal.Notifications.requestPermission(true);
}
```
Next, click on the main.dart file in the left-hand tool bar and click the + icon next to Initial Actions in the right-hand bar and click on the `onesignal` action that has just been created.
This will add the action to you app and cause the OneSignal SDK to be initialised when the app runs:
### 2. Exporting the project
Open the Developer Menu and download the APK:
Once the APK has downloaded, you can test the app by dragging the APK into an Android emulator to install it. Push capabilities should work immediately and you can send push notifications to the device as soon as you provide push permissions through the native prompt.
Open the Developer Menu and download the project code:
### 3. iOS Setup
The downloaded project will likely not be ready to launch in iOS. Before setting up the OneSignal specific additions, you will need to make sure that the project is fully built. To do so:
* Open up a Terminal window, cd (change directory) to the `ios` folder of your downloaded project.
* In Terminal type `flutter build ios`and press enter. Wait for the build to complete, this may take some time depending on the size of your project.
* Still in Terminal type `pod install` and press enter. Wait for the pod install to complete.
Open the `.xcworkspace` file in Xcode located your project's ios folder.
Select the **root project > your main app target > Signing & Capabilities**.
If you do not see Push Notifications enabled, click **+ Capability** and add **Push Notifications**. Ensure that you enter the correct details for your Team and Bundle Identifier.
Click **+ Capability** again and add **Background Modes**. Then check **Remote notifications**.
#### Add Notification Service Extension
The OneSignalNotificationServiceExtension allows your iOS application to receive rich notifications with images, buttons, and badges. It's also required for OneSignal's confirmed receipt analytics features.
In Xcode Select **File > New > Target...**
Select **Notification Service Extension** then **Next**.
Enter the product name as `OneSignalNotificationServiceExtension` and press **Finish**.
Do not activate the scheme on the dialog that is shown after selecting **Finish**.
Press **Cancel** on the "Activate scheme" prompt.
Select the **OneSignalNotificationServiceExtension** target and **General** settings.
Set **Minimum Deployments** to be the **same value as your Main Application Target**. This should be iOS 11 or higher.
#### Add App Groups
App Groups allow your app and the OneSignalNotificationServiceExtension to communicate when a notification is received, even if your app is not active. This is required for badges and Confirmed Deliveries.
Select your **Main App Target > Signing & Capabilities > + Capability > App Groups**.
Within **App Groups**, click the **+** button.
Set the App Groups container to be `group.YOUR_BUNDLE_IDENTIFIER.onesignal` where `YOUR_BUNDLE_IDENTIFIER` is the same as your Main Application "Bundle Identifier".
Press **OK** and repeat for the OneSignalNotificationServiceExtension Target.
Select the **OneSignalNotificationServiceExtension Target > Signing & Capabilities > + Capability > App Groups**.
Within **App Groups**, click the **+** button.
Set the App Groups container to be `group.YOUR_BUNDLE_IDENTIFIER.onesignal` where `YOUR_BUNDLE_IDENTIFIER` is the same as **your Main Application "Bundle Identifier"**.
**DO NOT INCLUDE** `OneSignalNotificationServiceExtension`.
This step is only required if you **do not** want to use the default app group name (which is `group.{your_bundle_id}.onesignal`).
Open your `Info.plist` file and add a new `OneSignal_app_groups_key` as a `String` type.
Enter the group name you checked in the last step as it's value.
Make sure to do the same for the `Info.plist` under the `OneSignalNotificationServiceExtension` folder.
#### Add OneSignal SDK to the OneSignalNotificationServiceExtension
Update your `ios/Podfile` to include:
```ruby Podfile theme={null}
target 'OneSignalNotificationServiceExtension' do
pod 'OneSignalXCFramework', '>= 5.0.0', '< 6.0'
end
```
```ruby Example theme={null}
target 'MyApp' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# An absolute path to your application root.
:app_path => "#{Pod::Config.instance.installation_root}/.."
)
post_install do |installer|
# https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
react_native_post_install(
installer,
config[:reactNativePath],
:mac_catalyst_enabled => false,
# :ccache_enabled => true
)
end
end
target 'OneSignalNotificationServiceExtension' do
pod 'OneSignalXCFramework', '>= 5.0.0', '< 6.0'
end
```
At the top of your `Podfile` make sure you have `platform :ios, '11.0'`. - Or a newer iOS version if your app requires it.
```Text Podfile theme={null}
# Uncomment this line to define a global platform for your project
platform :ios, '11.0'
```
Open terminal, `cd` to the `ios` directory, and run `pod install`.
If you see the error below, add `use_frameworks!` to the top of your podfile and try again.
```
- Runner (true) and OneSignalNotificationServiceExtension (false) do not both set use_frameworks!.
```
#### OneSignalNotificationServiceExtension Code
In the Xcode project navigator, select the **OneSignalNotificationServiceExtension folder** and open the `NotificationService.m` or `NotificationService.swift` file.
Replace the whole file's contents with the following code.
```swift Swift theme={null}
import UserNotifications
import OneSignalExtension
class NotificationService: UNNotificationServiceExtension {
var contentHandler: ((UNNotificationContent) -> Void)?
var receivedRequest: UNNotificationRequest!
var bestAttemptContent: UNMutableNotificationContent?
override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
self.receivedRequest = request
self.contentHandler = contentHandler
self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
if let bestAttemptContent = bestAttemptContent {
/* DEBUGGING: Uncomment the 2 lines below to check this extension is executing
Note, this extension only runs when mutable-content is set
Setting an attachment or action buttons automatically adds this */
// print("Running NotificationServiceExtension")
// bestAttemptContent.body = "[Modified] " + bestAttemptContent.body
OneSignalExtension.didReceiveNotificationExtensionRequest(self.receivedRequest, with: bestAttemptContent, withContentHandler: self.contentHandler)
}
}
override func serviceExtensionTimeWillExpire() {
// Called just before the extension will be terminated by the system.
// Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
if let contentHandler = contentHandler, let bestAttemptContent = bestAttemptContent {
OneSignalExtension.serviceExtensionTimeWillExpireRequest(self.receivedRequest, with: self.bestAttemptContent)
contentHandler(bestAttemptContent)
}
}
}
```
```c objective-c theme={null}
#import
#import "NotificationService.h"
@interface NotificationService ()
@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNNotificationRequest *receivedRequest;
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;
@end
@implementation NotificationService
- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
self.receivedRequest = request;
self.contentHandler = contentHandler;
self.bestAttemptContent = [request.content mutableCopy];
/* DEBUGGING: Uncomment the 2 lines below and comment out the one above to ensure this extension is executing
Note, this extension only runs when mutable-content is set
Setting an attachment or action buttons automatically adds this */
// NSLog(@"Running NotificationServiceExtension");
// self.bestAttemptContent.body = [@"[Modified] " stringByAppendingString:self.bestAttemptContent.body];
[OneSignalExtension didReceiveNotificationExtensionRequest:self.receivedRequest
withMutableNotificationContent:self.bestAttemptContent
withContentHandler:self.contentHandler];
}
- (void)serviceExtensionTimeWillExpire {
// Called just before the extension will be terminated by the system.
// Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
[OneSignalExtension serviceExtensionTimeWillExpireRequest:self.receivedRequest withMutableNotificationContent:self.bestAttemptContent];
self.contentHandler(self.bestAttemptContent);
}
@end
```
***
## Testing the OneSignal SDK integration
This guide helps you verify that your OneSignal SDK integration is working correctly by testing push notifications, subscription registration, and in-app messaging.
If you are testing with an Android emulator, it should start with a cold boot.
1. Go to **Device Manager** in Android Studio.
2. Select your emulator device and click **Edit**.
3. Go to **Additional Settings** or **More**.
4. Set the **Boot option** to **Cold Boot**.
5. Save changes and restart the emulator.
### Check mobile subscriptions
The native push permission prompt should appear automatically if you added the `requestPermission` method during initialization.
Before accepting the prompt, check the OneSignal dashboard:
* Go to **Audience > Subscriptions**.
* You should see a new entry with the status "Never Subscribed".
The subscription's status should now show **Subscribed**.
You have successfully created a [mobile subscription](/docs/en/subscriptions).
Mobile subscriptions are created when users first open your app on a device or if they uninstall and reinstall your app on the same device.
### Set up test users
test users are helpful for testing a push notification before sending a message.
In the dashboard, next to the subscription, click the **Options (three dots)** button and select **Add to Test Users**.
Name the subscription so you can easily identify your device later in the **test users tab**.
Go to **Audience > Segments > New Segment**.
Name the segment `Test Users` (the name is important because it will be used later).
You have successfully created a segment of test users.
We can now test sending messages to this individual device and groups of test users.
### Send test push via API
In your OneSignal dashboard, go to **Settings > [Keys & IDs](/docs/en/keys-and-ids)**.
Replace `YOUR_APP_API_KEY` and `YOUR_APP_ID` in the code below with your actual keys. This code uses the `Test Users` segment we created earlier.
```curl theme={null}
curl -X \
POST --url 'https://api.onesignal.com/notifications' \
--header 'content-type: application/json; charset=utf-8' \
--header 'authorization: Key YOUR_APP_API_KEY' \
--data \
'{
"app_id": "YOUR_APP_ID",
"target_channel": "push",
"name": "Testing basic setup",
"headings": {
"en": "👋"
},
"contents": {
"en": "Hello world!"
},
"included_segments": [
"Test Users"
],
"ios_attachments": {
"onesignal_logo": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
},
"big_picture": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
}'
```
Run the code in your terminal.
If all setup steps were completed successfully, the test users should receive a notification with an image included:
Images will appear small in the collapsed notification view. Expand the notification to see the full image.
In your dashboard, go to **Delivery > Sent Messages**, then click the message to view stats.
You should see the **confirmed** stat, meaning the device received the push.
You have successfully sent a notification via our API to a segment.
* No image received? Your [Notification Service Extension](#ios-setup) might be missing.
* No confirmed receipt? Review the troubleshooting guide [here](/docs/en/confirmed-delivery#troubleshooting-confirmed-delivery).
* Having issues? Copy-paste the api request and a log from start to finish of app launch into a `.txt` file. Then share both with `support@onesignal.com`.
### Send an in-app message
[In-app messages](/docs/en/in-app-messages-setup) let you communicate with users while they are using your app.
This is because users must meet the in-app audience criteria *before* a new session starts. In OneSignal, a new session starts when the user opens your app after it has been in the background or closed for at least 30 seconds. For more details, see our guide on [how in-app messages are displayed](/docs/en/in-app-messages-setup#how-are-iams-displayed%3F).
* In your OneSignal dashboard, navigate to **Messages > In-App > New In-App**.
* Find and select the **Welcome** message.
* Set your Audience as the **Test Users** segment we used previously.
Under **Schedule > How often do you want to show this message?** select **Every time trigger conditions are satisfied**.
Click **Make Message Live** so it is available to your Test Users each time they open the app.
After the in-app message is live, open your app. You should see it display:
Not seeing the message?
* Start a new session
* You must close or background the app for at least 30 seconds before reopening. This ensures a new session is started.
* For more, see [how in-app messages are displayed](/docs/en/in-app-messages-setup#how-are-iams-displayed%3F).
* Still in the `Test Users` segment?
* If you reinstalled or switched devices, re-add the device to [Test Users](#set-up-test-users) and confirm it's part of the Test Users segment.
* Having issues?
* Follow [Getting a Debug Log](/docs/en/capturing-a-debug-log) while reproducing the steps above. This will generate additional logging that you can share with `support@onesignal.com` and we will help investigate what's going on.
You have successfully setup the OneSignal SDK and learned important concepts like:
* Gathering [Subscriptions](/docs/en/subscriptions), setting [Test Users](/docs/en/find-set-test-subscriptions), and creating [Segments](/docs/en/segmentation).
* Sending [Push](/docs/en/push) with images and [Confirmed receipt](/docs/en/confirmed-delivery) using Segments and our [Create message](/reference/create-message) API.
* Sending [In-app messages](/docs/en/in-app-messages-setup).
Continue with this guide to identify users in your app and setup additional features.
***
## User identification
Previously, we demonstrated how to create mobile [Subscriptions](/docs/en/subscriptions). Now we'll expand to identifying [Users](/docs/en/users) across all their subscriptions (including push, email, and SMS) using the OneSignal SDK. We'll cover External IDs, tags, multi-channel subscriptions, privacy, and event tracking to help you unify and engage users across platforms.
### Assign External ID
Use an External ID to identify users consistently across devices, email addresses, and phone numbers using your backend's user identifier. This ensures your messaging stays unified across channels and 3rd party systems (especially important for [Integrations](/docs/en/integrations)).
Set the External ID with our SDK's [`login` method](/docs/en/mobile-sdk-reference#login-external-id) each time they are identified by your app.
OneSignal generates unique read-only IDs for subscriptions (Subscription ID) and users (OneSignal ID).
As users download your app on different devices, subscribe to your website, and/or provide you email addresses and phone numbers outside of your app, new subscriptions will be created.
Setting the External ID via our SDK is highly recommended to identify users across all their subscriptions, regardless of how they are created.
### Add Tags
[Tags](/docs/en/add-user-data-tags) are key-value pairs of string data you can use to store user properties (like `username`, `role`, or preferences) and events (like `purchase_date`, `game_level`, or user interactions). Tags power advanced [Message Personalization](/docs/en/message-personalization) and [Segmentation](/docs/en/segmentation) allowing for more advanced use cases.
Set tags with our SDK [`addTag` and `addTags` methods](/docs/en/mobile-sdk-reference#data-tags) as events occur in your app.
In this example, the user reached level 6 identifiable by the tag called `current_level` set to a value of `6`.
We can create a segment of users that have a level of between 5 and 10, and use that to send targeted and personalized messages:
### Add email and/or SMS subscriptions
Earlier we saw how our SDK creates mobile subscriptions to send push and in-app messages. You can also reach users through emails and SMS channels by creating the corresponding subscriptions.
* Use the [`addEmail` method](/docs/en/mobile-sdk-reference#addemail-%2C-removeemail) to create email subscriptions.
* Use the [`addSms` method](/docs/en/mobile-sdk-reference#addsms-%2C-removesms) to create SMS subscriptions.
If the email address and/or phone number already exist in the OneSignal app, the SDK will add it to the existing user, it will not create duplicates.
You can view unified users via **Audience > Users** in the dashboard or with the [View user API](/reference/view-user).
Best practices for multi-channel communication
* Obtain explicit consent before adding email or SMS subscriptions.
* Explain the benefits of each communication channel to users.
* Provide channel preferences so users can select which channels they prefer.
***
### Privacy & user consent
To control when OneSignal collects user data, use the SDK's consent gating methods:
* [`setConsentRequired(true)`](/docs/en/mobile-sdk-reference#setconsentrequired): Prevents data collection until consent is given.
* [`setConsentGiven(true)`](/docs/en/mobile-sdk-reference#setconsentgiven): Enables data collection once consent is granted.
See our Privacy & security docs for more on:
* [Data collected by the SDK](/docs/en/data-collected-by-the-onesignal-sdk)
* [Handling personal data](/docs/en/handling-personal-data)
***
## Prompt for push permissions
Instead of calling `requestPermission()` immediately on app open, take a more strategic approach. Use an in-app message to explain the value of push notifications before requesting permission.
For best practices and implementation details, see our [Prompt for push permissions](/docs/en/prompt-for-push-permissions) guide.
***
## Listen to push, user, and in-app events
Use SDK listeners to react to user actions and state changes.
The SDK provides several event listeners for you to hook into. See our [SDK reference guide](/docs/en/mobile-sdk-reference) for more details.
### Push notification events
* [`addClickListener()`](/docs/en/mobile-sdk-reference#addclicklistener-push): Detect when a notification is tapped. Helpful for [Deep Linking](/docs/en/deep-linking).
* [`addForegroundLifecycleListener()`](/docs/en/mobile-sdk-reference#addforegroundlifecyclelistener-push): Control how notifications behave in foreground.
For full customization, see [Mobile Service Extensions](/docs/en/service-extensions).
### User state changes
* [`addObserver()` for user state](/docs/en/mobile-sdk-reference#addobserver-user-state): Detect when the External ID is set.
* [`addPermissionObserver()`](/docs/en/mobile-sdk-reference#addpermissionobserver-push): Track the user's specific interaction with the native push permission prompt.
* [`addObserver()` for push subscription](/docs/en/mobile-sdk-reference#addobserver-push-subscription-changes): Track when the push subscription status changes.
### In-app message events
* [`addClickListener()`](/docs/en/mobile-sdk-reference#addclicklistener-in-app): Handle in-app click actions. Ideal for deep linking or tracking events.
* [`addLifecycleListener()`](/docs/en/mobile-sdk-reference#addclicklistener-in-app): Track full lifecycle of in-app messages (shown, clicked, dismissed, etc.).
***
## Advanced setup & capabilities
Explore more capabilities to enhance your integration:
* [🔁 Migrating to OneSignal from another service](/docs/en/migrating-to-onesignal)
* [🌍 Location tracking](/docs/en/mobile-sdk-reference#location)
* [🔗 Deep Linking](/docs/en/deep-linking)
* [🔌 Integrations](/docs/en/integrations)
* [🧩 Mobile Service Extensions](/docs/en/service-extensions)
* [🛎️ Action buttons](/docs/en/action-buttons)
* [🌐 Multi-language messaging](/docs/en/multi-language-messaging)
* [🛡️ Identity Verification](/docs/en/identity-verification)
* [📊 Custom Outcomes](/docs/en/custom-outcomes)
* [📲 Live Activities](/docs/en/live-activities)
### Mobile SDK setup & reference
Make sure you've enabled all key features by reviewing the [Mobile push setup](/docs/en/mobile-push-setup) guide.
For full details on available methods and configuration options, visit the [Mobile SDK reference](/docs/en/mobile-sdk-reference).
Congratulations! You've successfully completed the Mobile SDK setup guide.
***
***