Un punto de configuración
En una app nueva creaAppIsselController extends IsselAppController en lib/src/issel/presentation/controllers/app_issel_controller.dart. Su constructor establece un IsselAppConfig explícito con título, variantes clara/oscura y modo inicial. La primera app incluye el archivo completo y una fachada configure(...) para actualizarlo durante la ejecución.
IsselAppController mantiene una instancia estable de .theme y otra de .navigation. La raíz escucha al controlador con AnimatedBuilder y construye MaterialApp con:
dispose. No construyas controladores nuevos dentro de build ni sustituyas tema/navegación para cambiar un color. updateConfig(config.copyWith(...)) aplica cambios y mantiene esas identidades. Cambiar el tema desde .theme también sincroniza .config.
Configuraciones disponibles
Todos estos valores se pueden copiar con
copyWith. Son configuraciones inmutables; lo mutable es la configuración efectiva que conserva y actualiza el controlador.
Colores predeterminados
Éstos son los defaults del código revisado, no colores que debas repartir por widgets.
colorScheme parte de ColorScheme.fromSeed y sobreescribe los roles configurados. Al personalizar comprueba pares fondo/texto, especialmente roles cuyo contraste no hayas utilizado antes.
Alternar superficies
En el contrato visual de la skill,surfaceContainer comparte color con el fondo del Scaffold. La profundidad surge al alternar las dos superficies. Una capa surfaceContainer directamente sobre el Scaffold se funde con él; dos capas consecutivas surface tampoco contrastan.
Por ejemplo, dentro de una tarjeta principal surface:
scaffoldBackgroundColor, surface y surfaceContainer; la skill revisada no introduce surfaceContainerHighest ni otras variantes. Utiliza primary/onPrimary para selección y acciones, onSurface para contenido y outline para información auxiliar.
El constructor de la paleta permite colores arbitrarios, por lo que técnicamente puedes separar fondo y surfaceContainer. Al trabajar con esta skill, conserva su contrato de dos superficies y modifica ambos roles juntos si cambias el fondo.
Cambiar la marca y el fondo
Modo y edición de paletas
ThemeMode.system selecciona el brillo del sistema; light y dark fuerzan una variante. IsselThemeSelector(controller: app.theme) muestra las tres opciones, actualiza el controlador y después llama onChanged. La persistencia de esa selección pertenece a la app.
La regla de edición compartida de la skill es una política para tu fachada, no un comportamiento automático de IsselThemeController:
Parte de cada paleta y cambia sólo el rol editado; conserva su
brightness y los demás colores. La fachada de la primera app implementa setPrimaryForCurrentMode y setTextScaleForCurrentMode siguiendo ese criterio. theme.updateLightColors por sí mismo cambia únicamente la variante clara, incluso si el modo es sistema.
Tipografía
Todas las alturas parten de
1.0 y fontSizeScale de 1.0. Los labels reciben el color outline; los demás textos utilizan onSurface. Puedes aumentar interlineado o escala sin reemplazar la paleta:
fontFamily exige registrar o proporcionar la fuente en la app; el paquete no incluye fuentes descargables. Los copyWith que usan ?? conservan la familia si reciben null; para quitarla, crea un IsselTextThemeConfig nuevo manteniendo los otros valores necesarios.
Formas, espaciado y encabezados
La mayoría de controles fijan radios de10; la imagen utiliza 18, el pane 16 y las acciones compactas 6. IsselThemeConfig.borderRadius afecta a list tiles y cardBorderRadius a cards Material. Cambiarlos no modifica los radios fijos de todos los widgets Issel.
Los controles de una línea suelen medir 50, y botón/texto 60. Utiliza separación consistente —por ejemplo 12 entre campos y 20–24 entre secciones—, ajustándola a la tarea. Un encabezado de título y descripción se resuelve con texto y espacio; añade iconos cuando comuniquen acción, estado o categoría útil. Si AppBar o breadcrumbs ya identifican la tarea, evita repetir ese título.
En una composición amplia, alinea las alturas de tarjetas hermanas con IntrinsicHeight y CrossAxisAlignment.stretch o restricciones equivalentes. Al apilarlas deja altura natural. Los componentes reutilizables incluyen una página que centra contenido breve en escritorio y permite desplazamiento en móvil sin contar dos veces el padding vertical.