Comenzando con el paquete GetX en aplicaciones Flutter

Smart Interface Design Patterns, 10h video + UX training

Índice

¿Qué es GetX?
Características de GetX
Comenzando con GetX
Navegación en GetX
Barra de snacks
Diálogo
Conclusión

GetX es una solución extra liviana para la administración de estado, navegación y dependencias para aplicaciones Flutter. En este artículo, veremos sus beneficios, características y cómo comenzar a usarlo en aplicaciones Flutter.

Flutter es una de las formas más rápidas de crear aplicaciones nativas verdaderamente multiplataforma. Proporciona funciones que permiten al desarrollador crear una experiencia de interfaz de usuario verdaderamente hermosa para sus usuarios.

Sin embargo, la mayoría de las veces, para lograr cosas como navegar a las pantallas, administrar el estado y mostrar alertas, se necesitan muchos textos estándar. Estos textos estándar tienden a ralentizar la eficiencia del desarrollo de los desarrolladores que intentan crear funciones y cumplir con sus plazos.

Tomemos, por ejemplo, el texto estándar necesario para navegar a una pantalla en una aplicación Flutter. Supongamos que desea navegar a una pantalla llamada AboutScreen. tendrás que escribir:

Navigator.push( context, MaterialPageRoute(builder: (context) = AboutScreen()), );

Sería más eficiente y fácil para los desarrolladores hacer algo como:

Get.to(AboutScreen());

Cuando necesites volver a la página anterior en Flutter tendrás que escribir:

Navigator.pop(context);

Notarás que siempre dependemos de la propiedad del contexto para algo tan común como navegar entre pantallas. ¿Qué pasaría si en lugar de eso pudiéramos hacer algo como esto?

Get.back();

Los ejemplos anteriores son algunas de las formas en que se puede mejorar el desarrollo de aplicaciones en Flutter para que sea más intuitivo y eficiente con menos textos repetitivos. Si prefiere la simplicidad y la eficiencia en la creación de funciones e ideas, en Flutter, el paquete Get le interesará.

¿Qué es GetX?

Get o GetX es un marco rápido, estable y extraligero para crear aplicaciones Flutter.

GetX viene listo para usar con administración de estado de alto rendimiento, inyección de dependencia inteligente y administración de rutas de una manera simplista y práctica.

GetX tiene como objetivo minimizar los textos estándar y al mismo tiempo proporcionar una sintaxis simple e intuitiva para que los desarrolladores la utilicen mientras crean sus aplicaciones. En el centro de GetX se encuentran estos 3 principios:

Rendimiento
GetX se centra en el rendimiento de su aplicación implementando sus funciones para consumir la menor cantidad de recursos posible.
Productividad
GetX quiere que los desarrolladores utilicen sus funciones para ser productivos lo más rápido posible. Lo hace empleando una sintaxis y prácticas fáciles de recordar. Por ejemplo, en general, el desarrollador debería preocuparse por eliminar los controladores de la memoria, pero GetX listo para usar proporciona una administración inteligente que monitorea los controladores en su aplicación y los elimina cuando no se utilizan de forma predeterminada.
Organization
GetX permite desacoplar la Vista, la lógica de presentación, la lógica de negocios, la inyección de dependencia y la navegación en su aplicación Flutter. No necesita contexto para navegar entre rutas, por lo que no depende del árbol de widgets para la navegación. No necesita contexto para acceder a sus controladores/bloques a través de un archivo inheritedWidget, por lo que puede desacoplar completamente su lógica de presentación y lógica de negocios de su capa de vista. No necesita inyectar sus clases de Controladores/Modelos/Blocs en su árbol de widgets a través de múltiples proveedores; para esto, GetX usa su propia función de inyección de dependencia, desacoplando completamente la DI de su vista.

Características de GetX

GetX viene con un par de características que necesitarás en el desarrollo diario de tu aplicación en Flutter. Veámoslos:

Administración del Estado

Una de las características emblemáticas de GetX es su función intuitiva de gestión de estado. La gestión del estado en GetX se puede lograr con poco o ningún texto estándar.

