Crea una app de Stickers con Flutter #1

Hoy aprenderás a crear una aplicación de Stickers para WhatsApp usando Flutter. Te enseñaré todo lo que he aprendido al crear mis propias apps de stickers. Todo lo que leí, fallé y experimenté al publicarlo en la Play Store estará resumido aquí.

Esta es la guía 1 de 2 y te recomiendo terminar los dos. “Los que se desaniman pierden”. let’s goo

¿Para quién es este tutorial?

Cualquier persona puede seguir este tutorial. Si lo desea. Pero, si quiere entender la guía sin problemas, es recomendable que usted ya haya creado proyectos con Flutter y así estar familiarizado con los widgets y conceptos básicos del SDK.

Toma en cuenta

La guía para crear esta app de stickers, fue desarrollada apoyándose de un dispositivo Android; aún se desconoce su funcionamiento en IOS. Para los desarrolladores IOS, trataré de facilitarles la documentación si es necesario.

Los stickers de WhatsApp

WhatsApp te da ciertos detalles y reglas para crear una app de stickers, además, tiene una guía específica para crear los stickers. Aquí te muestro lo esencial que rescate de las lecturas:

“El nombre de tu aplicación no debe llevar de alguna manera el nombre de WhatsApp en las tiendas de aplicaciones.”

Debo decir que existen algunas apps que si llevan WhatsApp en su título. Aunque, consulte con un desarrollador llamado Eduardo Serracín y me advirtió que por ahora talvez no pase nada, pero más adelante pueden retirar tu app de la PlayStore.

¿Cómo se organizan los stickers?

Los stickers en WhatsApp están organizados dentro de packs que cumplen los siguientes requisitos:

Pack:

• Tener como mínimo 3 stickers y un máximo de 30.
• Tener un “Tray Icon” que representará tu pack en WhatsApp.

Sticker:

• Dimensiones de 512×512 píxeles
• Formato Webp
• Tamaño inferior a 100KB

Tray Icon:

• Dimensiones de 96×96 píxeles
• Tamaño inferior a 50KB
• El formato que yo uso es PNG y no he tenido problemas.

No debes preocuparte por todo esto, ya que, te facilitaré un repositorio con todos los archivos necesarios. Ahora sí, COMENCEMOS.

Inicia un proyecto Flutter

Comencemos creando un proyecto. Opcionalmente puedes agregarle el nombre del paquete, con formato com.yourwebsite.

Es recomendable poner el nombre del paquete desde un principio, así luego no la cambias de manera manual. El proceso es un poco complicado en este último.

Instala el paquete

Vamos a instalar el paquete flutter_whatsapp_stickers al pubspec.yaml. Permitirá que nuestra app de stickers interactúe con WhatsApp.

Configura el paquete

Existen dos maneras de configurarlo según el OS que estemos usando. En este caso lo haré para Android, si usted esta en IOS siga las instrucciones del paquete aquí.

Agregue lo siguiente en su app/build.gradle. Esto evitará que todos los archivos Webp se compriman.

Incluye los Assets

Creemos una carpeta “sticker_packs”. Dentro de ella agregaremos nuestros packs y un archivo “sticker_packs.json” (Archivo que ayuda a registrar y clasificar stickers. Más Información) que se encuentran en el repositorio del proyecto.

Ahora incluye los assets en el pubspec.yaml:

A Programar!

Crea las rutas

La app tendrá dos pantallas o rutas. La primera mostrará todos los packs con unos stickers de muestra. Cuando presionen en uno de los packs, la app te enviará a la segunda pantalla. Ahí se podrán ver todos los stickers que contiene dicho pack.

Vamos a crear rutas con nombres y además tendremos que pasar datos de stickers entre ellas. Reemplaza el main.dart por lo siguiente.

Crea una carpeta “screens” dentro de “lib”. Este contendrá las dos rutas en dos archivos separados:

Por el momento, dentro de home_screen.dart creamos un widget con estado llamado Home:

Para el detail_screen.dart, crea un widget con estado llamado Detail y su constructor que recibe un pack.

Seguramente en tu código se muestran algunos errores; estos se arreglarán ahora mismo.

Crea los modelos

Ahora vamos a crear los objetos o modelos Pack y Sticker en dos archivos separados. Dentro de la carpeta lib/models

Creamos el archivo pack_model.dart con el modelo Pack.

Creamos otro archivo sticker_model.dart donde irá el modelo Sticker.

VAMOS A EJECUTARLO ??

Recordemos

En esta primera guía:

• Conoces como se organizan los stickers en WhatsApp.
• Tienes claro que existen ciertos requisitos en crear una app o sticker para WhatsApp.
• Configuraste con éxito el paquete flutter_whatsapp_stickers que será el puente entre la app y WhatsApp.
• Por último, construiste una aplicación que servirá como base para el siguiente capítulo.

Conclusión

Si lograste llegar hasta este punto, por favor, te pido que te des unas buenas palmadas en la espalda. Te lo mereces.

Puede que te abrume tanta información o no entender algunos conceptos. Pero créeme que con más práctica, creando apps de este tipo. Lo entenderás mejor y crearás tus programas de manera rutinaria.

En el siguiente artículo te enseñaré a renderizar los Packs y los Stickers. Además, instalaremos los Stickers a WhatsApp.