Buenas Prácticas Flutter: De una idea a un MVP 💡📲 — Parte IV (GetX)

Manejadores de Estado de la aplicación con GetX

En esta sección tenemos bastantes cosas que hacer y ya entramos en código puro y duro. Intentaré ir al grano pero iré explicando poco a poco lo que vamos a ir haciendo.

Empezaremos con añadir GetX al proyecto añadiéndolo a nuestro pubspec.yaml

GetX en Pub.dev: https://pub.dev/packages/get

Repositorio GetX: https://github.com/jonataslaw/getx

get: ^3.22.2

Seguidamente, vamos a modificar nuestro main.dart para poder usar GetX.

• Reemplazamos MaterialApp por GetMaterialApp.
• En el build de MyApp añadiremos un controlador global para toda la APP que le vamos a llamar AppController

En este momento nos marcará un error del lint en la línea 9 puesto que no existe ese controlador.

Antes de generar nuestro AppController, hemos de tener claro que todo controlador debe tener su Binding y casi siempre su Repository y su correspondiente Implementación si es que lo vamos a necesitar.

Al ser un controlador genérico lo insertaremos en 📂 lib > appController > app_controller.dart

Controlador básico global

Como vemos en la imagen, el controlador es básicamente una clase que extiende de GetxController. Si inspeccionamos GetxController, veremos que extiende de un StatefulWidget.

Vamos a crear nuestro AppRepositoryInterface, su implementación y su Binding correspondiente.

AppRepositoryInterface

AppRepositoryInterface

Implementación de nuestro repositorio global

AppBinding

Finalmente nuestro AppBinding que inyectará nuestro controlador

Finalmente, para que todo surta efecto, nos quedará decirle a nuestra aplicación que use nuestro AppBinding

Hemos bindeado nuestro controlador indicándole a la propiedad initialBinding de GetMaterialApp.

Vamos a proseguir generando nuestras rutas para ello generemos la screen del Splash personalizado. Creamos la carpeta splash dentro de lib>presentation y 3 archivos más

• splash_binding.dart
• splash_controller.dart
• splash_screen.dart

Splash controller

Podemos ver que tenemos 3 métodos de su ciclo de vida

• onInit: Antes de que el controlador esté cargado
• onReady: Cuando el controlador haya sido cargado
• onClose: Cuando hemos eliminado el controlador

Dentro de las dependencias instaciamos con un Get.lazyPut() el controlador en sí. Más adelante inyectaremos en el splash repositorios adicionales, para cualquier necesidad.

Get.lazyPut()

Como su propio nombre indica, carga las dependencias de forma diferida, lo que básicamente significa que las dependencias se crearán inmediatamente, pero se cargarán en la memoria solo cuando se llame a Get.find por primera vez. Muy útil si tenemos todas las dependencias en initialBinding (AppBinding en nuestro caso), ya que se cargan solo cuando los widgets las vayan a usar.

Finalmente nuestra screen.

Notamos que SplashScreen extiende de GetWidget, que a su vez este extiende de un StatelessWidget.

Le indicamos a GetWidget que el controlador que va a usar es SplashController: GetWidget<SplashController>

Y deberíamos ver algo parecido a la siguiente pantalla.

En el siguiente capítulo Animaremos la Splash con elementos reactivos.

Os dejo el preview.

Nos vemos pronto!

Github repo: https://github.com/luiggibcn/bpf/tree/state-management

Parte 3: Generando biblioteca de iconos custom

Parte 5: Dando funcionalidad y animando la Splash Screen