Gestión de rutas

GetX proporciona API para navegar dentro de la aplicación Flutter. Esta API es simple y requiere menos código.

Gestión de dependencias

GetX proporciona una forma inteligente de administrar dependencias en su aplicación Flutter, como los controladores de vista. GetX eliminará de la memoria cualquier controlador que no se esté utilizando en ese momento. Esta fue una tarea que usted, como desarrollador, tendrá que hacer manualmente, pero GetX la hace automáticamente de forma inmediata.

Internacionalización

GetX proporciona i18n listo para usar, lo que le permite escribir aplicaciones con soporte para varios idiomas.

Validación

GetX proporciona métodos de validación para realizar la validación de entradas en sus aplicaciones Flutter. Esto es bastante conveniente ya que no necesitaría instalar un paquete de validación por separado.

Almacenamiento

GetX proporciona una clave-valor rápida, extra ligera y sincrónica en la memoria, que realiza una copia de seguridad de los datos en el disco en cada operación. Está escrito completamente en Dart y se integra fácilmente con el paquete principal de GetX.

Comenzando con GetX

Ahora que ha visto qué es GetX y las características y beneficios que ofrece, veamos cómo configurarlo en su aplicación. Crearemos una aplicación de demostración para ver la mayoría de las funciones que hemos mencionado en acción. Empecemos.

Cree una nueva aplicación Flutter

Comenzaremos creando una nueva aplicación Flutter a través de la CLI de Flutter. Supongo que su máquina ya está configurada para el desarrollo de aplicaciones con Flutter. Entonces ejecutamos:

flutter create getx_demo

Esto generará el código básico necesario para una aplicación Flutter. A continuación, abra el proyecto que acaba de crear en el editor de su elección (usaremos VS Code para este artículo). Luego ejecutaremos el proyecto para asegurarnos de que esté funcionando correctamente (asegúrese de tener un dispositivo conectado o un emulador/simulador ejecutándose).

Cuando se ejecute la aplicación, verá la aplicación de contador predeterminada que Flutter realiza por usted cuando crea una nueva aplicación Flutter. Lo que vamos a hacer es implementar la misma aplicación de contador pero con GetX para gestionar el estado de la aplicación (que es la variable de conteo).

Comenzaremos limpiando main.darty dejando solo este fragmento de código:

# main.dartimport 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}

A estas alturas nuestra aplicación ya estaría rota porque ya no hay ningún MyHomePagewidget. Arreglemos eso. Con GetX, no necesitamos widgets con estado y además nuestra interfaz de usuario se puede separar claramente de nuestra lógica empresarial. Entonces crearemos dos directorios dentro lib/. Estos directorios son:

`views/`	Para sujetar las pantallas en nuestra aplicación.
`controllers/`	Para contener todos los controladores de las pantallas de nuestra aplicación.

Creemos MyHomePageun widget dentro views/. El nombre del archivo será my_home_page.dart. Después de crearlo, agréguele el siguiente fragmento de código:

import 'package:flutter/material.dart';class MyHomePage extends StatelessWidget { final String title; MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: Widget[ Text( 'You have pushed the button this many times:', ), Text( '0', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: null, tooltip: 'Increment', child: Icon(Icons.add), ), ); }}

Ahora que tenemos el MyHomePagewidget, importémoslo en formato main.dart. Agregue la declaración de importación en la parte superior de main.dart a continuaciónimport 'package:flutter/material.dart';

import './views/my_home_page.dart';

Ahora su main.dartarchivo debería verse así:

import 'package:flutter/material.dart';import './views/my_home_page.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}

Cuando guarde su aplicación ahora, todos los errores deberían haberse solucionado y la aplicación se ejecutará. Pero notarás que cuando vuelvas a hacer clic en el botón, el contador no se actualizará. Si observa el views/my_home_page.dartcódigo, verá que simplemente estamos codificando 0el valor del widget de texto y pasándolo nullal onPressedcontrolador del botón. Incorporemos GetX a la mezcla para que la aplicación vuelva a funcionar.

