## Install push notifications in Flutter apps in 4 steps. Setting up push notifications for your Flutter app is easy. Push notifications are the ideal solution to re-engage users and bring them back to your app. Estimated setup time: 15 minutes. ## Prerequisites You'll need: * For Android: * A device or emulator with Google Play services installed and up-to-date. * A [Firebase account](use-your-firebase-account#creating-your-firebase-account). * Android Studio. * For iOS: * XCode * An iOS device such as an iPhone or an iPad * An iOS push credentials If you haven't already, [sign up for a free account on wonderpush.com](https://dashboard.wonderpush.com/account/signup?prefill_platforms=\&prefill_appName=\&prefill_siteName=\&utm_source=Documentation). To upgrade to the latest version of our SDK, [follow these instructions](doc:upgrading-to-our-latest-sdk). ## Create your project Click on _New Project_:

Choose a name for your project and select _Android_ and _iOS_ as platforms then click _Create_:

> 📘 Already have a project? > > Just add the _Android_ or _iOS_ platforms to any existing project by going to _Settings_, selecting the first tab named after your project and clicking _Edit_. You'll be presented a form that lets you add a platform. ## Prepare your flutter project Create your Flutter application if you haven't already, see the [Flutter guide](https://flutter.dev/docs/get-started/install) and setup it by following given instructions. Open `pubspec.yaml` and add the following two dependencies: ```yaml pubspec.yaml dependencies: wonderpush_flutter: ^2.0.0 wonderpush_fcm_flutter: ^1.0.1 ``` Also make sure to remove the `firebase_messaging` dependency if you have it. Open a Terminal window in your flutter project directory and type: ```shell flutter pub get ``` Let's edit `lib/main.dart` to trigger a push notification prompt. You'll probably want to move this somewhere more appropriate later. ```kotlin lib/main.dart import 'package:flutter/material.dart'; // Add this line to import WonderPush at the top of the file import 'package:wonderpush_flutter/wonderpush_flutter.dart'; void main() { runApp(MyApp()); // Add this line to trigger a push notifications prompt WonderPush.subscribeToNotifications(); } ``` > 📘 Controlling the Android 13+ permission prompt timing > > In order to control when the permission prompt is triggered when running on Android 13 devices, you will need to update your `android/app/build.gradle` to use: > > ```groovy > android { > compileSdkVersion 33 > defaultConfig { > targetSdkVersion 33 > } > } > ``` > > If you do not do so, the user will be prompted for permission right at application launch. ## Setting up iOS ### Step 1. Upload your push credentials Get your Apple key with the _Apple Push Notifications service (APNs)_ service enabled. You can list your existing keys [here](https://developer.apple.com/account/resources/authkeys/list). Simply check the _Enabled Services_ and note the _Key ID_ as well as the Team ID displayed below your name in the top-right corner. If you don't have one, here's how to create one. In a few words, head to the [Apple developer website](https://developer.apple.com/), go to [*Accounts*](https://developer.apple.com/account/), then click on [*Keys*](https://developer.apple.com/account/resources/authkeys/list) in the _Certificates, Identifiers & Profiles_ column, and click the **+** button on the top left to add a new key. Check _Apple Push Notifications service (APNs)_, then click _Configure_:

Then in the _Environment_ drop-down, select both: _Sandbox & Production_, and click _Save_.

Once back on the previous screen, click _Continue_. In the next screen click _Register_. If you see a dialog telling you _“You have already reached the maximum allowed number of team scoped Keys for this service in production and sandbox environment.”_, this means that you should instead reuse an existing key. As Apple will not let you download the key again after its registration, you will need to use for the `.p8` file that you downloaded at that time.

> 📘 How should Apple keys be managed for the _Apple Push Notifications service (APNs)_ > > Apple imposes a maximum of 2 keys simultaneously valid for the _Apple Push Notifications service (APNs)_. Such keys are valid for all applications (Bundle ID or App ID) on your account (Team ID). > > Limiting to 2 keys enables you to have one key used for all your push notification needs across all your WonderPush projects (you'll need to upload the same key for each of your projects) or even push providers, _and_ perform a rolling replacement of your key with no downtime. > You would create a second key, temporarily having 2 valid keys at a time, replace every WonderPush project or services that need to send push notifications, and finally revoke the previous key, leaving you again with a single existing key. In the next screen click _Register_. In the next screen, note your Key ID, and your Team ID in the top right corner. Then click _Download_. Please do **keep this`.p8` file in a secure location** (see the above callout about key management.)

You will then need to know your Bundle ID: 1. Open your project in Xcode 2. Click on your project in the file browser on the left 3. Click on your app target in the list 4. Open the _General_ tab 5. Your _Bundle identifier_ (aka Bundle ID) is in the _Identity_ section

Now go to _Settings_ / _Platforms_, click the _iOS application_ section title and fill drop your `.p8` file: * Fill the Key ID, Team ID and Bundle ID if necessary. Check their values if they are pre-filled. * Click _Save_.

### Step 2. Prepare your Xcode project for push notifications In your flutter project directory, open the file `ios/Runner.xcworkspace` with Xcode. Be sure to open `ios/Runner.xcworkspace`, not `ios/Runner.xcodeproj` Make sure your deployment target is greater than or equal to iOS 9:

Add the following capabilities: 1. Background Modes 2. Push Notifications

Make sure the **Remote notifications** background mode is checked and ensure the Push notification capability is present:

Go to the Settings page of your [WonderPush dashboard](https://dashboard.wonderpush.com/) and take note of your client ID and client secret:

Open your `AppDelegate` (usually in `ios/Runner/AppDelegate.swift`) and update it to look like the following, adapting `YOUR_CLIENT_ID` and `YOUR_CLIENT_SECRET` with the values that can be found on the [Platform Settings page](https://dashboard.wonderpush.com/applications/_/platforms) of your WonderPush Dashboard: ```swift AppDelegate.swift (Swift) import UIKit import Flutter // Add these 2 lines import WonderPush import wonderpush_flutter @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { // Add the following method override func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool { WonderPush.setClientId("YOUR_CLIENT_ID", secret: "YOUR_CLIENT_SECRET") WonderPush.setupDelegate(for: application) WonderPushPlugin.prepare() if #available(iOS 10.0, *) { WonderPush.setupDelegateForUserNotificationCenter() } return super.application(application, willFinishLaunchingWithOptions: launchOptions) } override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -> Bool { GeneratedPluginRegistrant.register(with: self) return super.application(application, didFinishLaunchingWithOptions: launchOptions) } } ``` ```objectivec AppDelegate.m (Objective-C) // Add this line: #import - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // ... [GeneratedPluginRegistrant registerWith: self]; // Add the following 5 lines [WonderPush setClientId:@"YOUR_CLIENT_ID" secret:@"YOUR_CLIENT_SECRET"]; [WonderPush setupDelegateForApplication:application]; if (@available(iOS 10.0, *)) { [WonderPush setupDelegateForUserNotificationCenter]; } return [super application:application didFinishLaunchingWithOptions:launchOptions]; } ``` If at that stage your project doesn't compile, everything is normal: we'll run `pod install` later in this guide and that should fix it. ### Step 3. Create the notification service extension In Xcode, select _File_ / _New_ / _Target..._, and choose _Notification Service Extension_:

Enter `WonderPushNotificationServiceExtension` as the name for your new target:

When Xcode prompts you to activate the new scheme, answer _Cancel_ to keep Xcode building and debugging your app instead of the extension:

If you activate by mistake, switch back to your app's scheme from the dropdown menu located next to the play button. Set the _Deployment Target_ of your Notification Service Extension to `11.0`:

Make sure to use Automatic Signing for the extension target:

If you're getting the following error, make [sure to set up Automatic Signing for the extension](#automatic-signing): `Provisioning profile "XXX" has app ID "YYY", which does not match the bundle ID "YYY.WonderPushNotificationServiceExtension".` Finally, set **Enable bitcode** to **NO** in the extension target's build settings:

Open `NotificationService.swift` or (`NotificationService.h` and `NotificationService.m` for Objective-C) and replace **their entire contents** with: ```swift Swift (NotificationService.swift) import WonderPushExtension class NotificationService: WPNotificationServiceExtension { override class func clientId() -> String { return "YOUR_CLIENT_ID" } override class func clientSecret() -> String { return "YOUR_CLIENT_SECRET" } } ``` ```objectivec Objective-C (NotificationService.h) #import @interface NotificationService : WPNotificationServiceExtension @end ``` ```objectivec Objective-C (NotificationService.m) #import "NotificationService.h" @implementation NotificationService + (NSString *)clientId { return @"YOUR_CLIENT_ID"; } + (NSString *)clientSecret { return @"YOUR_CLIENT_SECRET"; } @end ``` Adapt `YOUR_CLIENT_ID` and `YOUR_CLIENT_SECRET` with the values you've noted above, the same you just gave to your `AppDelegate`. ### Step 4. Setup CocoaPods Open `ios/Podfile` and add the following at the bottom: ```ruby ios/Podfile target 'WonderPushNotificationServiceExtension' do platform :ios, '10.0' use_frameworks! # Pods for WonderPushNotificationServiceExtension pod 'WonderPushExtension', '~> 4.0' end ``` Please close Xcode before proceeding Open a Terminal window in your flutter project directory and type: ```shell cd ios pod install ``` If you're getting the error `Cycle inside Runner; building could produce unreliable results` and the detail of the error mentions `WonderPushNotificationServiceExtension.appex` you can try the following: 1. Go to the `Build phases` screen of the main `Runner` target 2. Make sure the `Copy bundle resources` step is right after `Link with libraries`

> 👍 Congratulations! > > Your iOS setup should now be complete. Deploy your app **on a real device** (simulator can't receive push notifications), subscribe and get your first push!

Wait a couple of minutes and receive the [default welcome notification](doc:default-welcome-notification):

## Setting up Android ### Step 1. Fill your Firebase credentials in the dashboard Follow the steps outlined in the [Firebase / Filling the Firebase credentials in the WonderPush dashboard](doc:use-your-firebase-account#filling-the-firebase-credentials-in-the-wonderpush-dashboard) article. Keep note of your _Project number_, also known as the _Sender ID_, as you will need in the below steps. ### Step 2. Configure SDK * Take note of your Client ID and Client Secret from the _Platforms_ tab of the _Settings_ page:

Open the Android Studio and configure the WonderPush Android SDK from your `android/app/build.gradle` file: ```groovy Android (android/app/build.gradle) android { defaultConfig { // Make sure minSdkVersion is 21 or higher minSdkVersion 21 // Note that it's important to keep the double quotes as part of the third argument // as this represents a string in Java code buildConfigField 'String', 'WONDERPUSH_CLIENT_ID', '"YOUR_CLIENT_ID"' buildConfigField 'String', 'WONDERPUSH_CLIENT_SECRET', '"YOUR_CLIENT_SECRET"' buildConfigField 'String', 'WONDERPUSH_SENDER_ID', '"YOUR_SENDER_ID"' buildFeatures { buildConfig = true } } } ``` ```kotlin Android Kotlin (android/app/build.gradle.kts) android { defaultConfig { // Note that it's important to keep the double quotes as part of the third argument // as this represents a string in Java code buildConfigField("String", "WONDERPUSH_CLIENT_ID", "\"YOUR_CLIENT_ID\"") buildConfigField("String", "WONDERPUSH_CLIENT_SECRET", "\"YOUR_CLIENT_SECRET\"") buildConfigField("String", "WONDERPUSH_SENDER_ID", "\"YOUR_SENDER_ID\"") buildFeatures { buildConfig = true } } } ``` Replace `YOUR_CLIENT_ID` and `YOUR_CLIENT_SECRET` with the appropriate values you find in the _Settings_ page. Replace `YOUR_SENDER_ID` with the Firebase Sender ID from [step 1](#step-1-fill-your-firebase-credentials-in-the-dashboard). Click _Sync now_ in the banner that showed up in your editor, or click the _Sync project with Gradle files_ button in the toolbar. Then build your project. > 📘 Solving error: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is X.Y.Z, expected version is A.B.C. > > in `android/settings.gradle` > replace `id "org.jetbrains.kotlin.android" version "A.B.C" apply false` > with `id "org.jetbrains.kotlin.android" version "X.Y.Z" apply false` > 👍 Congratulations, you're done! > > Run your app using Android studio and get your first push. Wait a couple of minutes and receive the [default welcome notification](doc:default-welcome-notification):

> 📘 Huawei mobiles support > > Because Huawei mobiles no longer ship with Google Play Services necessary for using Firebase Cloud Messaging, you will need to follow the [Huawei mobiles support](doc:huawei-mobile-services-hms-push-notification-support) guide to support them.