Actualización de tokens de Material 3 en Flutter

Los tokens de Material Design actualizaron el mapeo de 4 roles de color en modo claro para que sean más atractivos visualmente, al tiempo que retienen un contraste accesible. Las pruebas identificaron este cambio como no perjudicial (non-breaking) en Flutter, pero algunos desarrolladores podrían notar este pequeño cambio. La actualización afectó a las siguientes propiedades de color:

• onPrimaryContainer (Primary10 a Primary30)
• onSecondaryContainer (Secondary10 a Secondary30)
• onTertiaryContainer (Tertiary10 a Tertiary30)
• onErrorContainer (Error10 a Error30)

Los widgets que han estado utilizando estos roles como sus valores predeterminados podrían verse diferentes.

Además, los tokens de Material 3 actualizaron el color del borde de los widgets de chip desde ColorScheme.outline a ColorScheme.outlineVariant para mejorar la jerarquía visual entre chips y botones. Los chips (Chip, ActionChip, ChoiceChip, FilterChip e InputChip) que han estado utilizando los tokens de borde de chip podrían verse diferentes.

Las diferencias en los mapeos de los roles de color son pequeñas. Utiliza ColorScheme.copyWith para revertir a los colores predeterminados originales:

Código antes de la migración:

final ColorScheme colors = ThemeData().colorScheme;

Código después de la migración:

final ColorScheme colors = ThemeData().colorScheme.copyWith(
  onPrimaryContainer: const Color(0xFF21005D),
  onSecondaryContainer: const Color(0xFF1D192B),
  onTertiaryContainer: const Color(0xFF31111D),
  onErrorContainer: const Color(0xFF410E0B),
);

Después de aplicar la actualización de tokens, el color de borde predeterminado de los chips de M3 se ve más claro. Toma ActionChip como ejemplo:

Código antes de la migración:

final chip = ActionChip(
  label: const Text('action chip'),
  onPressed: () {},
);

Código después de la migración:

final chip = ChipTheme(
  data: ChipThemeData(
    side: BorderSide(
      color: Theme.of(context).colorScheme.outline
    ),
  ),
  child: ActionChip(
    label: const Text('action chip'),
    onPressed: () {}
  )
);

Introducido en la versión: 3.26.0-0.0.pre
En el lanzamiento estable: 3.27

Documentación de la API:

• ColorScheme
• ThemeData
• Chip

PRs relevantes:

• Actualizar tokens a v5.0.0
• Actualizar tokens a v6.1.0