Cómo integrar Firebase Cloud Messaging (FCM) en tu aplicación Flutter para enviar notificaciones push

Las notificaciones push son una excelente manera de mantener a los usuarios de tu aplicación informados y comprometidos, incluso cuando no están usando activamente la app. Firebase Cloud Messaging (FCM) es una herramienta poderosa y fácil de integrar en Flutter para enviar notificaciones push. En este artículo, aprenderás cómo integrar FCM en tu aplicación Flutter y enviar notificaciones push.

🚀 Paso 1: Configurar Firebase Cloud Messaging en la consola de Firebase

Primero, debes configurar FCM en tu proyecto Firebase:

  1. Ve a la consola de Firebase.

  2. Selecciona tu proyecto o crea uno nuevo.

  3. En el menú de la izquierda, haz clic en "Cloud Messaging" bajo la sección de "Notificaciones".

  4. Si aún no lo has hecho, habilita FCM para tu proyecto.

📦 Paso 2: Agregar dependencias a tu proyecto Flutter

Para comenzar a usar FCM en Flutter, debes agregar las siguientes dependencias en tu archivo pubspec.yaml:

dependencies:
  firebase_core: ^2.25.0
  firebase_messaging: ^14.0.0
  flutter_local_notifications: ^11.0.0

Ejecuta el siguiente comando para obtener las dependencias:

flutter pub get

🧩 Paso 3: Configuración de Firebase en Flutter

Asegúrate de inicializar Firebase correctamente en tu aplicación. Abre tu archivo main.dart y modifica el código como sigue:

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(
      title: 'Flutter FCM',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: NotificationScreen(),
    );
  }
}

🔒 Paso 4: Solicitar permisos y configurar el manejo de notificaciones

Antes de enviar notificaciones push, es necesario que el dispositivo del usuario otorgue permisos. Para dispositivos iOS, debes solicitar permisos explícitamente. Aquí configuramos la solicitud de permisos y la recepción de notificaciones:

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
class NotificationService {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
  final FlutterLocalNotificationsPlugin _flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
  Future<void> setupFCM() async {
    // Solicitar permisos para iOS
    NotificationSettings settings = await _firebaseMessaging.requestPermission(
      alert: true,
      badge: true,
      sound: true,
    );
    // Configurar local notifications (opcional)
    const AndroidInitializationSettings initializationSettingsAndroid = AndroidInitializationSettings('app_icon');
    final InitializationSettings initializationSettings = InitializationSettings(
      android: initializationSettingsAndroid,
      iOS: IOSInitializationSettings(),
    );
    await _flutterLocalNotificationsPlugin.initialize(initializationSettings);
    // Obtener el token de dispositivo
    String? token = await _firebaseMessaging.getToken();
    print("Token del dispositivo: $token");
    // Configurar el manejo de mensajes cuando la app esté en segundo plano o cerrada
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Recibido mensaje: ${message.notification?.title}, ${message.notification?.body}');
      _showNotification(message);
    });
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('App abierta desde notificación: ${message.notification?.title}, ${message.notification?.body}');
    });
  }
  // Función para mostrar notificaciones locales
  Future<void> _showNotification(RemoteMessage message) async {
    final notificationDetails = NotificationDetails(
      android: AndroidNotificationDetails(
        'your_channel_id',
        'your_channel_name',
        importance: Importance.max,
        priority: Priority.high,
      ),
    );
    await _flutterLocalNotificationsPlugin.show(
      0,
      message.notification?.title,
      message.notification?.body,
      notificationDetails,
    );
  }
}

En el código anterior, solicitamos los permisos de notificación, configuramos los manejadores de mensajes y mostramos notificaciones locales cuando la app está en segundo plano o en primer plano.

📲 Paso 5: Enviar una notificación push desde Firebase Console

Una vez que tu aplicación esté configurada, puedes enviar una notificación push desde la consola de Firebase:

  1. Ve a la consola de Firebase.

  2. Selecciona tu proyecto.

  3. Haz clic en "Cloud Messaging" en la barra lateral.

  4. Haz clic en "Enviar tu primer mensaje".

  5. Escribe un título y mensaje para tu notificación.

  6. En la opción "Destino", selecciona "Token de dispositivo" e ingresa el token que obtuviste en tu app (puedes obtenerlo desde el print("Token del dispositivo: $token") en el paso 4).

  7. Haz clic en "Enviar".

🎯 Paso 6: Configuración adicional para plataformas específicas

En Android

