Entrenando con Flutter

Desarrollo de una app completa con Flutter y SQLite (Parte 1: Presentación)

Manuel Vargas Tapia
5 min readNov 8, 2018

Esta es la primera parte de lo que espero sea una saga acerca del proceso de desarrollo de mi primera app con Flutter. Creo que escribir al respecto me servirá no sólo a mí, como una forma de organizar mi razonamiento y de documentar la app, sino también como referencia para posibles colegas interesados en Flutter.

Repositorio: https://github.com/manuelvargastapia/FWorkout

Segunda parte: https://medium.com/@manuelvargastapia/entrenando-con-flutter-parte-2-4fb8d166ee94

Después de pasar un tiempo en el purgatorio de los tutoriales, he decidido que ya estoy listo para comenzar a construir una solución de software real. Para ello, escogí uno de mis proyectos en mente que creo mejor se adecúa a la situación: FWorkout, una app para crear y gestionar rutinas de entrenamiento personalizadas.

Las herramientas que utilizaré son: Visual Studio Code, SQFLite y, por supuesto, Flutter. En cuánto a técnicas y prácticas, utilizaré sólo mi intuición como programador respetuoso del código limpio y las arquitecturas mantenibles y escalables, o al menos a eso aspiro. No creo que sea necesario usar algún patrón de diseño o alguna tecnología como Redux. De hacerlo, pienso que estaría involucrando elementos que podrían entorpecer el desarrollo mismo, así como las explicaciones que pretendo ofrecer. Aunque naturalmente, puede que cambie de opinión en el futuro.

Cabe aclarar que mi intención no es crear un tutorial de cómo construir una aplicación desde cero ni de cómo usar este framework. Diría más bien que es un ejercicio de registro y autoaprendizaje, al mismo tiempo que una buena oportunidad para compartir el poco conocimiento que tengo y pulirlo para profundizar en algo que me gusta mucho.

FWorkout

El proyecto que estoy realizando lo tengo en mente desde hace semanas y creo que es un buen candidato para tener un primer repositorio con algo real y complejo que mostrar. Si es posible, me gustaría también publicarlo en la Google Play Store. Además, tengo ideas de cómo expandirlo mediante la adición de una app web, además de agregar muchas más funcionalidades. No obstante, de momento me quedaré con el siguiente listado de requerimientos que guiarán el desarrollo:

  1. El usuario puede registrarse y autenticarse. Esto será hecho sólo con SQLite por ahora. Más adelante pretendo incorporar Firebase al stack.
  2. El usuario puede crear rutinas, personalizando todos sus parámetros. Estos parámetros incluyen su nombre, descripción, categoría o tipo de rutina, ejercicios con sus respectivas condiciones, tales como repeticiones, carga, etc.
  3. El usuario puede crear ejercicios, también personalizados. Es decir, la app no tendrá una lista predefinida de ejercicios, sino que serán creados por el usuario, pudiendo almacenarlos y reutilizarlos en sus rutinas.
  4. El usuario puede visualizar las rutinas en un formato que le permita ejecutar su entrenamiento tal como lo diseñó. No tendría sentido almacenar rutinas sin poder usarlas.
Diagrama de interacciones. Pantallas (cuadros) y sus funcionalidades (líneas). Hecho con Xmind

Todo ello, espero, enmarcado en una interfaz sencilla, intuitiva y aplicando los estándares de Material Design que Flutter incorpora de fábrica. En cuanto a la plataforma a la cual apunta, sólo consideraré a Android, debido a limitaciones técnicas.

Finalmente, cabe señalar que estos requerimientos, como es claro, son bastante holgados y dejan mucho espacio para modificaciones durante el trayecto, sin mencionar posibles errores de diseño. Sin embargo, me parecen suficientes para este primer intento.

Puntapié inicial

Para comenzar, he creado un repositorio en GitHub al cual haré referencia durante todo el proceso de desarrollo; lo dividiré en ramas de acuerdo a la etapa correspondiente. A continuación, paso a describir los detalles.

En primer lugar, modificamos el archivo main.dart para reemplazar el código de muestra por el siguiente, cortesía de Carbon:

lib/main.dart

Como resultado, simplemente muestra una triste pantalla en blanco y el nombre de la app en la barra superior. Perfecto para comenzar.

Primero, tenemos el importe esencial del paquete material.dart , que contiene nuestro toolkit básico para la construcción de UIs. Luego, vemos que el método main() se encarga de ejecutar nuestra app desde su raíz, la clase FWorkout , la cual a su vez extiende de StatelessWidget, por lo cual debemos sobreescribir el método build() , pieza esencial en el manejo del ciclo de vida de una app en Flutter. Finalmente, con la ayuda del Widget MaterialApp construimos el primer esquema de nuestra app: su título — que puede ser visualizado al poner la app en background; un Scaffold que sirve para introducir los componentes básicos de una app, tales como la app bar y el body, que por ahora es sólo un Container vacío; nos permitirá también modificar el tema global de la app; y finalmente, nos permite especificar algunas herramientas muy útiles a la hora de debuggear, tales como debugShowCheckedModeBanner , que controla la banda que viene por defecto en la esquina superior derecha — hay otros mucho más interesantes que espero mostrar en las siguientes etapas.

Este será más o menos el estilo que seguiré a la hora de mostrar y explicar el código. Al final de los artículos colgaré el link a la rama correspondiente a la etapa de desarrollo a la que haga referencia el artículo, para agilizar el copy-paste general, de ser necesario.

Rama: https://github.com/manuelvargastapia/FWorkout/tree/parte1

Eso es todo. En la siguiente parte, comenzaré el desarrollo por el modelalo de datos. En concreto, por el mecanismo de login y signup. Pretendo también aclarar un poco el camino mediante una estructuración inicial del proyecto.

Para cerrar, quisiera sugerir como suplementos introductorios la muy ordenada y completa documentación oficial, con su versión en español. Por otro lado, estos estos recursos son muy valiosos.

¡Gracias por leer!

Segunda parte: https://medium.com/@manuelvargastapia/entrenando-con-flutter-parte-2-4fb8d166ee94

--

--