Uno de los principios de programación más importantes que he escuchado desde mi primer año de universidad es DRY, o bien, Don't Repeat Yourself.
DRY nos transmite una forma de resolver problemas a través de código que aplica a casi cualquier problema. Incluso es una forma de aplicar algoritmos en nuestras vidas diarias.
No te repitas, si lo haces, hay espacio de optimización. Desde un punto de vista técnico, este principio nos invita a automatizar un proceso repetitivo que, a primera instancia, nos sugiere como solución la implementación de un ciclo como for o while. O bien, escribir algún script que ejecute esa acción que nos toma más tiempo y esfuerzo del que nos gustaría.
Hay un tipo de herramienta súper útil cuando estamos programando, las famosas code gen o generadoras de código. Consisten en algún programa que se incorpora en nuestro proyecto para ejecutarse en desarrollo y crear archivos con toda la configuración que hubiera alargado el tiempo de desarrollo.
Antes de entrar en materia, me gustaría plantearles un típico problema donde podemos ver el porqué de estos programas.
https://gist.github.com/794f658da931be0e86d858ea830aa1a2
En este caso estamos declarando una imagen que se inicializa como un asset que cargamos del mismo proyecto. Para asignar este asset, debemos proveerle el path del archivo .png al método. Esto no es seguro porque somos seres humanos y tendemos a cometer errores (typos) que pueden no ser detectados por un linter o compilador.
En resumen, la generación de código mitiga estos problemas ya que se encarga de escribir el código que necesitamos para que nosotros lo utilicemos y podamos identificar/corregir errores con más facilidad.
Ahora que sabemos eso, usemos estas utilidades.
Disclaimer: El 95% del tiempo me encuentro escribiendo código en Dart, así que este artículo va a ser enfocado en cómo podemos ser más eficientes al programar apps con Flutter, utilizando herramientas de generación de código.
FlutterGen es un generador de código relativamente nuevo, mitiga muchos de los grandes problemas cuando trabajamos con archivos locales, específicamente recursos que utilizan nuestras apps para branding (el logo, por ejemplo).
Y bueno, como buena práctica siempre está almacenar en variables y clases los valores que se repiten muchas veces en el app.
Podemos pasar de esto:
https://gist.github.com/b2a1750b6ecb2c5f8cdaaa91577b2cc2
A esto:
https://gist.github.com/e251655755fc43251722a19cbce37ab3
Una manera muy simple de solamente acceder a la propiedad url de la clase API y de esa manera podemos utilizar la misma variable en otras partes de nuestra app. También se nos facilita si cambiamos el String que contiene url, ya que se cambiaría en todas las partes donde lo ocupemos.
Para usar FlutterGen, debemos configurarlo. Tenemos 3 opciones:
- Homebrew:
$ brew install FlutterGen/tap/fluttergen - Pub:
$ dart pub global activate flutter_gen - build_runner: Con el build system de Dart usualmente hay algunos conflictos de versionado entre paquetes, así que omitamos ese por el momento.
Mi sugerencia, usen Pub. Van a tener que actualizar su PATH al terminar la instalación, ejecutando en la terminal: export PATH="$PATH":"$HOME/.pub-cache/bin"
Luego, debemos hacer la configuración del pubspec.yaml. En este punto, debemos tener assets incluidos en el pubspec. A continuación les dejo lo que pueden copiar y pegar al final de su archivo, la explicación va en los comentarios.
https://gist.github.com/9235c32daf81931cfe164ed74f85a1fd
Ok, eso fue toda la configuración que debíamos hacer. Ahora veamos la magia.
Ejecutamos el comando $ fluttergen -c pubspec.yaml, tomando en cuenta que el path al pubspec puede variar y hay que revisarlo en el caso de obtener algún error. Si todo sale bien, vas a tener una nueva carpeta de gen/ en la ruta que especificaste en el pubspec.
Ahora vamos a usar el código generado. En el caso de las imágenes, accedemos mediante Assets, hasta llegar a la que ocupemos. Ya nuestra imagen se convierte en un objeto Image, entonces no es necesario envolverla en el widget, sólo ejecutamos el método image().
https://gist.github.com/5d6b5402b1c94888ef706fe9cf315c6d
Si necesitamos las fuentes de texto, tenemos una clase llamada FontFamily, donde tenemos como propiedades las cadenas de texto que contienen los identificadores de nuestras fuentes. Las usamos así:
https://gist.github.com/7eeb19c4983a4458b45b86ac17e2d68b
Finalmente, para no dejarlos sin el ejemplo de los colores (por si alguien los ocupa de esa manera), tenemos una clase llamada ColorName que nos permite acceder a ellos.
https://gist.github.com/786c32dc34f080bd80d0b42fd1795ac6
Ahora ya tenemos nuestro código generado y sabemos cómo usarlo, sólo queda empezar a implementarlo en nuestras apps.
Si tenés alguna duda con respecto a este package, en este link podés ojear la documentación y también podés chequear su código fuente en su repo de GitHub.
Igualmente podés compartir este artículo para ayudar a otro/a desarrollador(a) a seguir mejorando su productividad al escribir aplicaciones con Flutter.
Además, si te gustó este contenido, podés encontrar aún más y seguir en contacto conmigo en mis redes sociales:
@marcossevilla do you have this post in english somewhere please? :)