Animaciones simples

Actualmente, el método Tile.build devuelve un Container para mostrar una letra. Cuando hitType cambia, por ejemplo de HitType.none a HitType.hit, el color de fondo del tile cambia instantáneamente. Por ejemplo, de blanco a verde en el caso de HitType.none a HitType.hit.

Como referencia, aquí está la implementación actual del Widget Tile:

class Tile extends StatelessWidget {
  const Tile(this.letter, this.hitType, {super.key});
​
  final String letter;
  final HitType hitType;
​
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      width: 60,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade300),
        color: switch (type) {
          HitType.hit => Colors.green,
          HitType.partial => Colors.yellow,
          HitType.miss => Colors.grey,
          _ => Colors.white,
        },
      ),
      child: Center(
        child: Text(
          letter.toUpperCase(),
          style: Theme.of(context).textTheme.titleLarge,
        ),
      ),
    );
  }
}

Para hacer que el cambio de color se anime suavemente, reemplaza el Widget Container por un AnimatedContainer.

Un AnimatedContainer es como un Container, pero anima automáticamente los cambios en sus propiedades durante una duración especificada. Cuando cambian propiedades como color, height, width, decoration o alignment, AnimatedContainer interpola entre los valores antiguos y nuevos, creando una transición suave.

Modifica tu Widget Tile de la siguiente manera:

class Tile extends StatelessWidget {
  const Tile(this.letter, this.hitType, {super.key});
​
  final String letter;
  final HitType hitType;
​
  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 500),
      height: 60,
      width: 60,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade300),
        color: switch (hitType) {
          HitType.hit => Colors.green,
          HitType.partial => Colors.yellow,
          HitType.miss => Colors.grey,
          _ => Colors.white,
        },
      ),
      child: Center(
        child: Text(
          letter.toUpperCase(),
          style: Theme.of(context).textTheme.titleLarge,
        ),
      ),
    );
  }
}

duration es una propiedad requerida que especifica cuánto tiempo debe tomar la animación. En este ejemplo, pasar Duration(milliseconds: 500) significa que la transición de color tomará medio segundo. Puedes también especificar segundos, minutos y muchas otras unidades de tiempo.

Ahora, cuando hitType cambia y el Widget Tile se reconstruye (porque se llamó a setState en GamePage), el color del tile se anima suavemente desde su color anterior al nuevo durante la duración especificada.

Para añadir un poco de personalización a una animación implícita, puedes pasarle una Curve diferente. Las diferentes curvas cambian la velocidad de la animación en diferentes puntos a lo largo de la animación.

Por ejemplo, la curva por defecto para las animaciones de Flutter es Curves.linear. Este gif muestra cómo se comporta la curva de animación:

Compara eso con Curve.bounceIn, otra curva común:

Para cambiar la Curve de esta animación, actualiza el código a lo siguiente:

class Tile extends StatelessWidget {
  const Tile(this.letter, this.hitType, {super.key});
​
  final String letter;
  final HitType hitType;
​
  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 500),
      curve: Curves.bounceIn, // NEW
      height: 60,
      width: 60,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade300),
        color: switch (hitType) {
          HitType.hit => Colors.green,
          HitType.partial => Colors.yellow,
          HitType.miss => Colors.grey,
          _ => Colors.white,
        },
      ),
      child: Center(
        child: Text(
          letter.toUpperCase(),
          style: Theme.of(context).textTheme.titleLarge,
        ),
      ),
    );
  }
}

El SDK de Flutter proporciona muchas curvas diferentes, así que siéntete libre de probarlas pasando diferentes tipos al parámetro curve.

Las animaciones implícitas como AnimatedContainer son potentes porque solo le dices al Widget cuál debería ser el nuevo estado, y este se encarga del "cómo" de la animación.

Para animaciones complejas y personalizadas, puedes escribir tus propios Widgets animados. Si tienes curiosidad, pruébalo en el tutorial de animaciones.