Animar las propiedades de un contenedor

La clase Container proporciona una forma conveniente de crear un Widget con propiedades específicas: ancho, alto, color de fondo, padding, bordes y más.

Las animaciones simples a menudo implican cambiar estas propiedades a lo largo del tiempo. Por ejemplo, es posible que desees animar el color de fondo de gris a verde para indicar que el usuario ha seleccionado un elemento.

Para animar estas propiedades, Flutter proporciona el Widget AnimatedContainer. Al igual que el Widget Container, AnimatedContainer te permite definir el ancho, alto, colores de fondo y más. Sin embargo, cuando el AnimatedContainer se reconstruye con nuevas propiedades, se anima automáticamente entre los valores antiguos y los nuevos. En Flutter, este tipo de animaciones se conocen como "animaciones implícitas".

Esta receta describe cómo usar un AnimatedContainer para animar el tamaño, el color de fondo y el radio del borde cuando el usuario toca un botón siguiendo los siguientes pasos:

1. Crear un StatefulWidget con propiedades por defecto.
2. Construir un AnimatedContainer usando las propiedades.
3. Iniciar la animación reconstruyendo con nuevas propiedades.

Para empezar, crea las clases StatefulWidget y State. Usa la clase State personalizada para definir las propiedades que cambian con el tiempo. En este ejemplo, eso incluye el ancho, alto, color y el radio del borde. También puedes definir el valor por defecto de cada propiedad.

Estas propiedades pertenecen a una clase State personalizada para que puedan actualizarse cuando el usuario toca un botón.

class AnimatedContainerApp extends StatefulWidget {
  const AnimatedContainerApp({super.key});
​
  @override
  State<AnimatedContainerApp> createState() => _AnimatedContainerAppState();
}
​
class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  // Define the various properties with default values. Update these properties
  // when the user taps a FloatingActionButton.
  double _width = 50;
  double _height = 50;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);
​
  @override
  Widget build(BuildContext context) {
    // Fill this out in the next steps.
  }
}

A continuación, construye el AnimatedContainer usando las propiedades definidas en el paso anterior. Además, proporciona una duración (duration) que defina cuánto tiempo debe durar la animación.

AnimatedContainer(
  // Use the properties stored in the State class.
  width: _width,
  height: _height,
  decoration: BoxDecoration(
    color: _color,
    borderRadius: _borderRadius,
  ),
  // Define how long the animation should take.
  duration: const Duration(seconds: 1),
  // Provide an optional curve to make the animation feel smoother.
  curve: Curves.fastOutSlowIn,
)

Finalmente, inicia la animación reconstruyendo el AnimatedContainer con las nuevas propiedades. ¿Cómo lanzar una reconstrucción? Usa el método setState().

Añade un botón a la aplicación. Cuando el usuario toque el botón, actualiza las propiedades con un nuevo ancho, alto, color de fondo y radio del borde dentro de una llamada a setState().

Una aplicación real normalmente realiza la transición entre valores fijos (por ejemplo, de un fondo gris a uno verde). Para esta aplicación, genera nuevos valores cada vez que el usuario toque el botón.

FloatingActionButton(
  // When the user taps the button
  onPressed: () {
    // Use setState to rebuild the widget with new values.
    setState(() {
      // Create a random number generator.
      final random = Random();
​
      // Generate a random width and height.
      _width = random.nextInt(300).toDouble();
      _height = random.nextInt(300).toDouble();
​
      // Generate a random color.
      _color = Color.fromRGBO(
        random.nextInt(256),
        random.nextInt(256),
        random.nextInt(256),
        1,
      );
​
      // Generate a random border radius.
      _borderRadius = BorderRadius.circular(
        random.nextInt(100).toDouble(),
      );
    });
  },
  child: const Icon(Icons.play_arrow),
)