• Saltar a la navegación principal
  • Saltar al contenido principal

CARLOSZR.COM

Mi blog personal, CarlosZR

  • Blog
  • Contacto
  • Curso de SwiftUI por CarlosZR

Learn Flutter / 14/06/2021

Flutter Snackbar

We are going to learn how create snackbars in Flutter. We use snackbars to notifyier users something within an app.

Lets go to see the most simple SnackBar. First, we build MyApp class. The build method returns a MaterialApp class. The home of MaterialApp is a Scaffold, wich body is SnackBarPage class.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Snackbar',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter SnackBar'),
        ),
        body: SnackbarPage(),
      ),
    );
  }
}

The class SnackBarPage has our SnackBar. I have developed two versions. The first is the most simple, it comes from down to up. It don´t has margin. If we want it has margin, it need SnackBarBehavior.floating.

SnackBarBehavior.floating.
class SnackbarPage extends StatelessWidget {
  const SnackbarPage();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              final snackBar = SnackBar(
                content: const Text(
                  'Hi, this is a SnackBar!',
                  // style: TextStyle(color: Colors.black),
                ),
                action: SnackBarAction(
                  label: 'Close',
                  onPressed: () {
                    // No code, only warning.
                  },
                ),
                backgroundColor: Colors.grey,
                duration: Duration(seconds: 1),
                behavior: SnackBarBehavior.floating,
                margin: EdgeInsets.only(left: 20, right: 20, bottom: 50),
                elevation: 5,
              );

              // Find the ScaffoldMessenger in the widget tree
              // and use it to show a SnackBar.
              ScaffoldMessenger.of(context).showSnackBar(snackBar);
            },
            child: const Text('Show SnackBar: behaviour, margin'),
          ),
          ElevatedButton(
            onPressed: () {
              final snackBar = SnackBar(
                content: const Text(
                  'Hi, this is a SnackBar!',
                  // style: TextStyle(color: Colors.black),
                ),
                action: SnackBarAction(
                  label: 'Close',
                  onPressed: () {
                    // No code, only warning.
                  },
                ),
                backgroundColor: Colors.grey,
                duration: Duration(seconds: 1),
                elevation: 5,
              );

              // Find the ScaffoldMessenger in the widget tree
              // and use it to show a SnackBar.
              ScaffoldMessenger.of(context).showSnackBar(snackBar);
            },
            child: const Text('Show SnackBar'),
          ),
        ],
      ),
    );
  }
}

Here we have put two buttons that show the different types of SnackBar that we can create using or not the margin and behavior properties.

In the video you can see the operation of each one of them.

We can decide how long our SnackBar is shown by modifying the duration property.

Publicado en: Learn Flutter Etiquetado como: learn flutter

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

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

Carlos ZR

  • Sígueme en Twitter
  • Política de Cookies
  • Política de Privacidad
  • Aviso Legal

Utilizamos cookies para ofrecerte la mejor experiencia en nuestra web.

Puedes aprender más sobre qué cookies utilizamos o desactivarlas en los ajustes.

CARLOSZR.COM
Powered by  GDPR Cookie Compliance
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.