Contrata u ofrece
servicios
Contrata u ofrece servicios: el directorio de oficios de Venezuela, en el bolsillo
Aplicación móvil · Marketplace de servicios
Desarrollador móvil Flutter — diseño de interfaz, arquitectura de vistas, flujo de acceso y sistema de diseño
Prototipo funcional. El repositorio público contiene el flujo de acceso completo y el esqueleto de navegación; la integración con backend está presente pero comentada en el código.
Plomería
ServiciosYa · Venezuela
Electricidad
ServiciosYa · Venezuela
Refrigeración
ServiciosYa · Venezuela
el directorio, ficha a ficha
Cada oficio es un punto suelto
Antes de la app, el directorio de oficios existe: está repartido en cadenas de WhatsApp, grupos de Facebook y la memoria de los vecinos. Lo que no existe es la línea que une un punto con otro.
de contactos sueltos a directorio
El problema
En Venezuela contratar un oficio —plomería, electricidad, mantenimiento, delivery, cualquier servicio de barrio— se resuelve por cadena de WhatsApp, recomendación de vecino o grupo de Facebook. No hay un lugar donde el que ofrece publique de forma verificable ni donde el que contrata compare antes de decidir, y el proceso se pierde en mensajes sueltos, precios que no se sostienen y contactos que nunca responden. Del otro lado, el profesional independiente carece de una vitrina propia: su reputación vive en la memoria de sus clientes y no viaja a nadie más.
La solución
Una aplicación móvil de doble rol que se instala una sola vez y sirve tanto para contratar como para ofrecer. El acceso arranca en una pantalla de bienvenida que plantea la elección desde el primer segundo —«¡Regístrate!» u «Iniciar Sesión»— y continúa en hojas modales deslizables que evitan cambios de pantalla bruscos. El registro captura identidad real con los formatos del país (RIF/CI con letra, teléfono con prefijo de operadora, fecha de nacimiento) y la valida con un código de seis dígitos enviado por correo antes de dejar entrar a nadie. Ya adentro, un shell de cuatro pestañas organiza la vida del usuario y un catálogo con buscador, categorías visuales y modal de ordenamiento permite recorrer la oferta.
Un mazo de fichas sobre el plano
La metáfora que gobierna toda la interfaz: cada oficio es una carta de cuatro capas —base azul, ilustración, banda de vidrio esmerilado y pastilla crema— repartida sobre la rejilla del barrio. Pasa el cursor por encima.
Plomería
ServiciosYa · Venezuela
Plomería
Hoy mismo
Electricidad
ServiciosYa · Venezuela
Electricidad
3 cerca
Refrigeración
ServiciosYa · Venezuela
Refrigeración
24 h
Manicura
ServiciosYa · Venezuela
Manicura
A domicilio
Delivery
ServiciosYa · Venezuela
Delivery
20 min
Rectángulo plano en #416AAF: el suelo de la ficha.
La ilustración del oficio, recortada a 10 px de radio.
Vidrio esmerilado: desenfoque de 4 px y velo negro al 26 %.
Pastilla crema #EDE5CC: la única mancha cálida y lo único accionable.
Seis decisiones que dan forma al prototipo
Un binario, dos roles
La pantalla de bienvenida no pregunta «¿eres cliente o proveedor?»: plantea contratar y ofrecer como la misma puerta. El mismo registro y el mismo shell de navegación sirven a los dos lados del mercado.
Registro con formatos venezolanos
Campos compuestos en lugar de inputs genéricos: selector de letra (V) más RIF/CI con contador 0/9, desplegable de prefijo (412) más número con contador 0/8, y fecha DDMMYYYY contada carácter a carácter mientras se escribe.
Verificación por código de seis dígitos
Pantalla dedicada con seis casillas independientes, botón de reenvío y salida de emergencia («¿Correo incorrecto? Regresar») para que un tipeo mal hecho no deje al usuario atrapado en el embudo.
Hojas modales en vez de pantallas
Registro e inicio de sesión se abren como bottom sheets al 85 % de la altura, con esquinas superiores redondeadas de 20 px y tirador gris centrado. La bienvenida permanece detrás, atenuada, sin perder el contexto.
Shell de cuatro pestañas flotante
Barra inferior propia dentro de un ClipRRect de 20 px de radio y 70 px de alto, con extendBody activo para que el contenido corra por debajo. Iconos SVG que cambian de versión rellena a lineal según la pestaña activa.
Sistema de color en un solo archivo
Toda la paleta y los tres degradados de la app viven en la clase estática AppColor: azul primario, crema secundario y las capas de sombra negra que hacen legible el texto sobre fotografía.
De la bienvenida al panel
Los cuatro pasos reales del acceso, recreados pantalla por pantalla. Ninguno es una captura: todo está redibujado en HTML y CSS a partir del código.
Contrata u ofrece servicios
Optimiza tu tiempo y agiliza la contratación.
Al usar ServiciosYa, estás aceptando nuestros
Terminos de Servicios y Políticas de Privacidad.
Bienvenida
Contrata u ofrece servicios
Optimiza tu tiempo y agiliza la contratación.
Al usar ServiciosYa, estás aceptando nuestros
Terminos de Servicios y Políticas de Privacidad.
Registro
0/9
0/8
0/8
¿Ya tienes una cuenta? Entrar
Registro
Verificación
del código
Le enviamos un código por correo electrónico, por favor ingréselo a continuación
Ingrese el código recibido por correo electrónico
¿Correo incorrecto? Regresar
Verificación del código
Instalación de aire
4,8 ★ · 35 min
Reparación eléctrica
4,6 ★ · 1 h
Recomendados
Vendidos recientemente
Panel principal y shell de pestañas
Un formulario venezolano
El RIF y la cédula llevan letra separada del número, el móvil se identifica por prefijo de operadora y la fecha se escribe corrida. Ningún input genérico resuelve eso, así que el registro se armó con campos compuestos.
0/9
0/8
0/8
¿Ya tienes una cuenta? Entrar
Contrata u ofrece servicios
Optimiza tu tiempo y agiliza la contratación.
Al usar ServiciosYa, estás aceptando nuestros
Terminos de Servicios y Políticas de Privacidad.
Iniciar
¿Olvidaste tu Contraseña? Restaurar
Inicio de sesión
Dos campos, un botón y el tercio inferior vacío: el pulgar cae justo encima de «Entrar».
Grabado sobre un Android real
Catorce segundos de recorrido y cuatro capturas directas del prototipo compilado.
Recorrido en vídeo de 14 segundos sobre dispositivo Android: bienvenida, apertura de la hoja de registro y hoja de inicio de sesión.
arrastra para recorrer las capturas
Dieciocho piezas ya construidas
Presentadas como la lista vertical de la propia app: miniatura a la izquierda, texto a la derecha.
Con qué está hecho
Datos y presentación, separados en serio
lib/ — el mapa completo
Arquitectura por capas dentro de lib/, con separación estricta entre datos y presentación. models/core aloja las entidades con sus constructores factory desde JSON y sus métodos toMap; models/helper concentra la capa de datos —hoy servida desde estructuras estáticas en memoria— de modo que sustituirla por una fuente remota o por sqflite no obliga a tocar ninguna vista. views/ se divide a su vez en tres: screens/ (once pantallas, con auth/ aislado para el flujo de acceso), widgets/ (dieciséis piezas reutilizables, con modals/ como subcarpeta propia para las tres hojas deslizables) y utils/, donde AppColor centraliza la identidad visual completa. La navegación es imperativa: main.dart arranca en WelcomePage y, tras el acceso, PageSwitcher hace de contenedor de pestañas resolviendo la vista activa por índice sobre una lista de widgets, con la barra inferior como componente propio y no como el widget estándar de Material. El acoplamiento entre pantallas se limita a Navigator.push con MaterialPageRoute y al paso del modelo por constructor. La base de vistas reutiliza el andamiaje de una aplicación de catálogo previa —de ahí los nombres de dominio heredados en modelos y widgets— que se fue reetiquetando hacia el dominio de servicios; el flujo de acceso, en cambio, está escrito íntegramente para ServiciosYa.
Cinco tropiezos y sus salidas
Validar la experiencia de acceso completa antes de tener backend disponible, sin dejar el flujo roto ni obligar al evaluador a imaginarse los pasos siguientes.
El bloque de autenticación contra Firebase Auth y la comprobación posterior contra la colección de usuarios en Firestore quedaron escritos y comentados dentro del modal de inicio de sesión, con su manejo de errores por código (user-not-found, wrong-password) ya redactado. El botón navega directo al shell de pestañas, de modo que la aplicación se recorre entera y la conexión real se activa descomentando un bloque acotado.
Los formularios genéricos no sirven para identidad venezolana: el RIF y la cédula llevan letra separada del número, los móviles se identifican por prefijo de operadora y la fecha se escribe corrida, sin separadores.
Se construyeron campos compuestos en lugar de inputs planos. Un desplegable estrecho con borde azul sostiene la letra del documento o el prefijo, y el campo largo contiguo recibe solo los dígitos con su contador de longitud visible bajo la línea (0/9 para el documento, 0/8 para el teléfono y para la fecha DDMMYYYY), de forma que el usuario sabe cuánto le falta sin esperar a un mensaje de error.
Abrir el registro y el inicio de sesión como pantallas nuevas rompía la continuidad visual: la ilustración de bienvenida desaparecía y el usuario perdía la referencia de dónde estaba.
Ambos se resolvieron como bottom sheets con isScrollControlled activo, altura fija al 85 % de la pantalla, esquinas superiores de 20 px y tirador gris centrado del 35 % del ancho. La bienvenida permanece visible y atenuada detrás, y el padding inferior de la lista se ata a MediaQuery.viewInsets para que el teclado nunca tape el campo enfocado.
Mantener una identidad visual coherente sobre fotografías de fondo de brillo impredecible, donde el texto blanco unas veces se lee y otras se pierde.
AppColor define tres degradados reutilizables como capas de contraste: linearBlackBottom y linearBlackTop, que oscurecen el borde correspondiente hasta transparente, y bottomShadow, un cian al 20 % que se desvanece hacia arriba. Las tarjetas destacadas añaden además un BackdropFilter de 4 px con velo negro al 26 % bajo el texto, garantizando legibilidad sea cual sea la imagen.
El shell de pestañas reconstruye la pantalla activa en cada toque, porque resuelve la vista indexando una lista de widgets recién instanciada dentro del build.
Es la deuda técnica identificada más clara del prototipo: el estado de scroll y los controladores se pierden al cambiar de pestaña. La ruta natural es sustituir esa lista por un IndexedStack o un PageView con PageController, un cambio contenido en un único archivo gracias a que la barra inferior ya está desacoplada como componente independiente.
El prototipo en números y en color
11
pantallas Flutter
16
widgets reutilizables
5.550
líneas de Dart
23
iconos SVG propios
10
archivos tipográficos
6
plataformas configuradas
La paleta
linear-gradient(160deg, #416AAF 0%, #2BAFCB 100%)
Azul institucional sereno con acentos crema y un cian de aire caribeño. Confiable sin ser corporativo, cercano sin ser informal: la paleta de una libreta de contactos de barrio que decidió tomarse en serio.
lib/views/utils/AppColor.dart — primary y primarySoft = Color.fromARGB(255, 65, 106, 175) → #416AAF; secondary = #EDE5CC; primaryExtraSoft = #EEF4F4; el cian del degradado bottomShadow = Color.fromARGB(255, 43, 175, 203) → #2BAFCB. Fondo blanco de lib/main.dart (scaffoldBackgroundColor: Colors.white) y texto negro de los encabezados. El valor gradient combina primary con el cian de bottomShadow y es la única entrada compuesta por mí; el resto son valores literales del código.
En una página
ServiciosYa es una aplicación Flutter para Android, iOS y web cuyo mensaje de bienvenida lo dice todo: «Contrata u ofrece servicios. Optimiza tu tiempo y agiliza la contratación». Un mismo binario sirve a las dos caras del mercado: quien necesita un oficio resuelto y quien vive de resolverlo.
El repositorio público (commit inicial del 24 de septiembre de 2024) reúne 30 archivos Dart y 5.550 líneas: once pantallas, dieciséis widgets reutilizables, una capa de modelos con serialización desde JSON y un sistema de color centralizado en una sola clase estática.
El flujo de entrada está resuelto de punta a punta: pantalla de bienvenida a sangre completa con degradado, hoja modal de registro al 85 % de la altura, hoja modal de inicio de sesión y verificación por código de seis dígitos enviado al correo.
El registro está pensado para Venezuela y no para un formulario genérico: selector de letra de documento (V) junto al campo RIF/CI con contador 0/9, prefijo telefónico desplegable (412) con contador 0/8 y fecha en formato DDMMYYYY, también contada carácter a carácter.
Todo el aparato visual se apoya en recursos propios: 23 iconos SVG vectoriales (analítica, ventas, financiero, reporte de negocios, filtro, cámara, etiqueta de precio), 33 imágenes y dos familias tipográficas empaquetadas con diez pesos entre Inter y Open Sans.
Desarrollador móvil Flutter — diseño de interfaz, arquitectura de vistas, flujo de acceso y sistema de diseño
ServiciosYa
¿Quieres algo así para tu producto?
Un marketplace de oficios con doble rol, formularios pensados para el país y un sistema de diseño en un solo archivo. Si necesitas una app móvil con flujo de acceso serio y una interfaz que se sostenga sola, es terreno conocido.