ListTile reporta un error en debug cuando está envuelto en un widget coloreado

Cuando un widget con un color de fondo no transparente, como un Container o un ColoredBox que define color, se encuentra entre un ListTile y su ancestro Material más cercano, el framework ahora reporta un error.

ListTile dibuja su color de fondo y los efectos de salpicadura de tinta (ink splashes) en el ancestro Material más cercano. Cuando un widget con un color de fondo opaco se coloca entre el ListTile y su ancestro Material, oculta estos efectos visuales, haciéndolos invisibles para el usuario.

Para evitar que introduzcas accidentalmente este error y te preguntes por qué no se muestran los efectos de fondo o de salpicadura de tinta en el ListTile, el framework ahora reporta un error de aserción durante el desarrollo.

Si tu código tiene un widget de color intermedio entre un ListTile y un widget Material, ahora verás un error similar a este:

ListTile background color or ink splashes may be invisible.
The ListTile is wrapped in a Container that has a background color.
Because ListTile paints its background and ink splashes on
the nearest Material ancestor, this Container will hide those effects.
To fix this, wrap the ListTile in its own Material widget, or
remove the background color from the intermediate Container.

Para solucionar el error, elimina el color de fondo del widget intermedio o envuelve el ListTile en su propio widget Material.

Código antes de la migración:

// The colored Container hides the ink splashes from the ListTile.
Material(
  child: Container(
    color: Colors.pink,
    child: ListTile(
      title: const Text('Title'),
      onTap: () {},
    ),
  ),
)

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

// Use a Material widget directly for the background color.
Material(
  color: Colors.pink,
  child: Container(
    child: ListTile(
      title: const Text('Title'),
      onTap: () {},
    ),
  ),
)

Como alternativa, envuelve el ListTile en su propio widget Material:

Container(
  color: Colors.blue,
  child: Material(
    type: MaterialType.transparency,
    child: ListTile(
      title: const Text('Title'),
      onTap: () {},
    ),
  ),
)

Introducido en la versión: 3.43.0-0.1.pre
En la versión estable: 3.44

Documentación de la API:

• ListTile
• Material

Issues relevantes:

• ListTile.selectedTileColor no es visible cuando el Container padre tiene un color de fondo explícito

PRs relevantes:

• Añadir advertencia cuando hay un widget con color entre Material y ListTile