Wrapply logoWrapply Tutorials
🔔 Push notifications

Add Firebase push notifications to your Wrapply app

Push notifications require Firebase Cloud Messaging, Android and iOS configuration, permission handling, FCM tokens and usually backend sending logic.

Push notifications with Flutter and Firebase

Push notifications require Firebase Cloud Messaging, Android/iOS configuration and backend logic to send messages. Wrapply can prepare the app for notifications, but the final setup depends on your Firebase project and use case.

Notifications are not only a UI feature. You need Firebase configuration, device permissions, tokens and usually a backend or Cloud Function to send messages.
If you do not want to configure Firebase, APNs, Android permissions and store testing yourself, choose Wrapply managed publishing. Our team can prepare the app, verify the notification flow and guide the store submission.

Where to find the code and Firebase files

Push notifications are added to the Flutter source code package. After downloading your Wrapply source project, open the root folder in Visual Studio Code and edit the files listed below.

Wrapply source code
Download the Flutter source package from Wrapply after checkout, then unzip it and open the project root in VS Code.
Firebase console
Open console.firebase.google.com, create or select a project and add Android and iOS apps.
Android config file
Download google-services.json from Firebase Project settings and place it in android/app/.
iOS config file
Download GoogleService-Info.plist from Firebase Project settings and add it to ios/Runner/ with Xcode.

Files you usually edit

The exact generated project may change over time, but these are the common files to check when adding Firebase push notifications.

pubspec.yaml
Add Firebase packages and run flutter pub get.
lib/main.dart
Initialize Firebase, request permissions, read the FCM token and handle notification taps.
android/settings.gradle
Add or verify the Google Services Gradle plugin declaration.
android/app/build.gradle
Apply the Google Services plugin to the Android app module.
android/app/src/main/AndroidManifest.xml
Add Android notification permission and check notification metadata if needed.
ios/Runner.xcworkspace
Open with Xcode, add the plist file and enable Push Notifications capability.

Recommended setup flow

1. Download the Wrapply Flutter source code

Choose the source code package, download the project, unzip it and run it once before adding Firebase. This confirms the original generated app is working.

2. Create a Firebase project

In Firebase Console, create a project for your app. Use the same app identity you plan to publish with.

3. Register the Android app

Use the Android package name from your generated project. You can find it in Android Gradle files or in the package-name tutorial.

4. Register the iOS app

Use the iOS Bundle Identifier configured in Xcode. This must match the identifier used for Apple Developer signing.

5. Add Firebase files

Place google-services.json in android/app/ and add GoogleService-Info.plist to ios/Runner/ using Xcode.

6. Add Flutter and native configuration

Add dependencies, initialize Firebase, request permissions and configure Android/iOS capabilities.

7. Test on real devices

Use a real Android device and a real iPhone. iOS push notifications require Apple Developer signing and APNs configuration.

Add Firebase packages

Add the required packages from the project root. These commands update pubspec.yaml and download the packages.

flutter pub add firebase_core
flutter pub add firebase_messaging
flutter pub add flutter_local_notifications

Flutter setup in lib/main.dart

Initialize Firebase before running the app, request notification permission and retrieve the FCM token. Merge this logic into your existing Wrapply main.dart instead of replacing the whole file.

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  runApp(const MyApp());
}

Then request permission and read the token after the app starts, for example inside your first screen or app bootstrap logic.

final messaging = FirebaseMessaging.instance;
final settings = await messaging.requestPermission(alert: true, badge: true, sound: true);
final token = await messaging.getToken();
debugPrint('FCM token: $token');

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  debugPrint('Foreground notification: ${message.notification?.title}');
});

FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  final targetUrl = message.data['url'];
  // Open this URL inside your WebView/navigation layer if your app supports it.
});

Android configuration

Android requires Firebase configuration files and notification permissions for modern Android versions.

google-services.json
Add it inside android/app/.
Gradle plugin
Configure Google Services plugin in Android Gradle files.
Android permission
For Android 13+, request POST_NOTIFICATIONS.
Manifest
Check android/app/src/main/AndroidManifest.xml.

In recent Flutter Android projects, add the Google Services plugin in android/settings.gradle if it is not already present.

plugins {
  id "com.google.gms.google-services" version "4.4.2" apply false
}

Then apply it in android/app/build.gradle.

plugins {
  id "com.android.application"
  id "kotlin-android"
  id "dev.flutter.flutter-gradle-plugin"
  id "com.google.gms.google-services"
}

Add Android 13+ notification permission in AndroidManifest.xml.

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

iOS configuration

iOS requires Apple Developer configuration, push notification capability and Firebase iOS setup.

GoogleService-Info.plist
Add it to ios/Runner/ using Xcode.
Signing & Capabilities
Enable Push Notifications in Xcode.
APNs key
Configure APNs authentication in Firebase console.
Permission prompt
Request user permission before receiving notifications.
iOS push notifications require an Apple Developer account. For App Store publishing, the Bundle Identifier, signing team, APNs key and Firebase iOS app must all match.

After adding iOS dependencies, install pods from the project root or inside the ios folder.

flutter clean
flutter pub get
cd ios
pod install
cd ..

Backend sending logic

To send notifications automatically from your web app or dashboard, you usually need a backend endpoint or Firebase Cloud Function.

Store FCM tokens
Save tokens in your database for each user/device.
Send through Firebase Admin
Use Cloud Functions or your backend to send messages.

Example Cloud Function structure for sending a notification. Keep Firebase Admin credentials only on the server.

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();

exports.sendPushNotification = functions.https.onRequest(async (req, res) => {
  const { token, title, body, url } = req.body;
  if (!token || !title || !body) return res.status(400).send({ error: "Missing fields" });

  await admin.messaging().send({
    token,
    notification: { title, body },
    data: { url: url || "" },
  });

  return res.send({ ok: true });
});

Testing checklist before publishing

Android foreground
Verify what happens when the app is open and a notification arrives.
Android background
Verify notification tap opens the correct screen or URL.
iOS permission
Verify the permission prompt appears and the device receives an APNs-backed FCM token.
Store review
Make sure your privacy policy mentions notifications and any personal data used for messaging.
For production apps, Wrapply managed publishing can include Firebase setup review, Android/iOS build checks, notification testing and store-submission guidance.