Instalación de GetX

Dirígete a la página de instalación de GetX en pub.dev y verás la línea de código que debes copiar y colocar en tu pubspec.ymlarchivo para instalar GetX. Al momento de escribir este artículo, la versión actual de GetX es 3.23.1. Entonces copiaremos la línea:

get: ^3.23.1

Y luego péguelo en la dependenciessección de nuestro pubspec.ymlarchivo. Cuando guarde el archivo, get debería instalarse automáticamente. O puede ejecutarlo manualmente en su terminal.

flutter pub get

La sección de dependencias de su pubspec.ymlarchivo debería verse así:

dependencies: flutter: sdk: flutter get: ^3.23.1

GetxController

Hemos mencionado que GetX le permite separar la interfaz de usuario de su aplicación de la lógica. Para ello, proporciona una GetxControllerclase que puede heredar para crear clases de controlador para las vistas de su aplicación. Para nuestra aplicación actual, tenemos una vista, por lo que crearemos un controlador para esa vista. Dirígete al controllers/directorio y crea un archivo llamado my_home_page_controller.dart. Esto mantendrá el controlador para la MyHomePagevista. MX Motocross

Después de haber creado el archivo, primero importe el paquete GetX agregando esto en la parte superior del archivo:

import 'package:get/get.dart';

Luego creará una clase llamada MyHomePageControllerdentro de ella y extenderá la GetxControllerclase. Así es como debería verse el archivo:

import 'package:get/get.dart';class MyHomePageController extends GetxController {}

agreguemos el estado de conteo a la clase que hemos creado.

final count = 0;

En GetX, hacer que una variable sea observable, esto significa que cuando cambie, se notificará a otras partes de nuestra aplicación que dependen de ella. Para hacer esto simplemente necesitamos agregar .obsa la variable inicialización. Entonces , para nuestra countvariable anterior, agregaremos . Entonces la declaración anterior ahora se verá así:.obs0

final count = 0.obs;

Así es como se ve nuestro archivo controlador en este momento:

import 'package:get/get.dart';class MyHomePageController extends GetxController { final count = 0.obs;}

Para concluir, MyHomePageControllerimplementaremos el incrementmétodo. Este es el fragmento para hacer eso:

increment() = count.value++;

Notarás que necesitábamos agregar algo .valuea la variable de conteo para incrementarla. Hicimos esto porque agregar .obsa una variable la convierte en una variable observable y para obtener el valor de una variable observable, lo haces desde la valuepropiedad.

Entonces hemos terminado con el controlador. Ahora, cuando el valor del recuento cambie, cualquier parte de nuestra aplicación que lo utilice se actualizará automáticamente.

Ahora nos dirigiremos a nuestra vista y le informaremos sobre el controlador que acabamos de crear. Lo haremos creando una instancia de la clase de controlador utilizando la función de administración de dependencias GetX. Esto asegurará que nuestro controlador no estará en la memoria cuando ya no sea necesario.

Al views/my_home_page.dartimportar el paquete Get y también el controlador que creó así:

import 'package:get/get.dart';import '../controllers/my_home_page_controller.dart';

Luego, dentro de la MyHomePageclase crearemos una instancia de MyHomePageController:

final MyHomePageController controller = Get.put(MyHomePageController());

Ahora que tenemos una instancia de MyHomePageController, podemos usar la variable de estado así como el método. Entonces, comenzando con el estado, en GetX para marcar una parte de su interfaz de usuario para que se reconstruya cuando cambie una variable de estado, envolverá esa parte con el Obxwidget. GetX proporciona otras formas de hacer esto, pero este método es mucho más simple y limpio.

Para nuestra aplicación de conteo queremos que el widget de texto se actualice con el conteo actual. Así que envolveremos el widget de texto con Obxel widget de esta manera:

Obx(() = Text('0',style: Theme.of(context).textTheme.headline4,),)

A continuación, reemplazaremos la cadena estática 0con la variable de conteo de la MyHomePageControllersiguiente manera:

