Cómo crear un SnackBar en Flutter

En este pequeño tutorial vamos a ver como crear un SnackBar en Flutter y las propiedades o métodos más importantes que posee para su uso.

Un SnackBar es una alerta que se muestra al usuario y que se mantiene visible en pantalla durante un tiempo prefijado y automáticamente desaparece de la pantalla transcurrido este tiempo. 

Como norma general un SnackBar se muestra en la parte baja de la pantalla y puede venir acompañada de un mensaje informativo y de un botón, si es necesario, que dispara  un evento asociado.

Este tipo de mensajes son muy usados en ocasiones como por ejemplo cuando se elimina un elemento de una lista y deseamos mostrar un mensaje al usuario de que dicho borrado se ha efectuado y damos la opción de deshacer la acción y restaurar el elemento borrado. 

Esto existe por ejemplo en la app Gmail cuando borramos un correo de nuestra bandeja de entrada.

Ejemplo práctico de cómo crear un SnackBar en Flutter

Lo primero que hay que decir es que para poder mostrar un Snackbar  es necesario que nuestra vista tenga un componente concreto, un Scaffold.

Es necesario ya que para mostrar propiamente en pantalla el SnackBar en Flutter lo haremos utilizando un método estático de la clase Scaffold, of, y este método automáticamente posicionará al SnackBar en su lugar adecuado dentro del árbol de widgets teniendo en cuenta el resto de componentes que forman la vista.

Teniendo esto presente podríamos decir que para crear un Snackbar seguiremos los tres pasos siguientes:

  • Crear el Scaffold
  • Crear el Snackbar
  • Mostrar el SnackBar

Creamos una vista de ejemplo tal que así:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Ejemplo de Snackbar"),
      ),
      body: Center(
        child: Builder(
          builder: (context) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                RaisedButton(
                    child: Text("Mostrar SnackBar sin evento"),
                    onPressed: () =>
                        openSnackBarWithoutAction(context: context)),
                RaisedButton(
                    child: Text("Mostrar SnackBar con evento"),
                    onPressed: () => openSnackBarWithAction(context: context)),
                RaisedButton(
                    child: Text("Custom SnackBar "),
                    onPressed: () =>
                        _customShapeSnackBar(context: context))
              ],
            );
          },
        ),
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
........
}

Ahora vamos a crear dos métodos que crearán una instancia de SnackBar y la devolverán al método que las llama. La diferencia entre estas dos Snackbar es que una incorporará un botón de deshacer, y la otra no.

  void openSnackBarWithoutAction({@required BuildContext context}) {
    final snackBar = SnackBar(
      content: Text("Esto es una SnackBar sin evento asociado"),
      duration: Duration(seconds: 3),
    );

    _displaySnackBar(context: context, snackBar: snackBar);
  }
 void openSnackBarWithAction({@required BuildContext context}) {
    final snackBar = SnackBar(
      content: Text("Esto es una SnackBar con evento asociado"),
      duration: Duration(seconds: 3),
      action: SnackBarAction(
        label: "Deshacer",
        onPressed: () {
          print("Botón deshacer pulsado");
        },
      ),
    );

    _displaySnackBar(context: context, snackBar: snackBar);
  }

Como podemos ver, el código de creación de una SnackBar es sencillo y nos pide ciertos parámetros, los parámetros más usuales a incluir son:

  • content: Es de tipo Widget y será lo que se muestre al usuario como mensaje 
  • backgroundColor: Podemos setear un color de fondo a la alerta
  • elevation: una elevación en el eje z de la vista
  • margin, padding: No necesita explicación
  • shape: De tipo ShapeBorder con el cual podemos customizar el aspecto de la snackbar
  • duration: De tipo Duration, es el tiempo que esta alerta será visible al usuario
  • action: Si deseamos que se muestre un botón con una acción asociada, este es el parámetro que debemos de añadir. Es de tipo SnackBarAction

Y ya por último solo queda mostrar propiamente el SnackBar al usuario y para ellos utilizamos el método que comentábamos al inicio, Scaffold.of().

void _displaySnackBar(
      {@required BuildContext context, @required SnackBar snackBar}) {
    Scaffold.of(context).showSnackBar(snackBar);
  }

Como habréis visto en el código, para mostrar el Snackbar hay que pasar como parámetro un contexto. Este contexto debe de ser de un hijo de cualquier widget que esté bajo la jerarquía del Scaffold, de lo contrario te arrojará una bonita excepción tal que:

«Scaffold.of() called with a context that does not contain a Scaffold.»

En el ejemplo anterior he optado por crear un Builder desde el primer nivel jerárquico de vistas del body y utilizar el contexto que nos pasa este Builder por la lambda.

Otra forma de hacerlo seria utilizando una globalKey tal que así:

class HomePage extends StatelessWidget {

  final globalKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
     return Scaffold(
       key: globalKey,
       appBar: AppBar(
          title: Text('My Profile'),
       ),
       body:  RaisedButton(
          textColor: Colors.red,
          child: Text('Submit'),
          onPressed: (){
               final snackBar = SnackBar(content: Text('Profile saved'));
               globalKey.currentState.showSnackBar(snackBar);
          },
        ),
     );
   }
}

A continuación os dejo varios ejemplos de SnackBar con customización de algunos de sus parámetros.

void _customShapeSnackBar({@required BuildContext context}) {
    final snackBar = SnackBar(
      content: Text("Esto es una SnackBar con custom shape"),
      duration: Duration(seconds: 3),
      backgroundColor: Colors.green,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(5.00),
        ),
      ),
      behavior: SnackBarBehavior.floating,
    );

    _displaySnackBar(context: context, snackBar: snackBar);
  }

Como siempre, el código lo tenéis disponible en Github.

Comparte si lo consideras interesante
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.