Flutter
Nuestro SDK nativo de Workflows para Flutter permite una experiencia rápida y fluida para tus usuarios, aprovechando las capacidades nativas de los dispositivos sin requerir un navegador web para funcionar. Distribuido de forma privada a través de OnePub, este SDK se instala como un plugin de Flutter y te permite ejecutar workflows, obtener información detallada del proceso y recibir eventos en tiempo real durante su ejecución.
Nota: Esta documentación se actualiza para utilizar únicamente el componente WorkflowsRenderer. La versión anterior basada en WorkflowsController era preliminar y ya no se utiliza.
Requisitos
Para poder utilizar nuestro SDK de Flutter, debes cumplir con los siguientes requisitos:
- Tener una cuenta en OnePub, ya que el SDK se distribuye en un host privado.
- Contar con un Workflow creado a través de nuestra API de Workflows.
- Tener instalado el SDK de Flutter (versión mínima
>=3.3.0
) y Dart (versión>=3.0.0 <4.0.0
). - Tener instalado el CLI de OnePub en tu máquina.
Instalación
Configuración del CLI de OnePub
Para instalar nuestro SDK de Flutter, primero debes activar el CLI de OnePub. Ejecuta los siguientes comandos en la terminal:
dart pub global activate onepub
onepub login
Nota: Deberás iniciar sesión con tu cuenta de OnePub. Esto te permitirá instalar y actualizar el SDK, el cual está asociado a nuestra organización y a un equipo específico para tu proyecto.
Agregar la dependencia en tu proyecto
Dentro del archivo pubspec.yaml
de tu proyecto Flutter, agrega la dependencia del SDK. Reemplaza el nombre del paquete y la URL del repositorio según la información que te haya sido proporcionada:
dependencies:
workflows_flutter_xxxxx:
hosted: xxxxxxxxxx
version: ^x.x.x
Ejemplo: En algunos casos el paquete puede tener un nombre similar a
workflows_b6b18e4f
y se instala con el siguiente comando:onepub pub add workflows_b6b18e4f
Uso del SDK
Una vez instalado el SDK, impórtalo en tu proyecto:
import 'package:workflows_flutter_xxxxx/workflows_flutter.dart';
Inicialización y Ejecución de un Workflow
Utiliza el widget WorkflowsRenderer para inicializar y ejecutar un workflow. Este widget se encarga de lanzar el proceso, gestionar la interfaz y notificarte sobre los eventos que se producen durante la ejecución.
return WorkflowsRenderer(
baseUrl: "https://api.test.rem.tools", // O la URL correspondiente a producción o testing
remApiKey: "YOUR_API_KEY", // Tu API Key proporcionado de forma privada
workflowId: "YOUR_WORKFLOW_ID", // El ID del workflow creado previamente
workflowCustomization: WorkflowCustomization(
theme: WorkflowTheme(
primaryColor: "#468499",
secondaryColor: "#994684",
buttonPrimaryColor: "#468499",
buttonSecondaryColor: "#994684",
buttonTextPrimaryColor: "#FFFFFF",
buttonTextSecondaryColor: "#849946",
backgroundColor: "#c5f2cd",
facetecOverlayColor: "#ffd700",
showHeaderLogo: true,
),
textLocalization: TextLocalization(
localization: (Platform.isAndroid) ? "localizable.xml" : "Localizable.strings",
),
textFont: TextFont(
headerFont: (Platform.isAndroid) ? "montserrat_black.ttf" : "Montserrat-Black.ttf",
bodyFont: (Platform.isAndroid) ? "montserrat_regular.ttf" : "Montserrat-Regular.ttf",
buttonFont: (Platform.isAndroid) ? "playwrite_ar_regular.ttf" : "PlaywriteAR-Regular.ttf",
),
images: Images(
logo: "logo.png",
cameraPermissions: "camara.png",
uploadFaceScan: "facetec_upload.png",
uploadFaceSuccess: "facetec_success.png",
uploadFaceError: "facetec_error.png",
photoMathId: "photo_match_id_image.png",
cameraActiveTorch: "facetec_active.png",
cameraInactiveTorch: "facetec_inactive.png",
fingerPrint: "facetec_active.png",
successPage: "success_image.svg",
errorPage: "error_image.svg",
unavailablePage: "unavailable_image.svg",
locationPage: "location_image.svg",
biometricSignPage: "enroll_fingerprint_image.svg",
enrollFingerprintPage: "enroll_fingerprint_image.svg",
enrollBasicPage: "id_scan_image.svg",
enrollFullPage: "id_scan_image.svg",
authPage: "id_scan_image.svg",
livenessPage: "id_scan_image.svg",
faceEnrollment3dPage: "id_scan_image.svg",
),
),
onStart: (workflowResult) {
print("Workflow iniciado. Success: ${workflowResult.success}");
print("Error: ${workflowResult.error}");
},
onStepEvent: (step) {
print("Evento de paso: ${step.status}");
},
onWorkflowEvent: (workflow) {
print("Evento del workflow: ${workflow.status}");
},
);
Importante: Asegúrate de completar correctamente los parámetros (
baseUrl
,remApiKey
,workflowId
, etc.) según los datos de tu proyecto.
Permisos Requeridos
Para que el SDK funcione correctamente, es necesario solicitar ciertos permisos en la aplicación.
Android
Agrega los siguientes permisos en el archivo AndroidManifest.xml
:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.flutter_app">
<!-- ... -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- ... -->
</manifest>
Configuración Específica para Android
Requisitos de SDK de Android
- API mínima: 24
- API de compilación y destino: 35
Configuración del build.gradle
(app)
Dentro del archivo android/app/build.gradle
, realiza los siguientes ajustes:
- Agregar repositorio Maven:
repositories {
maven {
url "https://us-central1-maven.pkg.dev/x/workflows-mobile"
credentials {
username = "_json_key"
password = file("gendra-services-3603602290a0.json").text
}
}
}
Nota: El archivo
gendra-services-3603602290a0.json
(service account) debe ser proporcionado por REM.
- Configurar versiones del SDK:
android {
compileSdkVersion 35
defaultConfig {
minSdkVersion 24
targetSdkVersion 35
}
// ...
}
- Modo Release:
En el bloque
buildTypes
, agrega:
buildTypes {
release {
shrinkResources false
}
}
Reglas para Proguard
Agrega las siguientes líneas en el archivo proguard-rules.pro
:
# Reglas para el SDK de Workflows Flutter
-keep class tools.rem.workflows_flutter_plugin.** { *; }
-keep class com.digitalpersona.** { *; }
-keep class com.google.protobuf.** { *; }
-keep class com.google.mediapipe.** { *; }
-keep class com.google.common.** { *; }
Ajuste en el AndroidManifest
Para evitar conflictos de nombres en la aplicación y el tema, añade la siguiente línea en el elemento <application>
del archivo AndroidManifest.xml
:
<application
...
tools:replace="android:theme, android:label">
...
</application>
Organización de Recursos Personalizados
Coloca los assets en la carpeta res
de la siguiente forma:
- drawable: Imágenes en PNG o JPEG.
- font: Archivos de fuentes (TTF, OTF) dentro de la carpeta
font
. - raw: Imágenes en formato SVG.
- xml: Archivos para textos o configuraciones.
Configuración Específica para iOS
Requisitos de iOS
- Versión mínima: iOS 12.0
- Versión máxima soportada: iOS 17.5
Configuración del Podfile
En el archivo ios/Podfile
, establece la versión mínima y añade el pod del SDK:
platform :ios, '12.0'
target 'Runner' do
# Otras configuraciones y pods
pod 'WorkflowPlugin', podspec: 'https://storage.googleapis.com/x/WorkflowiOS/WorkflowPods/WorkflowsPlugin.podspec?cache=150'
end
Instalación de Dependencias
Desde la carpeta ios
de tu proyecto, ejecuta:
pod install
Permisos en Info.plist
Agrega las siguientes entradas en el archivo Info.plist
para solicitar permisos:
<key>NSCameraUsageDescription</key>
<string>3D Liveness Detection by FaceTec.</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need access to your microphone to record audio.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>The example App requires access to the device's location.</string>
Organización de Recursos en iOS
- Textos: Usa archivos
.strings
y colócalos directamente en la carpeta del proyecto. - Imágenes SVG: Agrégalas directamente en la carpeta del proyecto.
- Tipografías: Coloca los archivos de fuente en la carpeta del proyecto.
- Imágenes PNG/JPG: Deben incluirse en el Asset Catalog.
FAQ
¿Cómo obtengo el workflowId
?
El workflowId
se obtiene al crear un Workflow mediante nuestra API de Workflows. La respuesta de la API te proporcionará este identificador.
¿Cómo consigo el apiKey
y el baseUrl
?
El apiKey
es proporcionado de forma privada, y el baseUrl
suele ser:
https://api.rem.tools
para producción.https://api.test.rem.tools
para pruebas.