Integración de Realidad Aumentada (AR) en Aplicaciones Flutter

Introducción

• AR puede parecer complejo, pero se puede integrar fácilmente en aplicaciones móviles, como filtros de Instagram o SnapChat, en Flutter.
• Veremos cómo integrar AR en una aplicación Flutter.

Configuración Inicial del Proyecto

1. Acceder a developer.deep.ar y iniciar sesión.
2. Crear un nuevo proyecto:
   • Proporcionar un nombre al proyecto.
   • Seleccionar el número deseado de usuarios por mes (ej. 10 usuarios).
   • Hacer clic en continuar para crear el proyecto.
3. Añadir aplicaciones Android e iOS:
   • Hacer clic en añadir aplicación e introducir el ID de la aplicación.
   • Obtener el ID de la aplicación desde el archivo build.gradle en el directorio Android.
4. Copiar la clave SDK para uso futuro.
5. Descargar el paquete de filtros Deep AR de la sección de descargas.
   • Encontrarás múltiples carpetas con imágenes de vista previa y archivos Deep AR.

Incorporación de Filtros Descargados

1. Crear directorios llamados filters y previews:
   • Colocar los archivos de extensión Deep AR en el directorio filters.
   • Colocar las imágenes de vista previa en el directorio previews.
2. Abrir el archivo pubspec.yaml e incluir el paquete Deep AR Flutter.
3. Importar los recursos de filtros y vistas previas según sea necesario.
4. Modificar el archivo Android manifest para añadir los permisos necesarios.

Estructura del Proyecto

1. Crear directorios: Pages, models, data, y un archivo constant.dart.
2. En el directorio models:
   • Crear un archivo filters.dart con una clase simple Filters con atributos de imagen y ruta de filtro.
3. En el directorio data:
   • Crear un archivo filter_data.dart con una lista de filtros.
4. En el directorio Pages:
   • Abrir el archivo homepage.dart.

Implementación

1. Crear un controlador Deep AR.
2. Definir e inicializar la función del controlador:
   • Inicializa el controlador con parámetros necesarios (claves de licencia Android e iOS y configuración de resolución).
3. Implementar la función buildButtons para mostrar botones de control de la cámara:
   • Crear una fila con IconButtons para voltear la cámara, tomar fotos, y cambiar el flash.
4. Implementar la función buildCameraPreview que retorna un SizedBox con la vista previa de Deep AR envuelto en un widget Transform.scale.
5. Pasar el controlador Deep AR a la vista previa.
6. Definir la función buildFilters para mostrar una lista de filtros:
   • Establecer la propiedad onTap para llamar al método switchEffect del controlador Deep AR, pasando la ruta del archivo de efecto del filtro seleccionado.
7. En el método build del main widget:
   • Retornar un FutureBuilder con el future establecido para inicializar el controlador.
   • En el builder, comprobar el estado de conexión:
     • Si está listo, mostrar una columna con la vista previa de la cámara, botones y filtros.
     • De lo contrario, mostrar un indicador de progreso circular.

Conclusión

• Al ejecutar la app, se puede ver cómo se logró la integración usando Deep AR.
• Código disponible en la descripción para experimentar y divertirse.
• Hey.com app para empezar proyectos personalizados con experts en Flutter.