Obx(() = Text('${controller.count.value}',,style: Theme.of(context).textTheme.headline4,),)

Por último, llamaremos al método de incremento cuando se floatingActionButtonpresione así:

floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ),

Entonces, en general, nuestro MyHomePagearchivo de visualización debería verse así:

import 'package:flutter/material.dart';import 'package:get/get.dart';import '../controllers/my_home_page_controller.dart';class MyHomePage extends StatelessWidget { final String title; final MyHomePageController controller = Get.put(MyHomePageController()); MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: Widget[ Text( 'You have pushed the button this many times:', ), Obx( () = Text( '${controller.count.value}', style: Theme.of(context).textTheme.headline4, ), ) ], ), ), floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ), ); }}

Cuando guarda su aplicación o la vuelve a ejecutar, la aplicación de contador debería funcionar como lo hizo cuando creamos la aplicación por primera vez.

Creo que ha visto lo intuitiva que es la administración del estado con GetX, no tuvimos que escribir mucho texto repetitivo y esta simplicidad será más obvia a medida que su aplicación se vuelva compleja. También notará que nuestra vista no retiene ni mantiene ningún estado, por lo que puede ser un widget sin estado. El cerebro de la vista, a su vez, ahora es una clase de controlador que mantendrá el estado de la vista y los métodos.

Navegación en GetX

Hemos visto gestión estatal en GetX. Veamos ahora cómo GetX admite la navegación dentro de su aplicación. Para activar la función de navegación de GetX, solo necesita realizar un cambio main.dart: convertir el MaterialAppwidget en un GetMaterialAppwidget. Hagámoslo importando primero Obtener en la parte superior demain.dart

import 'package:get/get.dart';

Luego hacemos el cambio para MaterialAppque nuestro main.dartarchivo ahora se vea así:

import 'package:flutter/material.dart';import 'package:get/get.dart';import './views/my_home_page.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: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}

Ahora nuestra aplicación se ha configurado para admitir la navegación GetX. Para probar esto, crearemos otra vista en views/el directorio. Llamaremos a esto about_page.darty contendrá el siguiente código:

import 'package:flutter/material.dart';import 'package:get/get.dart';import '../controllers/my_home_page_controller.dart';class AboutPage extends StatelessWidget { final MyHomePageController controller = Get.put(MyHomePageController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('About GetX'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: Widget[ Padding( padding: const EdgeInsets.all(16.0), child: Text( 'GetX is an extra-light and powerful solution for Flutter. It combines high performance state management, intelligent dependency injection, and route management in a quick and practical way.', ), ), ], ), ), ); }}

Luego iremos MyHomePagey agregaremos un botón que, cuando lo presionemos, nos llevará al archivo AboutPage. Al igual que. El botón debe estar debajo del widget Obx. Aquí lo tienes:

 FlatButton(onPressed: () {}, child: Text('About GetX'))

También necesitaremos importar lo que AboutPagese encuentra en la parte superior del MyHomePagearchivo:

import './about_page.dart';

Para decirle a GetX que navegue hasta todo lo AboutPageque necesitamos es una línea de código que es:

Get.to(AboutPage());

Agreguemos eso a la onPresseddevolución de llamada del FlatButtonwidget así:

 FlatButton( onPressed: () { Get.to(AboutPage()); }, child: Text('About GetX'))

Cuando guarde su solicitud ahora, podrá navegar hasta el archivo AboutPage.

También puede optar por reemplazar la MyHomePagevista con AboutPagepara que el usuario no pueda volver a la página anterior presionando el botón Atrás del dispositivo. Esto es útil para pantallas como las de inicio de sesión. Para hacer esto, reemplace el contenido del onPressedcontrolador con el siguiente código:

 Get.off(AboutPage());

Esto abrirá la MyHomePagevista y la reemplazará con AboutPage.

