Aleteo – Snackbar

Snackbar es un widget proporcionado por flutter para mostrar un mensaje emergente descartable en su aplicación. Se utiliza para mostrar a los usuarios si se realizan determinadas acciones en nuestras aplicaciones. Por ejemplo, si el proceso de inicio de sesión del usuario falla por algún motivo, para informar al usuario que intente nuevamente, podemos usar snackbar. Aparece en la pantalla y también puede realizar operaciones como deshacer la acción que ha tenido lugar. Snackbar muestra el mensaje informativo durante un período de tiempo muy corto y cuando se completa el tiempo desaparece por sí solo. El tiempo recomendado en pantalla para un snack bar es de 5 a 10 s. Se proporciona en el paquete de materiales de las bibliotecas flutter. Debe importar «paquete: aleteo/material.dart» para usar una barra de bocadillos.

Constructores:

SnackBar({Key key, 
@required Widget content, 
Color backgroundColor, 
double elevation, 
EdgeInsetsGeometry margin, 
EdgeInsetsGeometry padding, 
double width, 
ShapeBorder shape, 
SnackBarBehavior behavior, 
SnackBarAction action, 
Duration duration: _snackBarDisplayDuration, 
Animation<double> animation, 
VoidCallback onVisible})

Propiedades:

1. action: Acción a realizar en base a snackbar.
2. animación: Animación de entrada y salida del snackbar.
3. backgroundcolor: color de fondo de la barra de bocadillos 
4. comportamiento: Comportamiento y ubicación de la cafetería.
5. contenido: Contenido de snackbar.
6. duración: la cantidad de tiempo que se debe mostrar la barra de bocadillos.
7. elevación: eleva el snackbar aumentando la sombra.
8. margen: Espacio alrededor de snackbar.
9. onVisible: Llamado la primera vez que el snackbar es visible dentro de un andamio.
10. relleno: espacio alrededor del contenido dentro de snackbar.
11. forma: Forma de snackbar.
12. ancho: Ancho del snackbar.

Pasos para crear un Snackbar

1. Cree un widget de andamio: se muestra una barra de refrigerios dentro de un widget de andamio que se usa para crear la pantalla visible completa de su aplicación móvil. Proporciona la barra de aplicaciones, el título y otras propiedades del cuerpo que, en conjunto, forman el árbol de widgets.

 Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
      ),

    );

2. Cree una clase de snackbar: cree una clase de widget sin estado que represente su snackbar y las acciones que está realizando. Dentro de esta clase, cree un botón que puede estar elevado, levantado o plano, y asígnele un aspecto, por ejemplo: color, texto, efecto de desplazamiento, etc. Cree una propiedad final y devuélvale Snackbar, que contendrá todas las acciones que se van a realizar cuando se haga clic en el botón. 

class snackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.green)),
        onPressed: () {
          const snackdemo = SnackBar(
            content: Text('Hii this is GFG\'s SnackBar'),
            backgroundColor: Colors.green,
            elevation: 10,
            behavior: SnackBarBehavior.floating,
            margin: EdgeInsets.all(5),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackdemo);

          // 'showSnackBar' is deprecated and shouldn't be used.
          //Use ScaffoldMessenger.showSnackBar.
          // Scaffold.of(context).showSnackBar(snackdemo);
        },
        child: const Text('Click Here'),
      ),

      // RaisedButton is deprecated and shouldn't be used.
      
      // child: RaisedButton(
      //     child: const Text('Click Here!'),
      //     color: Colors.green,
      //     onPressed: () {
      //       const snackdemo = SnackBar(
      //         content: Text('Hii this is GFG\'s SnackBar'),
      //         backgroundColor: Colors.green,
      //         elevation: 10,
      //         behavior: SnackBarBehavior.floating,
      //         margin: EdgeInsets.all(5),
      //       );
      //       Scaffold.of(context).showSnackBar(snackdemo);
      //     }),,
    );
  }
}

3. Muestre la barra de refrigerios: use la clase Scaffold Messenger para mostrar la información contenida en su barra de refrigerios. Utiliza un contexto proporcionado por el argumento BuilContext. Aquí, snackdemo es la propiedad final que contiene el snackbar.

  Scaffold.of(context).showSnackBar(snackdemo);

4. Llame a su clase: finalmente, dentro del cuerpo del andamio, llame a la clase sin estado que creó para su snackbar.

Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
      ),
      body: snackBarDemo(),
    );
  }
}

Implementación:

Archivo: main.dart

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  static const header = 'GeeksforGeeks';
 
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: header,
      home: MyHomePage(title: header),
    );
  }
}
 
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  final String title;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
      ),
      body: const snackBarDemo(),
    );
  }
}
 
// ignore: camel_case_types
class snackBarDemo extends StatelessWidget {
  const snackBarDemo({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.green)),
        onPressed: () {
          const snackdemo = SnackBar(
            content: Text('Hii this is GFG\'s SnackBar'),
            backgroundColor: Colors.green,
            elevation: 10,
            behavior: SnackBarBehavior.floating,
            margin: EdgeInsets.all(5),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackdemo);
 
          // 'showSnackBar' is deprecated and shouldn't be used.
          //Use ScaffoldMessenger.showSnackBar.
          // Scaffold.of(context).showSnackBar(snackdemo);
        },
        child: const Text('Click Here'),
      ),
 
      // RaisedButton is deprecated and shouldn't be used.
       
      // child: RaisedButton(
      //     child: const Text('Click Here!'),
      //     color: Colors.green,
      //     onPressed: () {
      //       const snackdemo = SnackBar(
      //         content: Text('Hii this is GFG\'s SnackBar'),
      //         backgroundColor: Colors.green,
      //         elevation: 10,
      //         behavior: SnackBarBehavior.floating,
      //         margin: EdgeInsets.all(5),
      //       );
      //       Scaffold.of(context).showSnackBar(snackdemo);
      //     }),
    );
  }
}

Producción: