viernes 22 noviembre 2024

Cómo usar flutter_local_notifications en Flutter

El paquete flutter_local_notifications es una herramienta poderosa para gestionar notificaciones locales en aplicaciones Flutter. Permite mostrar notificaciones en dispositivos Android e iOS con opciones personalizables, programadas y recurrentes.

¿Qué es `flutter_local_notifications` y para qué sirve?

flutter_local_notifications es un paquete que facilita la implementación de notificaciones locales, es decir, mensajes que se muestran en el dispositivo sin necesidad de interacción con un servidor. Es útil para recordatorios, alarmas o actualizaciones dentro de la aplicación.

Instalación y configuración

Paso 1: Agregar el paquete

En el archivo pubspec.yaml de tu proyecto, añade:

dependencies:
  flutter_local_notifications: ^15.0.0

Ejecuta el comando para instalarlo:

flutter pub get

Paso 2: Configuración inicial

Android

Modifica el archivo AndroidManifest.xml para declarar los permisos necesarios:

<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

iOS

En el archivo Info.plist, añade:

<key>UIBackgroundModes</key>
<array>
  <string>fetch</string>
  <string>remote-notification</string>
</array>
<key>NSUserNotificationUsageDescription</key>
<string>Esta aplicación necesita enviar notificaciones.</string>

Uso básico de `flutter_local_notifications`

1. Importar el paquete:

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

2. Inicializar el plugin:

Configura una instancia de FlutterLocalNotificationsPlugin y define su inicialización.

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
       FlutterLocalNotificationsPlugin();

   Future<void> main() async {
     WidgetsFlutterBinding.ensureInitialized();

     const AndroidInitializationSettings initializationSettingsAndroid =
         AndroidInitializationSettings('@mipmap/ic_launcher');

     const InitializationSettings initializationSettings = InitializationSettings(
       android: initializationSettingsAndroid,
     );

     await flutterLocalNotificationsPlugin.initialize(initializationSettings);

     runApp(MyApp());
   }

3. Mostrar una notificación simple:

Future<void> showNotification() async {
     const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
       'channelId',
       'channelName',
       channelDescription: 'Descripción del canal',
       importance: Importance.max,
       priority: Priority.high,
     );

     const NotificationDetails notificationDetails = NotificationDetails(
       android: androidDetails,
     );

     await flutterLocalNotificationsPlugin.show(
       0, // ID único de la notificación
       'Título de la notificación',
       'Contenido de la notificación',
       notificationDetails,
     );
   }

Tabla de métodos importantes

Método	Descripción
`initialize()`	Inicializa el plugin con configuraciones específicas.
`show()`	Muestra una notificación inmediata.
`zonedSchedule()`	Programa una notificación para mostrarse en un momento específico.
`cancel()`	Cancela una notificación específica según su ID.
`cancelAll()`	Cancela todas las notificaciones activas.
`resolvePlatformSpecificImplementation<T>()`	Permite configuraciones específicas para Android o iOS.

Ejemplo avanzado: Notificación programada

Puedes programar una notificación para que se muestre más tarde utilizando zonedSchedule:

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> scheduleNotification() async {
  tz.initializeTimeZones();

  await flutterLocalNotificationsPlugin.zonedSchedule(
    1,
    'Notificación programada',
    'Esto es un recordatorio',
    tz.TZDateTime.now(tz.local).add(const Duration(seconds: 5)),
    const NotificationDetails(
      android: AndroidNotificationDetails(
        'scheduledChannelId',
        'scheduledChannelName',
        channelDescription: 'Canal para notificaciones programadas',
      ),
    ),
    androidAllowWhileIdle: true,
    uiLocalNotificationDateInterpretation:
        UILocalNotificationDateInterpretation.absoluteTime,
  );
}

Referencias oficiales

Para más opciones y configuraciones avanzadas, consulta la documentación oficial de flutter_local_notifications.

Etiquetas:

dart flutter

Creado por:

Jorge García

Fullstack developer