Ahora que podemos navegar hasta AboutPage, creo que no será tan malo poder volver para MyHomePagehacer esto, agregaremos un botón AboutPagedespués del widget de relleno y en su onPressedcontrolador haremos una llamada para Get.back()navegar hacia atrás. hacia MyHomePage:

 FlatButton( onPressed: () { Get.back(); }, child: Text('Go Home'))

Barra de snacks

En Flutter, de manera convencional, para mostrar un Snackbar, deberás escribir algo como esto:

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

Puede observar que todavía dependemos de la contextpropiedad. Veamos cómo podemos lograr esto en GetX. Vaya a la MyHomePagevista y agregue otro FlatButtonwidget debajo del último botón que agregamos. Aquí está el fragmento del botón:

 FlatButton( onPressed: () { // TODO: Implement Snackbar }, child: Text('Show Snackbar'))

Mostremos el mensaje '¡Yay! Impresionante snackbar GetX'. Dentro de la función del controlador onPressed, agregue la siguiente línea de código:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar');

Ejecute su aplicación y cuando haga clic en el botón "Mostrar barra de bocadillos", verá una barra de bocadillos en la parte superior de su aplicación.

¿Ves cómo redujimos la cantidad de líneas necesarias para mostrar una barra de bocadillos en una aplicación Flutter? Hagamos un poco más de personalización en Snackbar; Hagamos que aparezca en la parte inferior de la aplicación. Cambie el código a esto:

Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM,);

Guarde y ejecute su aplicación y Snackbar aparecerá ahora en la parte inferior de la aplicación. ¿Qué tal si cambiamos el color de fondo del Snackbar ya que en este momento es transparente? Lo cambiaremos a un amberAccentcolor de la Colorsclase en Flutter. Actualice el código a esto:

Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent);

En general, el código del botón debería verse así:

 FlatButton( onPressed: () { Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar', snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent); }, child: Text('Show Snackbar'))

Diálogo

GetX proporciona un método simple para crear AlertDialog en Flutter. Veámoslo en acción. Crea otro botón debajo del anterior:

 FlatButton( onPressed: () { // TODO: Show alert dialog }, child: Text('Show AlertDialog'))

Llamemos a GetX para mostrar un cuadro de diálogo de alerta:

Get.defaultDialog();

Esto mostrará un cuadro de diálogo de alerta predeterminado que se puede descartar tocando fuera del cuadro de diálogo. Puede ver cómo en una línea de código tenemos un cuadro de diálogo de alerta funcional. Personalicémoslo un poco. Cambiemos el título y el mensaje:

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert');

Guarde y ejecute su aplicación y verá los cambios cuando presione el botón "Mostrar diálogo de alerta". Podemos agregar botones de confirmación y Cancelar así:

Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert', textConfirm: 'Okay', confirmTextColor: Colors.amberAccent, textCancel: 'Cancel');

Hay muchas formas de personalizar el cuadro de diálogo GetX y la API es bastante intuitiva y sencilla.

Conclusión

GetX se creó para mejorar la productividad de los desarrolladores de Flutter a medida que desarrollan funciones. En lugar de tener que buscar el texto estándar necesario para hacer cosas como administración del estado, administración de navegación y más, GetX proporciona una API intuitiva simple para lograr estas actividades sin sacrificar el rendimiento. Este artículo le presenta GetX y cómo comenzar a usarlo en sus aplicaciones Flutter.

Puedes encontrar la demostración aquí →

(ra, yk, il)Explora más en

Aplicaciones
Móvil
javascript

Tal vez te puede interesar:

Comenzando con el paquete GetX en aplicaciones Flutter

Comenzando con el paquete GetX en aplicaciones Flutter

¿Qué es GetX?Características de GetXComenzando con GetXNavegación en GetXBarra de snacksDiálogoConclusiónSmart Interface Design Patterns, 10h video + UX

programar

es

https://aprendeprogramando.es/static/images/programar-comenzando-con-el-paquete-getx-en-aplicaciones-flutter-1080-0.jpg

2024-12-03

Comenzando con el paquete GetX en aplicaciones Flutter — Comenzando con el paquete GetX en aplicaciones Flutter

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

Update cookies preferences