Aprende Push Notifications | Firebase Integration

Firebase Cloud Messaging (FCM) is a powerful service that allows you to send push notifications to users on iOS, Android, and web platforms. Integrating FCM with your Flutter app enables real-time user engagement, such as alerts, reminders, or updates. To use FCM in Flutter, you rely on the firebase_messaging package, which manages the setup, message handling, and device registration for notifications. The integration process includes setting up Firebase in your project, configuring platform-specific settings, and writing code to receive and handle notifications.

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
            
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print('Background message: [32m${message.messageId}[0m');
}

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _notificationMessage = 'No notifications yet';

  @override
  void initState() {
    super.initState();
    _initFCM();
  }

  void _initFCM() async {
    FirebaseMessaging messaging = FirebaseMessaging.instance;

    // Request permission for iOS devices
    await messaging.requestPermission();

    // Get the device token
    String? token = await messaging.getToken();
    print('FCM Token: $token');

    // Handle foreground messages
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      setState(() {
        _notificationMessage =
            'Foreground: [32m${message.notification?.title ?? ''}[0m - [32m${message.notification?.body ?? ''}[0m';
      });
    });

    // Handle messages when app is opened via notification
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      setState(() {
        _notificationMessage =
            'Opened from notification: [32m${message.notification?.title ?? ''}[0m - [32m${message.notification?.body ?? ''}[0m';
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FCM Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Firebase Cloud Messaging')),
        body: Center(
          child: Text(
            _notificationMessage ?? '',
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

Firebase Cloud Messaging delivers different payloads depending on the app state. Use FirebaseMessaging.onMessage to handle notifications in the foreground, onMessageOpenedApp when the user opens the app from a notification, and a background handler for messages received while the app is closed. Access message.notification?.title and .body to show the content in your UI.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 4

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

How do I set up Firebase Cloud Messaging in my Flutter app?

Can you explain how to handle notifications in different app states?

What are the steps to configure platform-specific settings for FCM?

Desliza para mostrar el menú

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
            
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print('Background message: [32m${message.messageId}[0m');
}

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _notificationMessage = 'No notifications yet';

  @override
  void initState() {
    super.initState();
    _initFCM();
  }

  void _initFCM() async {
    FirebaseMessaging messaging = FirebaseMessaging.instance;

    // Request permission for iOS devices
    await messaging.requestPermission();

    // Get the device token
    String? token = await messaging.getToken();
    print('FCM Token: $token');

    // Handle foreground messages
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      setState(() {
        _notificationMessage =
            'Foreground: [32m${message.notification?.title ?? ''}[0m - [32m${message.notification?.body ?? ''}[0m';
      });
    });

    // Handle messages when app is opened via notification
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      setState(() {
        _notificationMessage =
            'Opened from notification: [32m${message.notification?.title ?? ''}[0m - [32m${message.notification?.body ?? ''}[0m';
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FCM Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Firebase Cloud Messaging')),
        body: Center(
          child: Text(
            _notificationMessage ?? '',
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 4