Component · Stepper / Progress

Stepper / Progress

Indicador de progreso para el flujo de registro + KYC de MiCapi. Le dice al usuario en qué paso está y cuántos faltan, para reducir abandono. Dos variantes: barra segmentada (recomendada en móvil) y dots numerados (flujos cortos). No es interactivo — el usuario no salta pasos tocándolo.

2 variantes 6 pasos · onboarding KYC no interactivo
Variante A · barra segmentada · recomendada móvil

Una fila de segmentos (uno por paso), gap pequeño, track de 4dp con esquinas pill. Ahorra espacio horizontal — no se satura con 6 pasos a 360dp.

En contexto · paso 3 de 6
Paso 3 de 6Identidad
Verifica tu identidad
Toma una foto de tu cédula por ambos lados. Verificamos por exigencia de la Resolución UIAF 314/2021.

Anatomía

  1. Segmento completadoRelleno sólido primary-500. Un segmento por cada paso ya superado.
  2. Segmento actualRelleno parcial con animación de llenado sutil — comunica "estás aquí, en progreso".
  3. Segmento futuroTrack neutral-200 vacío. Lo que falta.
  4. Etiqueta"Paso 3 de 6" en mono + nombre del paso. Da contexto numérico y semántico.
  5. TrackAltura 4dp, esquinas pill, gap de 4dp entre segmentos.
  6. AvanceEl segmento se llena con duration-default (200ms) + ease-standard al pasar al siguiente paso.
Variante B · dots numerados · flujos cortos (3–4 pasos)

Círculos numerados conectados por líneas. Más expresiva pero ocupa más ancho — reservar para flujos de 3 a 4 pasos.

En contexto · paso 2 de 4
Registro
2
Verificación
3
Datos
4
Listo
Confirma tu correo
Te enviamos un código de 6 dígitos a tu correo registrado.

Anatomía

  1. Dot completadoCírculo primary-500 con check blanco.
  2. Dot actualCírculo primary-500 con número + halo del focus-ring para destacarlo.
  3. Dot futuroCírculo neutral-200 con número muted.
  4. Líneas conectorasEntre dots completados → primary-500; el resto neutral-200.
  5. Etiqueta por dotNombre corto bajo cada círculo; el actual resaltado en primary-700.
Estados de avance · variante segmentada

El mismo stepper de 6 pasos a lo largo del onboarding: inicio, mitad y final.

Paso 1 · inicio
Paso 1 de 6Registro
Primer paso activo, ninguno completado. El usuario recién empieza.
Paso 3 · mitad
Paso 3 de 6Identidad
Dos pasos completados, el tercero en progreso. Mitad del camino.
Paso 6 · final
Paso 6 de 6Confirmación
Cinco completados, último en progreso. Casi listo — momento de menor abandono.
Recomendación de uso

En el onboarding de 6 pasos de MiCapi, la barra segmentada gana. Los dots numerados se saturan a 360dp.

Segmentada para 6 pasos

Paso 3 de 6Identidad
  • Compacta: 6 segmentos caben holgados a 360dp.
  • Legible: el contexto numérico va en el texto, no en cada nodo.
  • Es el default del onboarding MiCapi.

Dots saturan a 6 pasos

2
3
4
5
6
sin espacio para etiquetas
  • Apretado: 6 círculos + líneas + labels no caben.
  • Las etiquetas se pierden o se truncan.
  • Reservar dots para flujos de 3–4 pasos.
Modo oscuro
Segmentada · dark
Paso 3 de 6Identidad
Verifica tu identidad
Toma una foto de tu cédula por ambos lados.
Dots · dark
Registro
2
Verificación
3
Datos
4
Listo
Confirma tu correo
Te enviamos un código de 6 dígitos.
Flutter notes

Implementación

Segmentada
Row de Expanded + Container (4dp, BorderRadius.circular(2)). Color por índice vs currentStep. El llenado actual con AnimatedFractionallySizedBox o TweenAnimationBuilder.
Dots
Row alternando nodos (CircleAvatar) y líneas (Expanded + Container 2dp). Check con Icon(Icons.check) en completados.
Avance
AnimatedContainer(duration: motionDefault, curve: Curves.fastOutSlowIn) al cambiar de paso. El cambio de color del segmento anima solo.
No interactivo
Sin GestureDetector ni onTap. Es puramente indicador; la navegación la controla el flujo (GoRouter / PageController).
Reduced motion
Con MediaQuery.disableAnimationsOf(context): el llenado aparece sin animación (Duration.zero). El estado final es idéntico.
Semántica
Semantics(label: "Paso 3 de 6, Identidad") para lectores de pantalla — el progreso debe ser accesible.