Ir al contenido

Guía de Flutter para novatos - Miguel Páramos

FAQ sobre Flutter pal que no tiene ni idea de Flutter | 2º DAM · PMDM

Qué hace exactamente colorSchemeSeed, qué pasa con useMaterial3: false y el color púrpura por defecto

Al configurar la apariencia de una aplicación en Flutter mediante ThemeData, dos parámetros cobran un protagonismo decisivo: colorSchemeSeed y useMaterial3. A menudo surgen dudas sobre el algoritmo generador de paletas, el motivo por el cual una aplicación recién creada adopta tonalidades púrpuras o violetas, y las implicaciones de desactivar Material 3.

colorSchemeSeed es el núcleo del sistema de diseño Material 3 (Material You) en Flutter. En las especificaciones clásicas (Material 2), configurar un tema exigía definir manualmente decenas de propiedades individuales (color primario, secundario, color de superficie, de botones, de tarjetas, textos, etc.).

Al indicar un color semilla, por ejemplo colorSchemeSeed: Colors.brown, un algoritmo matemático de armonía tonal genera de forma automática una paleta completa y coherente de más de 30 roles cromáticos, garantizando que los contrastes cumplan estrictamente los estándares internacionales de accesibilidad visual (WCAG):

  • primary: Color principal para elementos interactivos destacados.
  • onPrimary: Color de contraste óptimo para el texto o iconos que se sitúan sobre primary.
  • primaryContainer: Tono suave derivado de la semilla para fondos de tarjetas, chips o botones secundarios.
  • surface y outline: Tonos neutros calculados para fondos de pantalla, bordes y separadores.

2. ¿Por qué la aplicación adopta tonos violetas o púrpuras por defecto?

Sección titulada «2. ¿Por qué la aplicación adopta tonos violetas o púrpuras por defecto?»

Cuando en Flutter se activa useMaterial3: true sin especificar un colorSchemeSeed o colorScheme personalizado, el SDK utiliza como valor predeterminado el color insignia de la especificación Material 3 de Google: un tono púrpura/violeta profundo (Color(0xFF6750A4)). En cuanto se suministra un colorSchemeSeed propio, esa tonalidad violeta por defecto se reemplaza inmediatamente por la gama tonal correspondiente a tu marca.

3. ¿Qué ocurre si se establece useMaterial3: false?

Sección titulada «3. ¿Qué ocurre si se establece useMaterial3: false?»

Al declarar useMaterial3: false, Flutter desactiva las directrices modernas y regresa al comportamiento visual de Material Design 2 (2014-2021):

  • Sombras de elevación tradicionales: Los AppBar, diálogos y tarjetas vuelven a proyectar sombras oscuras pesadas mediante elevación física en lugar de la moderna elevación tonal por tinte.
  • Botón Flotante Circular: El FloatingActionButton regresa a su forma circular clásica en vez del formato redondeado casi cuadrado de Material 3.
  • Colores más rígidos: Se pierde la paleta tonal adaptativa y el soporte para temas dinámicos.
  • Obsolescencia: Material 2 está en proceso de retirada en Flutter; la recomendación oficial del equipo de ingeniería es mantener siempre useMaterial3: true.