Crear un conversor de divisas Flutter con una clave API del servidor

Una aplicación móvil Flutter es un cliente público y no debe contener una clave bearer de exchangerate.dev. Pon la clave en un pequeño proxy de servidor /api/fx, haz que Flutter solicite {from,to} y conserva juntos el tipo, la fuente, la sesión de mercado y la marca temporal de observación en un modelo tipado.

Poner la credencial detrás del servidor

Tu ruta del servidor acepta from y to, añade Authorization: Bearer $EXCHANGERATE_API_KEY, llama a /v1/latest/{from}?symbols={to} y devuelve solo los campos que necesita la app. Conserva la clave en el entorno del servidor. La app pasa su URL de proxy con --dart-define=FX_PROXY_BASE_URL=…; nunca recibe la clave ascendente.

GET /api/fx?from=USD&to=EUR

{"from":"USD","to":"EUR","rate":0.9245,"source":"live","market_session":"open","data_updated_at":"2026-09-29T10:00:00Z"}

Añadir la dependencia HTTP

Crea una app Flutter, añade el paquete actual http a pubspec.yaml y guarda el conversor Flutter completo como lib/main.dart. Ejecútalo con flutter run --dart-define=FX_PROXY_BASE_URL=https://your-app.example/api/fx. Descarga el proxy Node, define EXCHANGERATE_API_KEY en el entorno del servidor y ejecuta node flutter-currency-converter-proxy.mjs con Node 20 o posterior. Escucha en el puerto de loopback 8787 para pruebas locales. Antes de conectar un dispositivo, publícalo mediante tu propio backend HTTPS autenticado con límites de solicitudes; valida monedas e importe, reenvía la clave y devuelve solo los campos tipados necesarios. El archivo usa widgets Material estándar y un modelo FxQuote tipado. La receta oficial de networking de Flutter explica la configuración del paquete y el patrón de solicitudes.

Validar la cotización antes de renderizar

El modelo rechaza un rate ausente, no positivo, no finito o no numérico, y un data_updated_at ausente. Así evita que una página HTML de error, un fallo del proxy o un JSON vacío entren en la pantalla de conversión. El cliente también limita la solicitud a diez segundos y muestra los estados no 2xx.

class FxQuote {
  final String from;
  final String to;
  final double rate;
  final String source;
  final String marketSession;
  final DateTime dataUpdatedAt;
}

Mostrar carga, errores y frescura

La pantalla desactiva el botón mientras se ejecuta la solicitud, muestra un indicador de progreso y conserva un error legible cuando falla el proxy. Tras el éxito muestra el importe, el tipo, la fuente, la sesión de mercado, la hora de observación, la antigüedad de caché de la app (desde que el dispositivo cargó la respuesta) y la antigüedad de observación (desde data_updated_at). El usuario puede ver si observa un dato de un día de mercado en vivo o una referencia diaria.

Redondear para mostrar y conservar el valor

Para las monedas admitidas por el ejemplo, muestra JPY sin decimales y USD, EUR, GBP e IDR con 2; muestra el tipo con 6 decimales para facilitar la lectura. Es redondeo de presentación. Conserva el tipo numérico analizado y usa una estrategia decimal o de punto fijo en un límite contable de producción; no uses un valor de pantalla binario como registro de liquidación.

Probar el recorrido del cliente

Ejecuta la app con una respuesta de proxy de prueba y prueba después un timeout, HTTP 401/429, JSON malformado, tipo ausente y un data_updated_at antiguo. El networking, TLS y despliegue del proxy específicos de Flutter aún necesitan una comprobación en dispositivo o emulador real; este archivo descargable es un ejemplo de cliente ejecutable, no un proxy alojado.