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.
- Android Studio.
- For iOS:
- XCode
- An iOS device such as an iPhone or an iPad
- An iOS Push Certificate (here's a how to obtain it)
If you haven't already, sign up for a free account on wonderpush.com.
Upgrading from our SDK version 1.x?
Follow this guide to update your integration.
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 and setup it by following given instructions.
Open pubspec.yaml
and add the following two dependencies:
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:
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.
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 on iOS and subscribe users on Android.
WonderPush.subscribeToNotifications();
}
Setting up iOS
Step 1. Upload your push certificate
Get your push certificate handy. If you don't have one, here's how to obtain it.
Head to the Apple developer website, go to Accounts, then Certificates, Identifiers & Profiles and click the plus button to add a new certificate. Choose the type Apple Push Notification service SSL (Sandbox & Production):


Then select your app ID (be sure not to select the app ID for the notification service extension):


Follow the rest of the wizard to obtain your certificate.
Go to Settings / Platforms, click the iOS application section title and fill in:
- your push certificate by clicking the Browse button,
- the push certificate password if appropriate.


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
, notios/Runner.xcodeproj
Make sure your deployment target is greater than or equal to iOS 9:


Add the following capabilities:
- Background Modes
- 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 and take note of your client ID and client secret:


Open your AppDelegate
and add the following, adapting YOUR_CLIENT_ID
and YOUR_CLIENT_SECRET
with the values that can be found on the Settings page of your WonderPush Dashboard:
import WonderPush
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)
if #available(iOS 10.0, *) {
WonderPush.setupDelegateForUserNotificationCenter()
}
return true
}
#import <WonderPush/WonderPush.h>
- (BOOL)application:(UIApplication *)application willFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[WonderPush setClientId:@"YOUR_CLIENT_ID" secret:@"YOUR_CLIENT_SECRET"];
[WonderPush setupDelegateForApplication:application];
if (@available(iOS 10.0, *)) {
[WonderPush setupDelegateForUserNotificationCenter];
}
return YES;
}
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 10.0
:


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:
import WonderPushExtension
class NotificationService: WPNotificationServiceExtension {
override class func clientId() -> String {
return "YOUR_CLIENT_ID"
}
override class func clientSecret() -> String {
return "YOUR_CLIENT_SECRET"
}
}
#import <WonderPushExtension/WonderPushExtension.h>
@interface NotificationService : WPNotificationServiceExtension
@end
#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:
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:
cd ios
pod install
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:


Setting up Android
Step 1. Fill your Firebase credentials in the dashboard
- Locate your Server Key and Sender ID in the Firebase project Cloud Messaging settings.


In your Firebase project console, click the gear icon (⚙️) and select Project settings and go to the Cloud Messaging tab.
- Go to your WonderPush dashboard, in the Settings page, select the Platforms tab and click on Android application.


- Paste the Server key.
- Click Save.
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:
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"'
}
}
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.
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.
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:


Updated about a month ago