⇨ Notificaciones en FLUTTER (en Español)

Cuando hacemos una aplicación para celulares, ya sea en Android, iOS o en este caso en Flutter, necesitamos que nuestros usuarios puedan recibir notificaciones. Ya saben, de esas que te avisan cuando te llega un nuevo mensaje o cuando tu Youtuber favorito sube un nuevo vídeo. Sería genial aprender hacer que nuestra aplicación también pueda hacerlo.

Eso vamos a aprender ha hacer hoy, aprenderemos a lanzar notificaciones locales con nuestra aplicación hecho en Flutter. Recuerda que para seguir este tutorial debes tener tener lista tu aplicación básica y debes conoces al menos en lo más básico la estructura de una aplicación hecha en Flutter.

Te advierto que el artículo es un poco largo y denso, así que no te desesperes, hazlo con calma y paso a paso, asegúrate de completar cada paso para que al final tengas los resultados correctos. Muy bien, empezamos:

Paquete Flutter Local Notifications

El primer paso es instalar este paquete para poder utilizar las clases y funciones de notificaciones locales, tanto en Android como en iOS. Para hacerlo vamos al archivo pubspec.yaml y escribimos lo siguiente:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  flutter_local_notifications: ^12.0.3

El siguiente paso es opcional y trata sobre otorgar permisos para que las notificaciones hagan que tu celular vibre y también poder programarlas para que se lancen automáticamente en cierto tiempo.

Si queremos dar estos permisos usamos el siguiente código en el archivo Manifest de nuestra aplicación:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutterappnoti">

    <!-- Permisos que puedes necestiar --->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
  
  <!-- Otros permisos interesantes --->
  <activity
    android:showWhenLocked="true"
    android:turnScreenOn="true">

Muy bien, una vez que hemos hecho esto, vamos a seguir con el siguiente paso que también es opcional, pero la verdad yo lo considero bastante necesario. Vamos a asignar un icono a nuestras notificaciones, así que vamos a guardar nuestro icono en la siguiente dirección:

Así que primero inicializaremos el complemento de notificación de flutter. Para eso tenemos que crear un servicio que se encargue de el trabajo duro relacionado con las notificaciones. Podemos crear una carpeta llamada «services» y dentro un archivo donde crear nuestro servicio. El código del servicio sería el siguiente:

import 'package:flutter_local_notifications/flutter_local_notifications.dart';


// Instancia del package
final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();


// Este es el método que inicializa el objeto de notificaciones
Future<void> initNotifications() async {
  const AndroidInitializationSettings initializationSettingsAndroid =
      AndroidInitializationSettings('app_icon');

  const DarwinInitializationSettings initializationSettingsIOS =
      DarwinInitializationSettings();

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

  await flutterLocalNotificationsPlugin.initialize(initializationSettings);
}


// Este es el método que muestra la notificación
Future<void> showNotificacion() async {
  const AndroidNotificationDetails androidNotificationDetails =
      AndroidNotificationDetails(
    'your channel id',
    'your channel name',
    importance: Importance.max,
    priority: Priority.high,
  );

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

  await flutterLocalNotificationsPlugin.show(
      1,
      'Titulo de notificacion',
      'Esta es una notificación de prueba para mostrar en el canal. Los quiero mucho.',
      notificationDetails);
}

Primero, tenemos que definir el ícono de la aplicación. En la imagen de arriba puede ver este «new AndroidInitializationSettings (» app_icon «)». Aquí app_icon es el nombre de la imagen que habíamos puesto dentro del directorio drawable. Si no lo puso, puede usar el icono predeterminado para eso, debe usar «mipmap / ic_launcher» en lugar de «app_icon».

Ya tenemos nuestro servicio, ahora tenermos que utilizarlo desde nuestra aplicación. Veamos el código para usar el servicio:

import 'package:flutter/material.dart';
import 'package:local_notifications/services/notification_services.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Aquí inicializamos la instancia de notificaciones
  await initNotifications();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: const PaginaPrincipal(),
      ),
    );
  }
}

class PaginaPrincipal extends StatelessWidget {
  const PaginaPrincipal({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
          onPressed: () {
            // Aquí debemos mostrar la notificación
            showNotificacion();
          },
          child: const Text('Mostrar la notificación')),
    );
  }
}

Espero que ahora tengas la idea de cómo puedes configurar un complemento de notificación local en Flutter.

Flutter Local Notification tiene muchas funciones y es poco difícil de configurar. Como le había mostrado la configuración básica, ahora puede pasar por el repositorio oficial de Github e implementar otras características también.