Para que FCM funcione en Android, asegúrate de que tu archivo AndroidManifest.xml tenga los permisos correctos para recibir notificaciones push. Agrega los siguientes permisos en el archivo android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE"/>
<permission android:name="com.example.yourapp.permission.C2D_MESSAGE" android:protectionLevel="signature"/>
<uses-permission android:name="com.example.yourapp.permission.C2D_MESSAGE"/>

Asegúrate también de que tu archivo android/build.gradle incluya:

dependencies {
    implementation 'com.google.firebase:firebase-messaging:23.0.0'
}

Y en tu android/app/build.gradle, habilita los servicios de Google Play:

apply plugin: 'com.google.gms.google-services'

En iOS

Para habilitar las notificaciones push en iOS, agrega lo siguiente en tu archivo ios/Runner/Info.plist:

<key>UIBackgroundModes</key>
<array>
  <string>fetch</string>
  <string>remote-notification</string>
</array>

Además, asegúrate de haber configurado correctamente el servicio de FCM en tu Apple Developer Account y habilitado las notificaciones push en Xcode.

🎉 Conclusión

Ahora tienes una implementación básica de notificaciones push utilizando Firebase Cloud Messaging (FCM) en Flutter. Las notificaciones push pueden mejorar la experiencia del usuario, manteniéndolos comprometidos con contenido relevante y actualizaciones en tiempo real.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Cómo gestionar el estado de autenticación y proteger las rutas de tu app Flutter

La gestión del estado de autenticación es esencial para asegurar que los usuarios puedan acceder solo a las partes de la aplicación que les correspondan. En Flutter, podemos gestionar el estado de autenticación y proteger las rutas mediante la integración de Firebase Authentication y una gestión eficiente del estado, lo que garantiza que las rutas de tu aplicación estén protegidas de forma dinámica según el estado de inicio de sesión del usuario. En este artículo, aprenderás cómo gestionar el estado de autenticación en tiempo real y cómo proteger las rutas de tu aplicación para que solo los usuarios autenticados puedan acceder a determinadas pantallas. 🚀 Paso 1: Integrar Firebase Auth en tu aplicación Si aún no has integrado Firebase en tu proyecto Flutter, asegúrate de tener las dependencias correctas en tu archivo pubspec.yaml : dependencies: firebase_core: ^2.25.0 firebase_auth: ^4.15.0 provider: ^6.0.3 Ejecuta: flutter pub get 🧩 Paso 2: Crear un servicio de aute...
Leer más

Cómo manejar notificaciones push avanzadas con Firebase Cloud Messaging y Flutter

Las notificaciones push son una de las formas más efectivas de interactuar con los usuarios, manteniéndolos informados y comprometidos incluso cuando no están usando activamente la aplicación. Firebase Cloud Messaging (FCM) es una herramienta poderosa para enviar notificaciones push a tus usuarios. En este artículo, exploraremos cómo manejar notificaciones push avanzadas en Flutter usando FCM, cubriendo características como notificaciones de datos, mensajes personalizados, y la gestión de notificaciones en segundo plano. 🚀 Paso 1: Recordatorio sobre la configuración básica de FCM en Flutter Antes de empezar con las notificaciones avanzadas, asegúrate de tener configurado FCM en tu proyecto Flutter. Si no lo has hecho aún, sigue los pasos de la configuración básica de FCM que cubrimos en artículos anteriores. Asegúrate de que las dependencias necesarias estén incluidas: dependencies: firebase_core: ^2.25.0 firebase_messaging: ^14.0.0 flutter_local_notifications: ^11.0.0 ...
Leer más

Cómo usar Firestore en Flutter para guardar y mostrar datos en tiempo real.

¿Te gustaría mostrar datos en tiempo real en tu app Flutter, sin necesidad de actualizar manualmente la pantalla? En este artículo aprenderás a integrar Cloud Firestore, la base de datos en tiempo real de Firebase, en tu aplicación Flutter. Con Firestore podrás guardar, leer y mostrar datos de forma instantánea y sincronizada, ideal para apps como chats, listas de tareas, productos, y mucho más. ¿Qué es Cloud Firestore? Cloud Firestore es una base de datos NoSQL en la nube, desarrollada por Google. Está optimizada para el desarrollo de aplicaciones móviles y web. Su principal ventaja es que permite actualizar datos en tiempo real y sincronizarlos entre dispositivos sin esfuerzo. 🚀 Paso 1: Requisitos previos Proyecto Flutter creado y funcionando Firebase configurado e inicializado (puedes revisar nuestra guía anterior) Conexión a Firebase con firebase_core Conexión a Firestore con cloud_firestore 📦 Paso 2: Instalar el paquete cloud_firestore En el archivo pubspec.ya...
Leer más