Últimamente he estado trabajando con Flutter el framework desarrollado por Google para realizar aplicaciones móviles para IOS y Android. Así que creo que llego la hora de empezar a conectarlo con Firebase y para eso existe un conjunto de plugins llamado Flutter Fire.

Plugins existentes

La colección de plugins que engloba Flutter fire es amplia y cubre casí todas las apis que tiene firebase de forma nativa. Es importante recordar que la mayoría de estos se encuentran en beta y solo existen unos cuantos que ya tienen reléase oficial.

Codelab

Para empezar con esto me he ayudado con el codelab que está publicado por Google ( Firebase for Flutter ). En este ejemplo realizamos una conexión a la base de datos FireStore y realizamos actualizaciones de forma transaccional a un listado que cargamos en la pantalla.

Actualizar dependencias

Lo primero es actualizar las dependencias de nuestro proyecto y en este caso no necesitamos ingresar cada dependencia en las distintas variaciones. Incluiremos la librería de Cloud_Firestore. Para eso nos dirigimos al archivo pubspec.yaml  donde utilizando el formato agregamos la librería de está forma:

Agregar la interfaz

Una vez que nuestro proyecto tiene las librerías necesarias para su correcto funcionamiento pasamos a crear la interfaz. Esta interfaz es muy simple, se compone de 6 elementos básicos donde los últimos 3 se repetirán por cada elemento del listado. Podemos realizarla toda en el archivo lib/main.dart.

Configuración especifica de Firebase

Debido a la naturaleza de las configuraciones y por razones incluso de seguridad, es necesario realizar ciertas tareas en cada sistema operativo. En este caso te explico en el caso de Android.

Registra tú aplicación en la consola de Firebase

Modifica el archivo android/app/build.gradle

Agrega la dependencia a android/build.gradle

Crea tú base de datos

En este proyecto como vimos en las dependencias usaremos Firebase Cloud Firestore por lo que solo tenemos que ir a la sección de “database” en la consola y activarla. Lo mejor es que al momento de activarla creemos un registro por lo que se verá así.

Conecta tú aplicación

Si has realizado la Configuración especifica de Firebase correctamente tú aplicación ya está conectada y ahora empezaremos a consumir datos de la base de datos que creamos anteriormente. Para eso haremos un StreamBuilder mediante el cual podremos conectarnos y recibir cualquier cambio de la colección en forma automática. Este objeto tiene dos propiedades el strem donde pondremos la consulta a la base de datos y un builder donde podemos crear los ítems de la lista.

Agregar interacción

Ahora que tenemos el listado de elementos agregaremos interacción para los toques del usuario. Para ello usaremos la función onTap dentro del objeto ListTile para detectar el toque del usuario.

Transaccionalidad

Finalmente puedes agregar un concepto de transaccionalidad para que al actualizar el registro de la base de datos respete si un usuario lo ha actualizado pocos segundos antes que tú y así evitar perder votos. Para ello agregaremos unos detalles al método onTap que creamos en el paso anterior.

Si deseas ver el detalle completo de este proyecto puede verlo en mi repositorio: https://goo.gl/zjn4sX.

Descarga este post en pdf: https://goo.gl/ie2qec