Flutter: creación de snackbar con la biblioteca GetX

En ocasiones, es muy útil mostrar el mensaje cuando se realiza una determinada acción en nuestra app. Supongamos que tenemos una lista de elementos y queremos eliminar cualquier elemento de la lista, luego de eliminar esos elementos, se debe mostrar un mensaje para informar al usuario que el elemento ha sido eliminado. Si queremos deshacer la acción, simplemente podemos hacer y mostrar la barra de bocadillos con algún mensaje. Generalmente, cuando creamos snackbar , entonces usa contexto para crear snackbar , y también la sintaxis no es tan fácil. Para superar este problema, podemos crear Snackbar usando GetX con solo un código simple sin usar ningún contexto. 

Siga los pasos a continuación para crear una barra de bocadillos usando GetX:

  • Cree una nueva aplicación flutter con el siguiente comando:
flutter create APP_NAME
  • Agregue el paquete get al archivo pubspec.yaml :

  • Importe el paquete get en el archivo main.dart :
import 'package:get/get.dart';
  • Para crear una aplicación, use GetMaterialApp en lugar de MaterialApp porque estamos usando la biblioteca GetX.
  • Después de la creación de la aplicación, cree un botón en el centro.
  • Después de eso, crea Snackbar usando Get.snackbar(título, mensaje);
  • Proporcione el título y el mensaje a la cafetería.
  • Podemos agregar algo de belleza adicional a esta barra de refrigerios, como el color de fondo, el color del texto, la duración de la barra de refrigerios, la posición de la barra de refrigerios, la propiedad onTap(), etc.

archivo main.dart :

Dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Scaffold demo',
      theme: ThemeData(
          
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks Scaffold'),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open Snackbar'),
          onPressed: (){
            Get.snackbar(
              "GeeksforGeeks",
               "Hello everyone",
               icon: Icon(Icons.person, color: Colors.white),
               snackPosition: SnackPosition.BOTTOM,
                 
               );
          },
        ),
      ),
    );
  }
}

Producción:

Get.snackbar(
              "GeeksforGeeks",
               "Hello everyone",
               icon: Icon(Icons.person, color: Colors.white),
               snackPosition: SnackPosition.BOTTOM,
               backgroundColor: Colors.green,
               );

Si ejecutamos nuestra aplicación con las propiedades anteriores, el resultado será:

Get.snackbar(
              "GeeksforGeeks",
               "Hello everyone",
               icon: Icon(Icons.person, color: Colors.white),
               snackPosition: SnackPosition.BOTTOM,
               backgroundColor: Colors.green,
               borderRadius: 20,
               margin: EdgeInsets.all(15),
               colorText: Colors.white,
               duration: Duration(seconds: 4),
               isDismissible: true,
               dismissDirection: SnackDismissDirection.HORIZONTAL,
               forwardAnimationCurve: Curves.easeOutBack,

               );

Si ejecutamos con las propiedades anteriores, la salida será:

Publicación traducida automáticamente

Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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