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.
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.
Download the Flutter source package from Wrapply after checkout, then unzip it and open the project root in VS Code.
Open
console.firebase.google.com, create or select a project and add Android and iOS apps.Download
google-services.json from Firebase Project settings and place it in android/app/.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.yamlAdd Firebase packages and run
flutter pub get.lib/main.dartInitialize Firebase, request permissions, read the FCM token and handle notification taps.
android/settings.gradleAdd or verify the Google Services Gradle plugin declaration.
android/app/build.gradleApply the Google Services plugin to the Android app module.
android/app/src/main/AndroidManifest.xmlAdd Android notification permission and check notification metadata if needed.
ios/Runner.xcworkspaceOpen 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_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_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 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.
Add it inside
android/app/.Configure Google Services plugin in Android Gradle files.
For Android 13+, request
POST_NOTIFICATIONS.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.
id "com.google.gms.google-services" version "4.4.2" apply false
}
Then apply it in android/app/build.gradle.
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.
iOS configuration
iOS requires Apple Developer configuration, push notification capability and Firebase iOS setup.
Add it to
ios/Runner/ using Xcode.Enable Push Notifications in Xcode.
Configure APNs authentication in Firebase console.
Request user permission before receiving notifications.
After adding iOS dependencies, install pods from the project root or inside the ios folder.
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.
Save tokens in your database for each user/device.
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 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
Verify what happens when the app is open and a notification arrives.
Verify notification tap opens the correct screen or URL.
Verify the permission prompt appears and the device receives an APNs-backed FCM token.
Make sure your privacy policy mentions notifications and any personal data used for messaging.