Saltar al contenido

Notificaciones con Flutter en Español

febrero 17, 2020

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:

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">

    <!-- The INTERNET permission is required for development. Specifically,
         flutter needs it to communicate with the running application
         to allow setting breakpoints, to provide hot reload, etc.
    -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

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:

También podemos usar un sonido personalizado para que nuestra notificación se distinga de las demás. Muchas aplicaciones lo usan, por ejemplo el conocido «pop» de la aplicación de Messenger que es reconocida por todos y todas. Para hacer eso, vamos a guardar el sonido en formato MP3 en la siguiente dirección:





Así que primero inicializaremos el complemento de notificación de flutter. Es bueno inicializarlo dentro de initState (), de modo que tan pronto como nuestra aplicación se inicie, lo inicialicemos y podamos usarlo en cualquier momento.

En el momento de la inicialización tenemos que tener DOS cosas en mente.

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».

En la segunda última línea «selectNotification: onSelectNotification». Esta línea es responsable de la acción que sucederá cuando hagamos clic en la Notificación. Este método debe devolver Future y este método debe tener un parámetro de cadena que será la carga útil.

A continuación puede ver el método onSelectNotification donde estoy mostrando un diálogo. Puede abrir Nueva página y también puede mostrar la Notificación detallada.

Payload: los mensajes de notificación pueden contener datos opcionales que se payload. Son, por así decirlo, la información que va a contener la notificación, el título, el texto, etc. Es muy tedioso explicarlo así en texto, sé que lo vas a entender mejor si te hago un ejemplo en código:

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

void main() {
  runApp(
    new MaterialApp(home: new MyApp()),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() =&gt; new _MyAppState();
}

class _MyAppState extends State&lt;MyApp&gt; {
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

  @override
  initState() {
    super.initState();
    // initialise the plugin. app_icon needs to be a added as a drawable resource to the Android head project   
     // If you have skipped STEP 3 then change app_icon to @mipmap/ic_launcher
    var initializationSettingsAndroid =
        new AndroidInitializationSettings('app_icon'); 
    var initializationSettingsIOS = new IOSInitializationSettings();
    var initializationSettings = new InitializationSettings(
        initializationSettingsAndroid, initializationSettingsIOS);
    flutterLocalNotificationsPlugin = new FlutterLocalNotificationsPlugin();
    flutterLocalNotificationsPlugin.initialize(initializationSettings,
        selectNotification: onSelectNotification);
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Plugin example app'),
        ),
        body: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: &lt;Widget&gt;[
              new RaisedButton(
                onPressed: _showNotificationWithSound,
                child: new Text('Show Notification With Sound'),
              ),
              new SizedBox(
                height: 30.0,
              ),
              new RaisedButton(
                onPressed: _showNotificationWithoutSound,
                child: new Text('Show Notification Without Sound'),
              ),
              new SizedBox(
                height: 30.0,
              ),
              new RaisedButton(
                onPressed: _showNotificationWithDefaultSound,
                child: new Text('Show Notification With Default Sound'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future onSelectNotification(String payload) async {
    showDialog(
      context: context,
      builder: (_) {
        return new AlertDialog(
          title: Text("PayLoad"),
          content: Text("Payload : $payload"),
        );
      },
    );
  }
}

Esta es la configuración básica donde tengo 3 botones y en el código anterior puede ver que, según cada botón, hay diferentes métodos:

Button 1 : _showNotificationWithSound
Button 2 : 
_showNotificationWithoutSound
Button 3 : 
_showNotificationWithDefaultSound

Pero no hay nada dentro de todo el método. Escribiré eso en el próximo paso:

// If you have skipped step 4 then Method 1 is not for you

// Method 1
Future _showNotificationWithSound() async {
  var androidPlatformChannelSpecifics = new AndroidNotificationDetails(
      'your channel id', 'your channel name', 'your channel description',
      sound: 'slow_spring_board',
      importance: Importance.Max,
      priority: Priority.High);
  var iOSPlatformChannelSpecifics =
      new IOSNotificationDetails(sound: "slow_spring_board.aiff");
  var platformChannelSpecifics = new NotificationDetails(
      androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
  await flutterLocalNotificationsPlugin.show(
    0,
    'New Post',
    'How to Show Notification in Flutter',
    platformChannelSpecifics,
    payload: 'Custom_Sound',
  );
}
// Method 2
Future _showNotificationWithDefaultSound() async {
  var androidPlatformChannelSpecifics = new AndroidNotificationDetails(
      'your channel id', 'your channel name', 'your channel description',
      importance: Importance.Max, priority: Priority.High);
  var iOSPlatformChannelSpecifics = new IOSNotificationDetails();
  var platformChannelSpecifics = new NotificationDetails(
      androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
  await flutterLocalNotificationsPlugin.show(
    0,
    'New Post',
    'How to Show Notification in Flutter',
    platformChannelSpecifics,
    payload: 'Default_Sound',
  );
}
// Method 3
Future _showNotificationWithoutSound() async {
  var androidPlatformChannelSpecifics = new AndroidNotificationDetails(
      'your channel id', 'your channel name', 'your channel description',
      playSound: false, importance: Importance.Max, priority: Priority.High);
  var iOSPlatformChannelSpecifics =
      new IOSNotificationDetails(presentSound: false);
  var platformChannelSpecifics = new NotificationDetails(
      androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
  await flutterLocalNotificationsPlugin.show(
    0,
    'New Post',
    'How to Show Notification in Flutter',
    platformChannelSpecifics,
    payload: 'No_Sound',
  );
}

Espero que 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.


Fuente: Artículo de Medium