Flutter – Biblioteca de administración de estado de GetX

GetX es una biblioteca de administración de estado rápida, estable y liviana en flutter. Hay tantas bibliotecas de administración de estado en flutter como MobX, BLoC, Redux, Provider, etc. GetX también es un micro marco poderoso y al usarlo, podemos administrar estados, hacer enrutamiento y realizar inyección de dependencia.

Hay tres principios de GetX:

1. Rendimiento : en comparación con otras bibliotecas de administración de estado, GetX es mejor porque consume recursos mínimos y proporciona un mejor rendimiento.
2. Productividad : la sintaxis de GetX es fácil , por lo que es productiva. Ahorra mucho tiempo a los desarrolladores y aumenta la velocidad de la aplicación porque no utiliza recursos adicionales. Utiliza solo los recursos que se necesitan actualmente y, una vez que finaliza su trabajo, los recursos se liberarán automáticamente. Si todos los recursos se cargan en la memoria, no será tan productivo. Así que mejor usar GetX para esto.
3. Organización : el código GetX está organizado como Vista, Lógica, navegación e inyección de dependencia. Así que no necesitamos más contexto para navegar a otra pantalla. Podemos navegar a la pantalla sin usar el contexto, por lo que no dependemos del árbol de widgets.

Gestiones GetX:

• Gestión del estado: Hay dos tipos de gestión del estado:
  • Administrador de estado simple: utiliza GetBuilder .
  • Reactive State Manager: Utiliza GetX y Obx .
• Gestión de rutas: si queremos hacer widgets como Snackbar, Bottomsheets, diálogos, etc. Entonces podemos usar GetX porque GetX puede construir estos widgets sin usar contexto.
• Gestión de dependencias : si queremos obtener datos de otra clase, con la ayuda de GetX, podemos hacerlo en una sola línea de código. Por ejemplo: Get.put()

Instalación:

• Escribe get under dependency en el archivo pubspec.yaml .

dependencies:
    get: ^4.1.4

• Importar get en el archivo main.dart :

import 'package:get/get.dart';

¿Por qué usar GetX?

• Cuando hay una actualización de Flutter, puede haber tantos problemas como recibir errores al construir nuestra aplicación. Y cuando buscamos las soluciones para estos errores, a veces no obtenemos respuestas. Entonces, para obtener la solución a los problemas, intente abrir un problema en ese repositorio. Lo único que debemos hacer después de la actualización de flutter es actualizar la dependencia Get.
• Todos sabemos que Flutter es rápido, pero hay cosas que deben evitarse, como cuando navegamos a otra pantalla, usamos Navigator.of(context).push(context, builder(…..)) y lo hacemos tantas veces . no es un buen enfoque para un desarrollador. En lugar de escribir esto, simplemente podemos escribir Get.to(HomePage()) para navegar a HomePage.
• Cuando queremos actualizar cualquier Widget, a menudo usamos StatefulWidget para eso. En lugar de crear StatefulWidgets, podemos hacer la misma tarea usando Stateless Widget también usando GetX. Agregando «.obs» a la variable que debe actualizarse y colocando el Widget dentro de Obx, podemos actualizar la pantalla cuando una variable cambia el valor sin actualizar toda la página.
• Cuando navegamos entre pantallas, creamos widgets como una barra de bocadillos, hojas inferiores, etc., entonces ya no necesitamos usar el contexto. Entonces, gracias a GetX, el rendimiento aumenta.

Tomemos un ejemplo para navegar a otra pantalla:

• Normalmente, usamos Navigator.push(context, MaterialPageRoute(builder: (context) => Home()),); para navegar a otra pantalla. Esta tarea también se puede realizar utilizando Get.to(Home());
• archivo main.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: 'Flutter Demo',
      theme: ThemeData(
          
        primarySwatch: Colors.blue,
      ),
      home: First(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class First extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
     body: Center(
        child: Container(
          child: ElevatedButton(
            child: Text("Go to next screen"),
            onPressed: () { 
                
              //navigate to Second screen
              Get.to(Second()); 
            }
          ),
        ),
      ),
    );
  }
}
  
  
class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeekforGeeks"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
     body: Center(
       child: Container(
          child: ElevatedButton(
            child: Text("Go to first screen"),
            onPressed: null
          ),
        ),
      ),
    );
  }
}

Producción: