Animar tu aplicación Flutter con el widget AnimatedContainer

¿Para qué sirve el widget AnimatedContainer en una aplicación Flutter?

El widget AnimatedContainer te permite agregar animaciones fluidas y personalizadas a tus aplicaciones. A diferencia de un simple Container, cuyas propiedades permanecen fijas, este widget permite animar cambios en propiedades como tamaño, color, bordes o decoración. Estas animaciones pueden implementarse fácilmente y hacen que la interfaz de usuario (UI) sea más dinámica y atractiva.

Por ejemplo, puedes usarlo para:

• Un botón que cambia de tamaño: Imagina un botón que se agranda cuando el usuario hace clic en él. El AnimatedContainer puede hacer que esta transición sea fluida y agradable visualmente.
• Tarjetas interactivas: Cuando un usuario selecciona una tarjeta, esta puede cambiar de color o borde para indicar la selección, mientras anima la transición.
• Transiciones de tema: Al cambiar de un modo claro a un modo oscuro, el AnimatedContainer puede hacer que el cambio de colores de los elementos sea más fluido.
• Animaciones de carga: Crea animaciones visuales atractivas para indicar un progreso o estado de carga.

En resumen, con AnimatedContainer, puedes enriquecer la experiencia del usuario manteniendo una implementación sencilla.

¿Cómo configurar un AnimatedContainer?

Para usar un AnimatedContainer, simplemente intégralo en tu árbol de widgets y proporciona las propiedades que deseas animar. Aquí tienes un ejemplo básico:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedContainerDemo(),
    );
  }
}

class AnimatedContainerDemo extends StatefulWidget {
  @override
  _AnimatedContainerDemoState createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  double _width = 100;
  double _height = 100;
  Color _color = Colors.blue;

  void _animateContainer() {
    setState(() {
      _width = _width == 100 ? 200 : 100;
      _height = _height == 100 ? 200 : 100;
      _color = _color == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedContainer Demo')),
      body: Center(
        child: GestureDetector(
          onTap: _animateContainer,
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            width: _width,
            height: _height,
            color: _color,
            curve: Curves.easeInOut,
          ),
        ),
      ),
    );
  }
}

En este ejemplo, el contenedor cambia de tamaño y color cuando lo tocas.

Los diferentes parámetros del widget AnimatedContainer

El widget AnimatedContainer tiene varios parámetros que permiten personalizar su forma y la duración de su animación. Aquí tienes una explicación detallada de cada parámetro, con ejemplos prácticos:

1. duration : Este parámetro es obligatorio y define la duración de la animación.

AnimatedContainer(
  duration: Duration(seconds: 2),
  width: 100,
  height: 100,
);

2. curve : Define la curva de animación para controlar cómo se desarrolla (lineal, acelerada, etc.).

AnimatedContainer(
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
  color: Colors.blue,
);

Lista de curvas soportadas por Flutter:

3. Propiedades animables

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _isExpanded ? 200 : 100,
  height: _isExpanded ? 200 : 100,
);

Tamaño: Puedes animar width y height para crear efectos de cambio de dimensiones.

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _isExpanded ? 200 : 100,
  height: _isExpanded ? 200 : 100,
);

Color: La propiedad color permite pasar de un color a otro de manera fluida.

AnimatedContainer(
  duration: Duration(seconds: 1),
  color: _isSelected ? Colors.red : Colors.blue,
);

Bordes: Las propiedades border y borderRadius permiten modificar los bordes y esquinas redondeadas.

AnimatedContainer(
  duration: Duration(seconds: 1),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 2),
    borderRadius: _isRounded ? BorderRadius.circular(20) : BorderRadius.zero,
  ),
);

Tipos de animaciones posibles con AnimatedContainer

Aunque el AnimatedContainer no tiene animaciones predefinidas, puedes crear muchos tipos de animaciones combinando sus propiedades.

1. Animaciones de tamaño: Cambia el ancho y/o alto para crear efectos de ampliación o reducción.

setState(() {
  _width = _width == 100 ? 200 : 100;
  _height = _height == 100 ? 200 : 100;
});

2. Animaciones de color: Modifica el color de fondo o del borde para crear transiciones visuales atractivas.

setState(() {
  _color = _color == Colors.blue ? Colors.red : Colors.blue;
});

3. Animaciones de bordes: Pasa de un borde redondeado a uno cuadrado o modifica el grosor del borde.

setState(() {
  _borderRadius = _borderRadius == BorderRadius.circular(0)
      ? BorderRadius.circular(20)
      : BorderRadius.circular(0);
});

4. Animaciones de decoración: Añade o elimina sombras, gradientes o imágenes de fondo.

setState(() {
  _decoration = BoxDecoration(
    gradient: _isGradient
        ? null
        : LinearGradient(colors: [Colors.blue, Colors.green]),
  );
  _isGradient = !_isGradient;
});

5. Combinación de animaciones: Combina varias animaciones para crear transiciones complejas.

setState(() {
  _width = _width == 100 ? 200 : 100;
  _color = _color == Colors.blue ? Colors.red : Colors.blue;
  _borderRadius = _borderRadius == BorderRadius.circular(0)
      ? BorderRadius.circular(20)
      : BorderRadius.circular(0);
});