CÓMO IMPLEMENTAR NOTIFICACIONES LOCALES EN FLUTTER
Introducción a las Notificaciones Locales en Flutter
Las notificaciones son una herramienta poderosa para mantener a los usuarios comprometidos con una aplicación móvil, permitiendo enviar alertas importantes o recordatorios incluso cuando la aplicación no está en uso. En Flutter, un framework de desarrollo multiplataforma, las notificaciones locales ofrecen una forma eficiente de comunicarse con los usuarios sin depender de servidores remotos. A diferencia de las notificaciones push, que requieren infraestructura externa, las notificaciones locales se generan directamente desde la aplicación, lo que las hace ideales para casos como recordatorios, alertas de eventos o actualizaciones internas. Este tutorial detalla cómo implementar notificaciones locales en Flutter, cubriendo la configuración del proyecto, la inicialización para Android e iOS, y casos prácticos como mostrar, programar y cancelar notificaciones. Se utilizará la versión más reciente de Flutter disponible hasta noviembre de 2025, asegurando compatibilidad con las últimas actualizaciones del paquete flutter_local_notifications.
Configuración del Proyecto
Para comenzar, es necesario añadir el paquete flutter_local_notifications al proyecto de Flutter. Este paquete permite gestionar notificaciones locales en aplicaciones móviles de manera eficiente. En el archivo pubspec.yaml, bajo la sección de dependencias, agrega la siguiente línea:
dependencies:
flutter:
sdk: flutter
flutter_local_notifications: ^18.0.0
Luego, ejecuta el comando para instalar las dependencias:
flutter pub get
Es fundamental inicializar el paquete de notificaciones locales para que funcione correctamente en la aplicación. Para mantener el código organizado, se recomienda crear una clase de servicio que gestione toda la lógica de las notificaciones. Crea un archivo nuevo llamado notification_service.dart con el siguiente código:
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
class NotificationService {
static final NotificationService _notificationService = NotificationService._internal();
factory NotificationService() {
return _notificationService;
}
NotificationService._internal();
final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
}
Este código implementa un patrón Singleton, asegurando que solo exista una instancia de la clase NotificationService en toda la aplicación. Esto es útil para centralizar la gestión de notificaciones y evitar conflictos.
Integración con Android e iOS
Dado que Flutter es un framework multiplataforma, las notificaciones locales deben configurarse específicamente para Android e iOS, ya que cada sistema operativo maneja las notificaciones de manera diferente. A continuación, se detalla cómo realizar esta configuración.
Configuración para Android
En Android, la configuración es relativamente sencilla. Solo se requiere especificar un ícono predeterminado para las notificaciones. Este ícono debe colocarse en el directorio android/app/src/main/res/drawable del proyecto. Por ejemplo, si el ícono se llama app_icon.png, la estructura del directorio será:
android
└── app
└── src
└── main
└── res
└── drawable
└── app_icon.png
No es necesario solicitar permisos adicionales en Android para notificaciones locales, ya que el sistema operativo los gestiona automáticamente. Sin embargo, es importante asegurarse de que el ícono esté correctamente referenciado en la configuración.
Configuración para iOS
En iOS, la configuración de notificaciones locales es más compleja debido a las diferencias entre versiones del sistema operativo y los requisitos de permisos. Para iOS 10 y versiones posteriores, es necesario configurar el delegado de notificaciones en el archivo AppDelegate.m o AppDelegate.swift. En AppDelegate.m, agrega las siguientes líneas:
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id> *)launchOptions {
if (@available(iOS 10.0, *)) {
[UNUserNotificationCenter currentNotificationCenter].delegate = (id<UNUserNotificationCenterDelegate>) self;
}
return YES;
}
Además, se deben solicitar permisos al usuario para mostrar alertas, sonidos o insignias en las notificaciones. Esto se configura mediante el objeto IOSInitializationSettings, donde puedes especificar si deseas solicitar permisos para sonido, insignias o alertas. Si no deseas que el sistema muestre diálogos de permisos al inicializar el paquete, puedes establecer estos valores en false. Por ejemplo:
final IOSInitializationSettings initializationSettingsIOS = IOSInitializationSettings(
requestSoundPermission: false,
requestBadgePermission: false,
requestAlertPermission: false,
);
Para versiones de iOS anteriores a la 10, es necesario implementar un callback onDidReceiveLocalNotification para manejar las interacciones del usuario con las notificaciones cuando la aplicación está en primer plano.
Inicialización del Paquete
Para inicializar el paquete flutter_local_notifications, crea un método init en la clase NotificationService. Este método configura las opciones específicas para Android e iOS y llama al método initialize del plugin. Aquí está el código completo:
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
class NotificationService {
static final NotificationService _notificationService = NotificationService._internal();
factory NotificationService() {
return _notificationService;
}
NotificationService._internal();
final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
Future<void> init() async {
final AndroidInitializationSettings initializationSettingsAndroid = AndroidInitializationSettings('app_icon');
final IOSInitializationSettings initializationSettingsIOS = IOSInitializationSettings(
requestSoundPermission: false,
requestBadgePermission: false,
requestAlertPermission: false,
onDidReceiveLocalNotification: onDidReceiveLocalNotification,
);
final InitializationSettings initializationSettings = InitializationSettings(
android: initializationSettingsAndroid,
iOS: initializationSettingsIOS,
macOS: null,
);
await flutterLocalNotificationsPlugin.initialize(
initializationSettings,
onSelectNotification: selectNotification,
);
}
Future<void> onDidReceiveLocalNotification(int id, String? title, String? body, String? payload) async {
// Lógica para manejar notificaciones en iOS < 10
}
Future<void> selectNotification(String? payload) async {
// Lógica para manejar la interacción del usuario con la notificación
}
}
El método init debe llamarse al iniciar la aplicación, preferiblemente en el archivo main.dart:
import 'package:flutter/material.dart';
import 'notification_service.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await NotificationService().init();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Notificaciones Locales')),
body: Center(child: Text('Aplicación de Ejemplo')),
),
);
}
}
Este código asegura que el servicio de notificaciones esté inicializado antes de que la aplicación se ejecute, permitiendo el uso de notificaciones locales en cualquier momento.
Mostrar una Notificación Local
Para mostrar una notificación local, es necesario definir los detalles específicos de la notificación para cada plataforma. En Android, se utiliza AndroidNotificationDetails, que requiere parámetros como el ID del canal, el nombre del canal y una descripción. Estos son obligatorios para Android 8.0 y versiones posteriores. En iOS, se utiliza IOSNotificationDetails para configurar aspectos como alertas, sonidos o insignias.
Aquí está un ejemplo de cómo configurar los detalles para Android:
const AndroidNotificationDetails androidPlatformChannelSpecifics = AndroidNotificationDetails(
'channel_id',
'Canal de Notificaciones',
channelDescription: 'Canal para notificaciones locales',
importance: Importance.max,
priority: Priority.high,
);
Para iOS, un ejemplo sería:
const IOSNotificationDetails iOSPlatformChannelSpecifics = IOSNotificationDetails(
presentAlert: true,
presentBadge: true,
presentSound: true,
);
Luego, combina ambos en un objeto NotificationDetails:
const NotificationDetails platformChannelSpecifics = NotificationDetails(
android: androidPlatformChannelSpecifics,
iOS: iOSPlatformChannelSpecifics,
);
Finalmente, utiliza el método show para enviar la notificación:
await flutterLocalNotificationsPlugin.show(
0,
'Notificación de Prueba',
'Esta es una notificación local en **Flutter para notificaciones**',
platformChannelSpecifics,
payload: 'data',
);
El método show acepta parámetros como el ID único de la notificación, el título, el cuerpo, los detalles de la notificación y un payload opcional que puede usarse para pasar datos adicionales.
Programar una Notificación Local
Programar una notificación local implica especificar una fecha y hora en la que se mostrará la notificación, ajustada a la zona horaria del dispositivo del usuario. El paquete flutter_local_notifications incluye soporte para la biblioteca timezone, que facilita la gestión de zonas horarias. Para usarla, importa las dependencias necesarias y inicializa la biblioteca de zonas horarias:
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:timezone/data/latest.dart' as tz;
import 'package:timezone/timezone.dart' as tz;
Future<void> init() async {
final AndroidInitializationSettings initializationSettingsAndroid = AndroidInitializationSettings('app_icon');
final IOSInitializationSettings initializationSettingsIOS = IOSInitializationSettings(
requestSoundPermission: false,
requestBadgePermission: false,
requestAlertPermission: false,
onDidReceiveLocalNotification: onDidReceiveLocalNotification,
);
final InitializationSettings initializationSettings = InitializationSettings(
android: initializationSettingsAndroid,
iOS: initializationSettingsIOS,
macOS: null,
);
tz.initializeTimeZones();
await flutterLocalNotificationsPlugin.initialize(
initializationSettings,
onSelectNotification: selectNotification,
);
}
Para programar una notificación, utiliza el método zonedSchedule:
await flutterLocalNotificationsPlugin.zonedSchedule(
1,
'Notificación Programada',
'Esta notificación aparecerá en **tres días desde ahora**',
tz.TZDateTime.now(tz.local).add(Duration(days: 3)),
const NotificationDetails(
android: AndroidNotificationDetails(
'channel_id',
'Canal de Notificaciones',
channelDescription: 'Canal para notificaciones locales',
),
),
androidAllowWhileIdle: true,
uiLocalNotificationDateInterpretation: UILocalNotificationDateInterpretation.absoluteTime,
);
En este ejemplo, la notificación se programa para mostrarse tres días después de la fecha actual. El parámetro androidAllowWhileIdle asegura que la notificación se envíe incluso si el dispositivo está en modo de bajo consumo, mientras que uiLocalNotificationDateInterpretation define cómo se interpreta la fecha en iOS.
Cancelar Notificaciones Locales
Cancelar notificaciones es un proceso sencillo que puede realizarse de dos maneras: cancelar una notificación específica o cancelar todas las notificaciones pendientes. Para cancelar una notificación específica, utiliza el ID único de la notificación:
await flutterLocalNotificationsPlugin.cancel(0);
Para cancelar todas las notificaciones pendientes, utiliza el método cancelAll:
await flutterLocalNotificationsPlugin.cancelAll();
Estos métodos son útiles para gestionar notificaciones obsoletas o para limpiar todas las notificaciones programadas cuando ya no son necesarias.
Casos de Uso Avanzados
El paquete flutter_local_notifications ofrece funcionalidades avanzadas que pueden adaptarse a necesidades específicas. Por ejemplo, puedes personalizar el estilo de las notificaciones en Android utilizando BigTextStyle o InboxStyle para mostrar más contenido. También puedes configurar notificaciones recurrentes especificando DateTimeComponents en el método zonedSchedule:
await flutterLocalNotificationsPlugin.zonedSchedule(
2,
'Notificación Recurrente',
'Se mostrará diariamente en **programar notificaciones locales**',
tz.TZDateTime.now(tz.local).add(Duration(days: 1)),
const NotificationDetails(
android: AndroidNotificationDetails(
'channel_id',
'Canal de Notificaciones',
channelDescription: 'Canal para notificaciones locales',
),
),
androidAllowWhileIdle: true,
uiLocalNotificationDateInterpretation: UILocalNotificationDateInterpretation.absoluteTime,
matchDateTimeComponents: DateTimeComponents.dayOfWeekAndTime,
);
En este caso, la notificación se repetirá diariamente a la misma hora. Además, puedes manejar interacciones avanzadas con notificaciones, como agregar botones de acción o personalizar el sonido de la notificación en iOS.
Solución de Problemas Comunes
Al trabajar con notificaciones locales, es posible que encuentres algunos problemas comunes. Por ejemplo, en Android, asegúrate de que el ícono especificado en AndroidInitializationSettings exista en el directorio correcto, ya que un ícono faltante puede evitar que las notificaciones se muestren. En iOS, verifica que los permisos estén correctamente configurados, especialmente si las notificaciones no aparecen cuando la aplicación está en primer plano. También es importante probar en dispositivos físicos, ya que los emuladores pueden no reflejar con precisión el comportamiento de las notificaciones.
Conclusiones
Implementar notificaciones locales en Flutter es una tarea accesible gracias al paquete flutter_local_notifications, que ofrece una solución robusta para Android e iOS. Desde la configuración inicial hasta la programación y cancelación de notificaciones, este tutorial ha cubierto los pasos esenciales para integrar esta funcionalidad en una aplicación móvil. Al aprovechar las capacidades del paquete, los desarrolladores pueden crear experiencias de usuario más dinámicas y atractivas, manteniendo a los usuarios informados sin necesidad de servidores externos. Explorar las funcionalidades avanzadas, como estilos personalizados o notificaciones recurrentes, puede llevar las aplicaciones al siguiente nivel, adaptándose a una amplia variedad de casos de uso.
