FloatingActionButton y propiedades accent de ThemeData

Se eliminó la dependencia de FloatingActionButton (FAB) de Flutter con respecto a las propiedades accent de ThemeData.

Esto fue una pequeña parte del proyecto Material Theme System Updates.

Anteriormente, la propiedad ThemeData accentIconTheme solo la utilizaba FloatingActionButton para determinar el color por defecto del texto o de los iconos que aparecían dentro del botón.

FloatingActionButton también utilizaba la propiedad ThemeData accentTextTheme, sin embargo esta dependencia no estaba documentada y era innecesaria.

Ambas dependencias eran confusas. Por ejemplo, si uno configuraba el Theme's accentIconTheme para cambiar la apariencia de todos los botones de acción flotantes, era difícil saber qué otros componentes se verían afectados, o podrían verse afectados en el futuro.

La especificación de Material Design ya no incluye un color "accent". En su lugar, ahora se utiliza el color secondary de ColorScheme.

Anteriormente, las aplicaciones podían configurar el color del texto y de los iconos dentro de los FloatingActionButtons con la propiedad foregroundColor del Widget, o con el foregroundColor de FloatingActionButtonTheme. Si no se especificaba ninguna propiedad foregroundColor, el color de primer plano se predeterminaba al color de accentIconTheme.

Con este cambio, el comportamiento por defecto utiliza el color onSecondary del esquema de colores en su lugar.

Anteriormente, la propiedad accentIconTheme proporcionaba un valor por defecto para la propiedad FloatingActionButton's foregroundColor:

    final Color foregroundColor = this.foregroundColor
      ?? floatingActionButtonTheme.foregroundColor
      ?? theme.accentIconTheme.color // To be removed.
      ?? theme.colorScheme.onSecondary;

Las aplicaciones que configuran el accentIconTheme de su tema para configurar eficazmente el foregroundColor de todos los botones de acción flotantes, pueden obtener el mismo efecto configurando el foregroundColor de su tema floatingActionButtonTheme.

La propiedad FloatingActionButton's foregroundColor ahora se utiliza para configurar el textStyle de la clase RawMaterialButton creada por FloatingActionButton. Anteriormente, este estilo de texto se basaba en el estilo de botón de ThemeData.accentTextTheme:

// theme.accentTextTheme becomes theme.textTheme
final TextStyle textStyle = theme.accentTextTheme.button.copyWith(
  color: foregroundColor,
  letterSpacing: 1.2,
);

Excepto en los casos en que una aplicación haya configurado explícitamente el accentTextTheme para aprovechar esta dependencia no documentada, este uso de accentTextTheme es innecesario. Este cambio reemplaza este uso de accentTextTheme con textTheme.

Este cambio ocurrió en dos pasos:

1. Si el primer plano de un FloatingActionButton se establece en un color no predeterminado, ahora se imprime una advertencia.
2. La dependencia de accentIconTheme fue eliminada. Si aún no lo has hecho, migra tus aplicaciones según el patrón a continuación.

Para configurar el foregroundColor de FloatingActionButton para todos los FABs, puedes configurar el floatingActionButtonTheme de tu tema en lugar de su accentIconTheme.

Código antes de la migración:

MaterialApp(
  theme: ThemeData(
    accentIconTheme: IconThemeData(color: Colors.red),
  ),
)

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

MaterialApp(
  theme: ThemeData(
    floatingActionButtonTheme: FloatingActionButtonThemeData(
      foregroundColor: Colors.red,
    ),
  ),
)

Lanzado en la versión: 1.16.3
En versión estable: 1.17

Doc de diseño:

• Eliminar la dependencia de FAB del tema accent

Documentación de la API:

• FloatingActionButton
• ThemeData
• FloatingActionButtonThemeData

PRs relevantes:

• Paso 1 de 2 Advertir sobre la dependencia de FloatingActionButton de Flutter con respecto a las propiedades accent de ThemeData
• Paso 2 de 2 Eliminar la dependencia de FloatingActionButton de Flutter con respecto a las propiedades accent de ThemeData

Otros:

• Actualizaciones del sistema de temas de Material