Flutter: ¿Cómo mostrar mensajes atractivos?

Crear aplicaciones atractivas debe ser un pilar importante que cada desarrollador debe tener en cuenta por la gran competencia que existe en este campo, además de eso, debemos reutilizar siempre que podamos, paquetes o códigos de terceros para agilizar la entrega de las aplicaciones. Hoy quiero compartir con ustedes, un paquete para mostrar mensajes atractivos: flushbar.

Importando la dependencia

Para mostrar mensajes a través de “flushbar” es necesario que lo instalemos de internet. Para hacer esto, primeramente buscamos la versión más reciente en el sitio de dependencias de fluter pub.dev (en el momento de este artículo se trabajó con la versión más reciente ^1.5.0) y en la pestaña “Installing” nos informa la versión a utilizar. Lo copiamos y lo pegamos en el archivo de configuración del proyecto pubspec.yaml en la sección de las dependencias de producción.

dependencies:
  flutter:
    sdk: flutter
  flushbar: ^1.5.0

Deben fijarse que se adiciona a un nivel con respecto a “dependencies” como exige el formato de archivo yaml.

Una vez guardado el archivo, pueden descargar la dependencia presionando el enlace “Pug get” desde el mismo editor de Android Studio (este y otros enlaces relacionados con el manejo de dependencias están justamente en una barra arriba cuando abren el archivo de configuración pubspec.yaml alineados a la derecha), lo pueden hacer desde la terminal y estando en la ruta del proyecto con el comando “flutter pub get” o simplemente correr el proyecto y si no está la dependencia, como primera acción la descargará.

Flushbar

Este paquete proporciona un widget que es muy sencillo de utilizar, simplemente debemos invocarlo donde lo necesitemos y hará el trabajo por nosotros, este es un ejemplo y comentemos algunas de sus propiedades:

Flushbar(
      title: 'Título aquí',
      message: 'Mensaje aquí',
      icon: Icon(
        Icons.info_outline,
        size: 28,
        color: Colors.blue.shade300,
      ),
      leftBarIndicatorColor: Colors.blue.shade300,
      duration: Duration(seconds: 5),
    )..show(context);

• duration: Tiempo que va a estar mostrándose el mensaje.
• title: Título del mensaje.
• message: Contenido del mensaje.
• icon: Ícono del mensaje, relacionado con el mismo.

También contiene otras propiedades para personalizar el estilo.

Personalizando su utilización

Hasta el punto anterior es todo sobre este paquete, pero quiero compartir con ustedes una forma en que pueden utilizar este widget con los mensajes más comunes que usamos para brindarles información a los usuarios, o sea, mensajes informativos, de advertencias y de errores.

Veamos el archivo message.dart

import 'package:flushbar/flushbar.dart';
import 'package:flutter/material.dart';
class MessageWidget  {
  static void info(BuildContext context, String message, int seconds) {
    Flushbar(
      title: 'Información',
      message: message,
      icon: Icon(
        Icons.info_outline,
        size: 28,
        color: Colors.blue.shade300,
      ),
      leftBarIndicatorColor: Colors.blue.shade300,
      duration: Duration(seconds: seconds),
    )..show(context);
  }
  static void warn(BuildContext context, String message, int seconds) {
    Flushbar(
      title: 'Advertencia',
      message: message,
      icon: Icon(
        Icons.warning,
        size: 28,
        color: Colors.deepOrangeAccent,
      ),
      leftBarIndicatorColor: Colors.deepOrangeAccent,
      duration: Duration(seconds: seconds),
    )..show(context);
  }
  static void error(BuildContext context, String message, int seconds) {
    Flushbar(
      title: 'Error',
      message: message,
      icon: Icon(
        Icons.error,
        size: 28,
        color: Colors.red,
      ),
      leftBarIndicatorColor: Colors.red,
      duration: Duration(seconds: seconds),
    )..show(context);
  }
}

Esta clase aún podemos mejorarla más para evitar codigo repetivo :).

Esta es una clase simple que nos da la posibilidad de mostrar tres tipos de mensajes utilizando este paquete. Veamos como los utilizo:

Archivo home.dart

import 'package:flutter/material.dart';
import 'package:flutter_flushbar/ui/widgets/custom_buttom.dart';
import 'package:flutter_flushbar/ui/widgets/message.dart';
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomButtom('INFO', () => {MessageWidget.info(context, "Esto es un mensaje de información de 3 segundos", 3)} ),
            CustomButtom('WARN', () => {MessageWidget.warn(context, "Esto es un mensaje de advertencia de 5 segundos", 5)} ),
            CustomButtom('ERROR', () => {MessageWidget.error(context, "Esto es un mensaje de error de 7 segundos", 7)} ),
          ],
        ),
      ),
    );
  }
}

Es muy sencillo de utilizarlo. Aquí modifiqué un poco el widget de mostrar un botón del artículo anterior, ahora pasando una función anónima para que me la ejecute, sobre esto hablaremos en próximos artículos, aquí les dejo unas fotos y como siempre puede ver el código en el siguiente enlace: github.