ScrumPocker con Flutter — Parte 1
En este story aprovecharemos las ventajas de Flutter para realizar un ScrumPocker.
Este tutorial esta desarrollado en un equipo con sistema operativo Elementary OS y Visual Studio Code como IDE por lo que si se desarrolla en otro sistema o IDE sera necesario buscar la combinación de teclas de acuerdo a estos.
Todo el código del tutorial es mostrado en screenshot para que el lector se vea en la necesidad de escribirlo por si mismo y mejore su entendimiento ya que esta pensado para personas con y sin experiencia en flutter, por lo cual tal vez parezca un tutorial largo al inicio pero una vez familiarizado con esto los siguiente story serán mucho mas rápido.
Así que vamos a codear.
- Creamos un nuevo proyecto en nuestro IDE (en mi caso Visual Studio Code) llamado scrum_pocker_app:
- Presionamos el atajo Ctrl + Shift + P para crear un nuevo proyecto y seleccionamos Flutter: New Project.
- Sustituimos el nombre del proyecto que nos da por defecto el IDE por el nombre de nuestro proyecto scrum_pocker_app.
- Elegimos el directorio donde se creara el proyecto en mi caso Documents\Flutter\Sandbox
- Presionamos el botón Select a folder to create the project in
- VSC nos generara un proyecto de la siguiente manera
- El proyecto tendrá la siguiente estructura de carpetas:
2. Borramos el código que Flutter nos genera por defecto en el archivo main.dart que encontraremos en el directorio lib.
3. Vamos a crear un StatelessWidget llamado MaterialApp que nos proporcionara un layout orientado a Material design, para esto importaremos el package flutter/material.dart como se muestra a continuación e iniciaremos nuestra aplicación con el método void main() => runApp(MyApp()) , donde MyApp() es la instancia de nuestra clase MyApp la cual extiende de StalessWidget y creara el widget inicial que definimos con el title Scrum pocker.
4. Añadimos dos propiedades que son requeridas por el MaterialApp las cuales son :
- initialRoute la cual sera nuestra ruta inicial por defecto
- routes la cual es un Mapa de rutas
Para esto necesitaremos crear un nuevo archivo que se llamara home.dart el cual sera el view o widget inicial de nuestra aplicación, todo esto para eliminar el error que se muestra en la siguiente pantalla.
5. Creamos un nuevo directorio en la carpeta lib -> src/views y en este directorio creamos nuestro archivo home.dart como se muestra a continuación.
6. Crearemos lo que sera nuestro view inicial para esto importaremos package flutter/material.dart nuevamente y ahora crearemos una clase de tipo StatelessWidget en la cual retornaremos como principal widget un Scaffold con las siguientes propiedades.
- appbar esta propiedad nos proporciona un Appbar el cual tiene un title que nos permitirá mostrar desde un icono o texto como titulo según lo deseemos, en este caso le asignamos un Row con dos widgets Icon y un Text.
- body esta propiedad recibe un widget el cual se mostrara en el cuerpo de nuestra aplicación en esta ocasión usamos un Center y un Text con el mensaje Este es el Home.
- Regresamos a nuestro archivo main.dart e importamos nuestro home para poder hacer uso de este como se muestra a continuación, de esta manera ya tenemos nuestra aplicación inicial.
7. Ejecutamos nuestra aplicación con el la tecla F5 y seleccionamos el dispositivo donde la deseamos ejecutar, esto tardara algunos minutos ya que al ser la primera ejecución requiere descargar dependencias y compilar nuestro código, al finalizar se nos mostrara en pantalla lo siguiente.
8. ahora trabajaremos sobre nuestro archivo home.dart para darle estilo y agregar nuestras cartas.
- Agregamos la propiedad mainAxisAlignment en nuestro Row esta nos ayudara a posicionar los widgets que están dentro de él, en este caso los centraremos.
- Sustituimos el Center por un Container que tendrá como hijo un widget personalizado el cual llamaremos _swiperCards() el cual crearemos a continuación por lo cual en nuestro código deberá mostrarse como un warning.
9. Creamos un widget personalizado llamado _swiperCards a través de un método que retorna el widget de la siguiente manera.
- Como se muestra en la imagen anterior nuestro método retorna un widget llamado CardSwiper que recibe una lista de items el cual actualmente no existe así que vamos a crearlo, por buena practica crearemos este widget en un nuevo archivo el cual llamaremos card_swiper.dart el cual situaremos dentro de una nueva carpeta llamada widgets dentro de nuestra carpeta src como se muestra a continuación.
- Creamos nuestra clase CardSwiper de tipo StatelessWidget la cual tendrá como propiedad una lista de tipo dynamic llamada items ,añadimos su constructor con la propiedad items como requerida y en nuestro método build retornamos un Container azul como se muestra a continuación.
- Importamos nuestro CardSwiper para poder usarlo en nuestro archivo home.dart
- Recargamos nuestro emulador y nuestra aplicación deberá verse de la siguiente manera.
10. Para la creación de nuestras tarjetas nos apoyaremos con paquete que ya nos ofrece un Swiper el cual encontraremos en el siguiente link.
- El primer paso sera agregar la dependencia de este paquete en nuestro pubspec.yaml que es el archivo donde se encuentran todas nuestras dependencias del proyecto.Tomamos la ultima versión disponible en la documentación del paquete que en este caso es la 1.6.6.
- Agregamos la dependencia en nuestro pubspec.yaml después de la dependencia cupertino_icons: ^0.1.2 como se muestra a continuación y guardamos cambios , automáticamente comenzara la descarga del paquete y nos mostrara en el output de la consola un exit code 0 el cual indica que la descarga fue exitosa.
NOTA: la indentación debe ser la correcta y estar al mismo nivel que la dependencia de cupertino ya que si no se respeta la indentación la dependencia no sera tomada en cuenta provocando posibles errores o la ausencia de esta en el proyecto.
- Es hora de usar este paquete para generar nuestro SwiperCards así que comencemos importando el Swiper en nuestro archivo card_swiper.dart.
Agregamos el Swiper dentro del nuestro Container con las siguiente propiedades:
- itemBuilder esta propiedad nos permite construir cada item obteniendo el index y contexto de este, en este caso retornaremos un ClipRRect con un borderRadius circular que nos de el efecto de puntas redondeadas en cada item el cual a su vez tendrá como hijo un Container de color blanco que tiene como hijo un Center para posicionar el Text que nos mostrara la cadena de texto del item asignado en la lista de acuerdo al index.
- itemCount hace referencia al numero de items qué mostraremos, en este caso se le dio como tamaño el numero de elementos de la lista que recibe nuestro CardSwiper.
- layout esta propiedad nos ofrece una apariencia de los elementos en el Swiper, en este caso seleccionamos SwiperLayout.STACK para que nos diera ese efecto de un item sobre el otro.
- itemWidth e ItemHeight cómo podemos inferir son las medidas con las que queremos que se muestren nuestros items dentro del Swiper, en este caso hicimos uso de MediaQuery para obtener el tamaño de la pantalla y dar los valores en proporción a esta.
11. Guardamos todos estos cambios y relanzamos nuestra aplicación la cual tendrá la siguiente apariencia.
En el proximo story agregaremos mas estilo a nuestras cartas así como un nuevo view donde tendremos la opción de ocultar y mostrar nuestro story point.
cualquier duda o sugerencia no duden en dejarla vía Twitter.
Nos vemos en el proximo story …..
