Vestíbulo
ARTLEX
El control de tu negocio en la palma de tu mano
Desarrollo móvil y diseño de interfaz (proyecto individual)
De la libreta del mostrador a la pantalla
Dos párrafos como los que preceden a cualquier exposición: qué había antes y qué se decidió construir.
Antes de la obra
Papel, hojas sueltas y memoria
Un comercio pequeño suele registrar ventas, costos y existencias en papel o en hojas sueltas. No hay una vista rápida de qué producto se mueve, cuál deja margen ni cuánto se gastó, y toda la información vive fuera del teléfono que el dueño lleva encima todo el día.
La obra
Cinco pestañas y una ficha
Artlex traduce esa libreta a una app móvil: una portada de catálogo con los productos más vendidos y los de alto rendimiento, una barra inferior flotante que separa Analítica, Ventas, Gastos y Menú, buscador con filtros por antigüedad y popularidad, y una ficha de producto a pantalla completa con imagen, métricas y pestañas de composición y reseñas. Está resuelto como prototipo de interfaz sobre datos locales, lo que permite validar el recorrido completo antes de conectar un backend.
Lo que cuelga de la pared
Capturas y grabación tomadas del dispositivo. Cada pieza cuelga de su cable y lleva su cartela al lado.
Bienvenida
Pantalla de bienvenida: logotipo circular de Artlex sobre azul noche, titular 'Gestiona tu Negocio' y los botones ¡Registrate! e Iniciar Sesion.
Flutter · 2024 · Dart
Inicio (catálogo del negocio)
Portada de la app: cabecera azul con el rótulo ARTLEX y foto de perfil, buscador con botón de filtros crema, carrusel de 'Productos más vendidos' con Arroz Mary y Harina P.A.N., y barra inferior flotante de cinco iconos.
Flutter · 2024 · Dart
Recorrido en dispositivo
Recorrido en vídeo por la aplicación en un dispositivo Android: acceso, portada, exploración y ficha de producto.
Android · captura de pantalla en vídeo
Cinco decisiones que sostienen la app
Cinco pestañas para todo el negocio
PageSwitcher mantiene un índice y conmuta entre Inicio, Analítica, Ventas, Gastos y Menú sobre una barra inferior flotante con esquinas redondeadas de 20 px e iconos SVG que cambian de estado al seleccionarse.
Catálogo real de bodega venezolana
Las tarjetas destacadas se ilustran con productos reales fotografiados (Harina P.A.N., Arroz Mary, azúcar, mayonesa, snacks), no con imágenes de banco genéricas.
Ficha de producto con encabezado que reacciona al scroll
La pantalla de detalle nace con AppBar transparente sobre la foto y, pasados 2 píxeles de desplazamiento, un AnimatedContainer de 200 ms la vuelve azul sólido; debajo, tres pestañas en un IndexedStack.
Sistema visual centralizado
Un único AppColor concentra color primario, secundario crema y tres gradientes lineales reutilizados en portadas, sombras inferiores y superposiciones de imagen; las tipografías Inter y Open Sans se empaquetan con diez pesos.
Un solo código, seis plataformas
El proyecto Flutter conserva los targets de Android, iOS, web, macOS, Linux y Windows, con manifiesto web e iconos maskable ya generados.
Las cinco pantallas, reconstruidas
Maquetas dibujadas en HTML y CSS a partir de las medidas reales del proyecto Flutter: cabecera de 245 px, tarjetas de 180 × 220, franja de pestañas crema y barra flotante de 20 px de radio.
ARTLEX
Gestiona tu Negocio
El control de tu negocio en la palma de tu mano.
Al continuar aceptas nuestros Terminos de Servicios y nuestras Políticas de Privacidad.
Bienvenida
Fondo a sangre en azul noche con el logotipo circular flotando y la marca en versalitas anchas. Abajo, dos botones de 60 px: relleno azul con texto crema para registrarse, contorno crema para entrar. Cualquiera de los dos levanta un modal blanco que cubre el 85 % de la pantalla.
Acceso · modales al 85 % · Flutter · 2024
Harina de maíz
P.A.N.
Arroz blanco
MARY
Azúcar
MONTALBÁN
Productos de alto rendimiento.
MONTALBÁN
Azúcar
MAVESA
Mayonesa
CHEESE TRIS
Snack
Inicio (catálogo del negocio)
Cabecera azul de 245 px con la marca y el avatar, buscador falso con botón de filtros crema y tres bandas: los más vendidos en tarjetas de 180 × 220 con cartela desenfocada, los de alto rendimiento y los vendidos recientemente. La barra inferior flota sobre un degradado cian.
Portada · cinco pestañas · Flutter · 2024
resto de la sala · arrastra para recorrerla
Harina de maíz precocida P.A.N.
El producto que más rota del anaquel. Margen del 18 % sobre el costo de reposición y una salida media de seis bolsas por día en temporada alta.
Reseña destacada
Se vende sola, hay que pedir doble los lunes.
Ficha de producto
Imagen de 280 px bajo un encabezado transparente que se vuelve azul en cuanto el scroll pasa de 2 píxeles. Debajo, bloque azul con métricas y descripción, franja crema de tres pestañas y el contenido colgando de un IndexedStack.
Detalle · IndexedStack
Arroz Mary · 1 kg
También te puede interesar reponer.
MONTALBÁN
Azúcar
MAVESA
Mayonesa
CHEESE TRIS
Snack
Explorar por categorías
Bloque azul de 245 px con seis categorías en mosaico separadas 16 px, tarjeta destacada a todo el ancho sobre blanco y un carril de recomendaciones idéntico al de la portada.
Descubrimiento · Wrap de 6
Correo
Nombre Completo
Tipo de Suscripción
Tiempo de Suscripción
Mi perfil
Avatar de 130 px sobre la cabecera azul con la fila para cambiar la foto, y cuatro fichas de datos sobre blanco. La del tipo de suscripción se resalta en crema para marcar el plan premium.
Cuenta · plan premium
Las maquetas reproducen la interfaz real; los datos que muestran son de ejemplo.
Inventario de la exposición
Cada línea es una pieza montada y navegable dentro del prototipo.
Técnica y materiales
El equivalente al cartel que indica soporte, medidas y año, pero en dependencias reales del pubspec.
Framework
Dependencias
Calidad y pruebas
Tipografía y recursos
Plataformas
Cómo está montada por dentro
models/core
Recipe · Ingridient · TutorialStep · Review
4 entidades con fromJson y toMap
models/helper
RecipeHelper
7 colecciones estáticas tipadas
views/
screens · widgets · utils
13 pantallas, 16 widgets, AppColor
Arquitectura MVC ligera en tres carpetas dentro de lib/. models/core define las cuatro entidades de dominio (Recipe, Ingridient, TutorialStep y Review) con factorías fromJson y toMap, de modo que el modelo ya está preparado para deserializar desde una API. models/helper concentra RecipeHelper, una capa de datos estática de casi 2.500 líneas que mapea listas crudas a objetos tipados y expone siete colecciones nombradas (destacados, recomendados, recién vendidos, populares, resultados de búsqueda y guardados). views/ se divide en screens (13 pantallas, una de ellas en el subdirectorio auth), widgets (13 componentes más 3 modales) y utils, donde AppColor centraliza toda la paleta y los gradientes. La navegación es imperativa con MaterialPageRoute, sin router declarativo: main.dart arranca en WelcomePage, los modales de acceso hacen pushReplacement hacia PageSwitcher, y este mantiene el estado del índice para intercambiar la pantalla activa bajo una barra inferior personalizada con extendBody.
Bocetos y correcciones
Cinco vitrinas horizontales: a la izquierda el problema tal como apareció, a la derecha lo que se montó para resolverlo.
boceto 01
El producto giró desde una app de recetas hacia gestión de negocio, pero las entidades y buena parte del contenido semilla ya estaban escritas.
montaje final
Se conservó el modelo Recipe reutilizándolo como ficha de producto (título, foto, dos métricas y descripción) y se reemplazaron las fotos por productos reales de bodega, cambiando primero los textos de interfaz al español. La deuda queda visible y acotada: los títulos del dataset semilla siguen en inglés mientras la interfaz ya está traducida.
boceto 02
La ficha de producto necesita un encabezado invisible sobre la foto, pero legible en cuanto el usuario baja.
montaje final
Un ScrollController escucha la posición y, al superar 2 píxeles, cambia el color del AppBar dentro de un AnimatedContainer de 200 ms, con extendBodyBehindAppBar para que la imagen ocupe el área bajo la barra de estado.
boceto 03
Una barra de navegación flotante y redondeada deja ver el contenido pasando por debajo y se pierde el contraste.
montaje final
PageSwitcher usa extendBody y superpone un BottomGradientWidget de 150 px con un degradado cian que se desvanece hacia arriba, de manera que el contenido se atenúa justo detrás de la barra sin recortar el scroll.
boceto 04
Cada icono de la barra inferior necesita estado activo e inactivo, y duplicar archivos multiplicaría los recursos.
montaje final
Los iconos se cargan como SVG con flutter_svg y se tiñen en tiempo de ejecución con el color primario o gris según el índice seleccionado, reservando los archivos duplicados solo para los dos iconos con relleno propio.
boceto 05
Sin backend disponible, las pantallas corrían el riesgo de llenarse de datos incrustados y volverse imposibles de conectar después.
montaje final
Toda la información vive en RecipeHelper como colecciones estáticas tipadas que las vistas consumen por nombre; las pantallas nunca ven un mapa crudo, así que migrar a una fuente remota implica sustituir el helper y no reescribir la interfaz.
La obra en números
13
pantallas Flutter
16
widgets reutilizables
5.560
líneas de Dart
5
pestañas de navegación
6
plataformas objetivo
23
iconos SVG propios
Los colores de la exposición
Azul noche corporativo con un destello cian tecnológico y contrapunto crema cálido: serio y ordenado como una hoja de cuentas, pero con el brillo del logotipo circular que da identidad de marca.
primary
#416AAF
secondary
#EDE5CC
accent
#2BAFCB
bg
#03112C
surface
#0E2B57
text
#F8F8F8
nota del comisario
Artlex es una aplicación Flutter para que un comercio pequeño lleve en el teléfono lo que normalmente vive en un cuaderno: qué productos se venden, cuáles rinden y qué gastos los acompañan.
La app arranca en una pantalla de bienvenida sobre fondo azul noche con el logotipo circular de Artlex, y entra al producto por modales deslizantes de registro e inicio de sesión.
Dentro, un conmutador de cinco pestañas (Inicio, Analítica, Ventas, Gastos y Menú) reparte el catálogo de productos, la exploración por categorías y la ficha de detalle con pestañas de ingredientes, tutoriales y reseñas.
Todo el copy de la aplicación está escrito en español y la interfaz se apoya en un sistema propio de 16 widgets reutilizables (tarjetas, tiles, barra inferior flotante, modales) sobre una paleta declarada en un único archivo AppColor.
Los datos provienen de un helper estático en Dart, de modo que la capa visual está completa y aislada de cualquier backend: sustituir la fuente de datos no obliga a tocar las pantallas.
Dos puertas al final del pasillo
Artlex
¿Quieres algo así para tu producto?
Artlex es una interfaz completa levantada sobre datos locales: sistema de color propio, widgets reutilizables y un recorrido navegable de punta a punta. Si necesitas validar un producto móvil antes de invertir en backend, éste es exactamente el trabajo.