Notificaciones locales en Flutter

2025-04-03T21:00:00-05:00 | 5 minutos de lectura | Actualizado en 2025-04-04T06:41:38-05:00

jaimetellezb
Notificaciones locales en Flutter

🚀 ¡Notificaciones locales en Flutter!.

Tabla de Contenido

Información sobre flutter_local_notifications

Este paquete como su nombre lo indica, nos permite enviar notificaciones locales en Flutter. Son notificaciones de diferentes características:

  • Informativas de solo texto.
  • Con acciones, que permitan abrir una parte de la app.
  • Programables, que se envíen cada cierto tiempo.
  • Entre otras opciones.

Es importante siempre leer la documentación oficial ya que allí nombra algunas limitaciones que podemos tener con este paquete, configuraciones, ejemplos y muchas cosas más.

Instalación

Para realizar la instalación del paquete es bastante sencillo y tenemos algunas alternativas:

  • Con Flutter:
flutter pub add flutter_local_notifications
  • Con Dart:
dart pub add flutter_local_notifications
  • Agregar manualmente en el pubspec.yaml:
dependencies:
  flutter_local_notifications: ^19.0.0

Al final con las 2 primeras opciones, terminan agregando el código como se hace en la 3ra opción. Luego de eso, debemos ejecutar el comando flutter pub get para descargar y actualizar el paquete. Algunos IDEs como vscode, pueden realizar esta ejecución del comando de forma automática, si está configurado.

Si se realiza por alguna de las 2 primeras opciones el resultado sería similar a este:

~/development/apps/flutter_notifications_app (master) $ dart pub add flutter_local_notifications

Configuraciones

Primero que todo, debemos arrancar por las configuraciones necesarias para que funcione en nuestro dispositivo, sea Android o iOS. También es posible utilizarlo para Flutter web (macOS y Linux), pero nos vamos a enfocar solo en móvil.

Versiones utilizadas

  • Flutter: 3.29.2
  • Dart: 3.7.2

Android

En la documentación nos indican que pueden haber diferencias en la configuración, dependiendo de la versión que estemos utilizando, por lo cual recomiendan que utilicemos la última versión. Tener en cuenta que para este caso vamos a estar utilizando la última hasta la fecha que es la 19.0.0.

Configuración de Gradle plugin (AGP)
  • El paquete utiliza Android Gradle Plugin (AGP) en su versión 7.3.1, por lo cual debemos tener como mínimo esa versión. En la versión 3.29.2 de Flutter, para configurar AGP, debe modificarse en el archivo gradle/wrapper/gradle-wrapper.properties que actualmente trae la versión 8.10.2 en la propiedad distributionUrl. La cual debería ser suficiente para que funcione el paquete flutter_local_notifications.
distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
  • El paquete requiere que el compileSdk sea mínimo 35, el cual podemos configurar en el archivo android/app/build.gradle.kts. Para realizar este cambio sería simplemente cambiar de compileSdk = flutter.compileSdkVersion a:
android {
    compileSdk 35
}

  • Configuración del archivo android/app/src/main/AndroidManifest.xml, para agregar los permisos necesarios según las notificaciones que vamos a utilizar, para más detalle ver aquí . En este caso, vamos a utilizar una notificación simple, solo con texto. No es necesario realizar cambios en este archivo.

  • Ya que en el paquete se pueden realizar notificaciones programadas, se debe configurar desugaring para soportar versiones anteriores a la 10 de Android. Para lograr esta configuración, debemos realizar un par de cambios en el archivo android/app/src/main/build.gradle.kts:

    • En la propiedad android -> compileOptions agregar la bandera isCoreLibraryDesugaringEnabled = true.
    • A nivel de android, agregar una nueva propiedad dependencies con siguiente contenido:
      dependencies {
      coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.1.4")
  }

    Al final debería quedar algo similar a esto:

android {
    defaultConfig {
        multiDexEnabled = true
    }

    compileOptions {
        // Flag to enable support for the new language APIs
        isCoreLibraryDesugaringEnabled = true
        // Sets Java compatibility to Java 11
        sourceCompatibility = JavaVersion.VERSION_11
        targetCompatibility = JavaVersion.VERSION_11
    }
  
    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_11.toString()
    }
}

dependencies {
    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.1.4")
}

Con estas configuraciones, debería ser suficiente para poder utilizar las notificaciones simples del paquete en Android.

iOS

  • Para las notificaciones en general, basta simplemente con realizar la siguiente configuración, agregando unas líneas de código dentro del método application en el archivo AppDelegate.swift, el cual se encuentra dentro de la carpeta ios/Runner.
if #available(iOS 10.0, *) {
  UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
}

Inicialización y Uso

Para poder usar el paquete, primero debemos inicializarlo y esto lo conseguimos de la siguiente manera, en el método main antes de runApp, es lo recomendado:

  • Para Android:

