Saltar al contenido principal

Migración de TextSelectionTheme

Las propiedades predeterminadas para la selección de texto están migrando a TextSelectionTheme.

Resumen

#

Las propiedades de ThemeData que controlaban el aspecto del texto seleccionado en los widgets de Material se han movido a su propio TextSelectionTheme. Estas propiedades incluyen cursorColor, textSelectionColor, y textSelectionHandleColor. Los valores predeterminados para estas propiedades también se han cambiado para coincidir con la especificación de Material Design.

Contexto

#

Como parte de las actualizaciones de Material Theme más amplias (en inglés, Material Theme Updates), hemos introducido un nuevo Text Selection Theme utilizado para especificar las propiedades del texto seleccionado en los widgets TextField y SelectableText. Estos reemplazan varias propiedades de nivel superior de ThemeData y actualizan sus valores predeterminados para coincidir con la especificación de Material Design. Este documento describe cómo las aplicaciones pueden migrar a esta nueva API.

Guía de migración

#

Si actualmente estás utilizando las siguientes propiedades de ThemeData, debes actualizarlas para usar las nuevas propiedades equivalentes en ThemeData.textSelectionTheme:

AntesDespués
ThemeData.cursorColorTextSelectionThemeData.cursorColor
ThemeData.textSelectionColor TextSelectionThemeData.selectionColor
ThemeData.textSelectionHandleColor TextSelectionThemeData.selectionHandleColor

Code before migration:

dart
ThemeData(
  cursorColor: Colors.red,
  textSelectionColor: Colors.green,
  textSelectionHandleColor: Colors.blue,
)

Code after migration:

dart
ThemeData(
  textSelectionTheme: TextSelectionThemeData(
    cursorColor: Colors.red,
    selectionColor: Colors.green,
    selectionHandleColor: Colors.blue,
  )
)

Default changes

Si no estabas usando estas propiedades explícitamente, pero dependías de los colores predeterminados anteriores utilizados para la selección de texto, puedes agregar un nuevo campo a tu ThemeData para que tu aplicación regrese a los valores predeterminados antiguos como se muestra:

dart
// Old defaults for a light theme
ThemeData(
  textSelectionTheme: TextSelectionThemeData(
    cursorColor: const Color.fromRGBO(66, 133, 244, 1.0),
    selectionColor: const Color(0xff90caf9),
    selectionHandleColor: const Color(0xff64b5f6),
  )
)
dart
// Old defaults for a dark theme
ThemeData(
  textSelectionTheme: TextSelectionThemeData(
    cursorColor: const Color.fromRGBO(66, 133, 244, 1.0),
    selectionColor: const Color(0xff64ffda),
    selectionHandleColor: const Color(0xff1de9b6),
  )
)

Si estás de acuerdo con los nuevos valores predeterminados, pero tienes pruebas de archivos golden que fallan, puedes actualizar tus archivos golden maestros utilizando el siguiente comando:

flutter test --update-goldens

Timeline

#

Llegó en la versión: 1.23.0-4.0.pre
En la versión estable: 2.0.0

Referencias

#

Documentación de la API:

PRs relevantes: