Flutter Firebase Cloud Messaging (FCM) | Send & Handle Push Notifications

### **Flutter Firebase Cloud Messaging (FCM) | Send & Handle Push Notifications 🚀** **Description:** Want to implement **push notifications** in your **Flutter app** using **Firebase Cloud Messaging (FCM)**? 📩 In this step-by-step tutorial, I'll show you how to **send and handle push notifications** in your Flutter app using Firebase! 🔥 By the end of this tutorial, you’ll be able to: ✅ **Set up Firebase Cloud Messaging (FCM) in Flutter** ✅ **Send push notifications to Flutter apps** ✅ **Handle foreground and background notifications** ✅ **Use Firebase API to trigger notifications** ✅ **Fix common FCM issues in Flutter** --- ## **1️⃣ Prerequisites for FCM in Flutter** ✔ **Flutter Installed** - [Download Flutter](https://flutter.dev/docs/get-started/install) ✔ **Android Studio or VS Code** (for Flutter development) ✔ **A Firebase account** - [Create an account](https://firebase.google.com/) ✔ **A Flutter Project** (`flutter create my_app` if you don’t have one) ✔ **FlutterFire CLI Installed** --- ## **2️⃣ Set Up Firebase for Cloud Messaging in Flutter** ### ✅ **Step 1: Create a Firebase Project** 1. Go to [Firebase Console](https://console.firebase.google.com/) 2. Click **"Create a Project"**, enter your project name, and continue 3. Enable **Google Analytics** (optional) and click **Create Project** --- ### ✅ **Step 2: Enable Firebase Cloud Messaging (FCM)** 1. In **Firebase Console**, go to **Cloud Messaging** 2. Click on **Get Started** 3. Enable **Push Notifications** --- ### ✅ **Step 3: Add Firebase to Your Flutter App** 1. Click on **Android** (for Android apps) or **iOS** (for iOS apps) 2. Download and add the `google-services.json` (for Android) or `GoogleService-Info.plist` (for iOS) to your project --- ## **3️⃣ Install Dependencies in Flutter** Run the following command in your Flutter project: ```bash flutter pub add firebase_core firebase_messaging ``` Then, update dependencies: ```bash flutter pub get ``` --- ## **4️⃣ Initialize Firebase in Your App** Open `main.dart` and initialize Firebase: ```dart import 'package:flutter/material.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:firebase_messaging/firebase_messaging.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: PushNotificationScreen(), ); } } ``` --- ## **5️⃣ Handle Firebase Push Notifications in Flutter** ### ✅ **Step 1: Request Notification Permissions** ### ✅ **Step 2: Implement Notification Handling in UI** ## **6️⃣ Sending Push Notifications from Firebase Console** 1. Go to **Firebase Console** → **Cloud Messaging** 2. Click **New Notification** 3. Enter a **Title** and **Body** 4. Select **Target App** 5. Click **Send Message** Your Flutter app should **receive the notification instantly!** 🎉 --- ## **7️⃣ Sending Notifications Using Firebase API** You can also send notifications via Firebase API: ### ✅ **Step 1: Get Your Firebase Server Key** 1. Go to **Firebase Console** → **Project Settings** 2. Click on **Cloud Messaging** 3. Copy the **Server Key** --- ### ✅ **Step 2: Send a Push Notification Using Postman or Curl** Use this API to send push notifications: Replace `YOUR_SERVER_KEY` with your actual **Firebase Server Key**. --- ## **8️⃣ Common Firebase Cloud Messaging Issues & Fixes** 🚨 **Push notifications not working in background?** ✔ Make sure to enable **background modes** in your app settings. 🚨 **FCM message not received on iOS?** ✔ Ensure you’ve enabled **APNs** in **Apple Developer Portal**. 🚨 **No permission dialog on Android?** ✔ Call `requestPermission()` before subscribing to notifications. --- ## **📌 Conclusion** 🎉 **Congratulations!** You have successfully integrated **Firebase Cloud Messaging (FCM)** into your **Flutter app**! 🚀 Now, your app can receive **push notifications** and keep users engaged. If you found this tutorial helpful, **LIKE** 👍 the video, **SUBSCRIBE** 🔔 for more Flutter tutorials, and **SHARE** with fellow developers! --- ## **📌 Useful Links:** 🔗 Firebase Console: [https://console.firebase.google.com/](https://console.firebase.google.com/) 🔗 FlutterFire Docs: [https://firebase.flutter.dev/](https://firebase.flutter.dev/) 🔗 FCM Documentation: [https://firebase.google.com/docs/cloud-messaging](https://firebase.google.com/docs/cloud-messaging) 📌 **Hashtags:** #Flutter #Firebase #FCM #PushNotifications #CloudMessaging #FirebaseMessaging #FlutterFirebase #Dart #MobileAppDevelopment #FlutterTutorial