Aquí es importante tener en cuenta que el ícono app_icon debe estar agregado en la carpeta android/app/src/main/res/drawable para que funcione correctamente en Android.

import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

void main() async {
    WidgetsFlutterBinding.ensureInitialized();

    FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
        FlutterLocalNotificationsPlugin();

    // initialise the plugin. app_icon needs to be a added as a drawable resource to the Android head project
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('app_icon');

    final InitializationSettings initializationSettings = InitializationSettings(
        android: initializationSettingsAndroid);
    await flutterLocalNotificationsPlugin.initialize(initializationSettings,
        onDidReceiveNotificationResponse:(details) {
        print('Response: $details');
        },);
    runApp(const MyApp());
}
  • Para iOS:
import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

void main() async {
    WidgetsFlutterBinding.ensureInitialized();

    FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
        FlutterLocalNotificationsPlugin();

    final DarwinInitializationSettings initializationSettingsDarwin =
        DarwinInitializationSettings();

    final InitializationSettings initializationSettings = InitializationSettings(
        iOS: initializationSettingsDarwin);

    await flutterLocalNotificationsPlugin.initialize(initializationSettings,
        onDidReceiveNotificationResponse:(details) {
        print('Response: $details');
        },);
    runApp(const MyApp());
}
  • Para Android y iOS:
import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

void main() async {
    WidgetsFlutterBinding.ensureInitialized();

    FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
        FlutterLocalNotificationsPlugin();

    // initialise the plugin. app_icon needs to be a added as a drawable resource to the Android head project
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('app_icon');
    final DarwinInitializationSettings initializationSettingsDarwin =
        DarwinInitializationSettings();

    final InitializationSettings initializationSettings = InitializationSettings(
        android: initializationSettingsAndroid,
        iOS: initializationSettingsDarwin);
    await flutterLocalNotificationsPlugin.initialize(initializationSettings,
        onDidReceiveNotificationResponse:(details) {
        print('Response: $details');
        },);
    runApp(const MyApp());
}

Solicitar permisos para notificaciones

Es importante solicitar permisos al usuario para que active los permisos de notificaciones para la app Flutter.

Esto lo logramos de la siguiente manera:

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
      FlutterLocalNotificationsPlugin();

await flutterLocalNotificationsPlugin
        .resolvePlatformSpecificImplementation<
          AndroidFlutterLocalNotificationsPlugin
        >()
        ?.requestNotificationsPermission();

await flutterLocalNotificationsPlugin
    .resolvePlatformSpecificImplementation<
        IOSFlutterLocalNotificationsPlugin
    >()
    ?.requestPermissions(alert: true, badge: true, sound: true);

Notificaciones simples

Las notificaciones más sencillas, son las que tienen solo texto, sirven para mostrar información de recordatorio al usuario.

const AndroidNotificationDetails androidDetails =
    AndroidNotificationDetails(
        'channel_id',
        'Notificaciones simples',
        channelDescription: 'Canal para notificaciones simples',
        importance: Importance.max,
        priority: Priority.high,
    );

const DarwinNotificationDetails iosDetails = DarwinNotificationDetails(
    presentAlert: true,
    presentBadge: true,
    presentSound: true,
);

const NotificationDetails platformDetails = NotificationDetails(
    android: androidDetails,
    iOS: iosDetails,
);

await flutterLocalNotificationsPlugin.show(
    0,
    'Este es el título!',
    'Este es el contenido de la notificación simple.',
    platformDetails,
    payload: 'simple_notification',
);

Con esto sería suficiente para poder mostrar notificaciones simples tanto para Android como para iOS.

Ejemplo

Android iOS
android ios

Ejemplo completo en GitHub

Conclusión

En conclusión, este es un paquete muy completo para usar notificaciones en Flutter, hay más que se puede utilizar como notificaciones con acciones para viajar a una vista específica de nuestra app y notificaciones programadas, por dar un par de ejemplos más. Así que pueden explorar mucho más al respecto del paquete en la documentación.

¡Gracias por leer!

https://buymeacoffee.com/jaimetellezb

Referencias

Página siguiente Flutter: Material — Widget AppBar

© 2022 - 2025 jaimetellezb - Compartir guías y tutoriales de programación.

🌱 Powered by Hugo with theme Dream.

Sobre mí

alt

Ingeniero de software

Hola, bienvenidos a mi blog sobre guías y tutoriales de programación.

Aquí podrás encontrar guías y tutoriales sobre algunos temas de tecnología en general. La idea es poder ayudar a que ciertas cosas como configuraciones de nuevas herramientas sean más fáciles de abordar y utilizar. También pequeños proyectos donde se usen diferentes tecnologías como ejemplo.

Enlaces sociales