Capítulo 55 — Tarjeta de perfil

Nivel: intermedio Duración estimada: 8 h Requisitos previos: PARTE 1A (capítulos 01 a 18) y PARTE 1B (capítulos 43 a 54) Lo que sabrás hacer al final: construir desde cero un componente de interfaz cuidado, configurable y reutilizable, mostrarlo en una lista, adaptarlo al modo oscuro y a la tableta, y abrir una pantalla de detalle al hacer clic.

55.0 — Objetivos del capítulo

Al final de este capítulo, serás capaz de:

• leer un pliego de condiciones y traducirlo en una lista de pasos técnicos;
• crear un proyecto Flutter limpio y organizar en él tus archivos por función;
• definir un tema claro y un tema oscuro coherentes con ColorScheme.fromSeed();
• escribir una clase modelo en Dart puro, sin ninguna dependencia de Flutter;
• mostrar un avatar sin ningún archivo de imagen, a partir de las iniciales de un nombre;
• dibujar un banner con un degradado lineal;
• superponer un avatar sobre un banner con Stack y Positioned;
• alinear tres estadísticas con separadores verticales que tengan la altura correcta;
• mostrar una lista de insignias que salta de línea automáticamente con Wrap;
• mostrar una barra de progreso de nivel con LinearProgressIndicator;
• colocar una fila de botones de acción que nunca se desborde;
• dividir un build() grande en pequeños widgets con nombre y reutilizables;
• hacer configurable un widget con campos final y callbacks (VoidCallback);
• mostrar una lista de perfiles con ListView.builder;
• cambiar toda la aplicación al modo oscuro desde la AppBar;
• cambiar de diseño a partir de cierto ancho con LayoutBuilder;
• abrir una pantalla de detalle al hacer clic con Navigator.push y animar la transición con Hero;
• reconocer y corregir los errores de diseño más frecuentes en este tipo de pantalla.