Mostrar un snackbar

Puede ser útil informar brevemente a tus usuarios cuando ocurren ciertas acciones. Por ejemplo, cuando un usuario descarta un mensaje de una lista deslizándolo, es posible que desees informarle que el mensaje ha sido eliminado. Incluso podrías querer darle la opción de deshacer la acción.

En Material Design, este es el trabajo de una SnackBar. Esta receta implementa una snackbar utilizando los siguientes pasos:

1. Crear un Scaffold.
2. Muestra una SnackBar.
3. Proporcionar una acción opcional.

Al crear apps que siguen las directrices de Material Design, dale a tus apps una estructura visual consistente. En este ejemplo, muestra la SnackBar en la parte inferior de la pantalla, sin solapar otros widgets importantes, como el FloatingActionButton.

El widget Scaffold, de la librería material, crea esta estructura visual y garantiza que los widgets importantes no se solapen.

return MaterialApp(
  title: 'SnackBar Demo',
  home: Scaffold(
    appBar: AppBar(title: const Text('SnackBar Demo')),
    body: const SnackBarPage(),
  ),
);

Con el Scaffold en su lugar, muestra una SnackBar. Primero, crea una SnackBar, luego muéstrala usando ScaffoldMessenger.

const snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
​
// Find the ScaffoldMessenger in the widget tree
// and use it to show a SnackBar.
ScaffoldMessenger.of(context).showSnackBar(snackBar);

Es posible que desees proporcionar una acción al usuario cuando se muestra la SnackBar. Por ejemplo, si el usuario elimina accidentalmente un mensaje, una action en la SnackBar podría permitir recuperar el mensaje.

Aquí tienes un ejemplo que proporciona una action adicional al widget SnackBar:

final snackBar = SnackBar(
  content: const Text('Yay! A SnackBar!'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // Some code to undo the change.
    },
  ),
);