Flutter: widget de contenedor animado

En Flutter, un contenedor es un widget simple con propiedades bien definidas como altura, ancho y color, etc. El widget AnimatedContainer es un widget contenedor simple con animaciones. Estos tipos de widgets se pueden animar modificando los valores de sus propiedades, que son las mismas que las del widget Contenedor. Este tipo de animación en Flutter se conoce como ‘Animación implícita’. Lo discutiremos en detalle en este artículo creando una aplicación simple con el widget AnimatedContainer.

Constructor de la clase AnimatedContainer:

AnimatedContainer(
{Key key,
AlignmentGeometry alignment,
EdgeInsetsGeometry padding,
Color color,
Decoration decoration,
Decoration foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
EdgeInsetsGeometry margin,
Matrix4 transform,
Widget child,
Curve curve: Curves.linear,
@required Duration duration,
VoidCallback onEnd}
)

Propiedades del widget AnimatedContainer:

• alineación:  Esta propiedad toma la clase AlignmentGeometry como el objeto. Controla la alineación del widget secundario con el contenedor.
• child: esta propiedad contiene un widget como objeto para mostrar dentro del AnimatedContainer.
• restricciones: la clase BoxConstraints es el objeto de esta propiedad. Aplica algunas restricciones adicionales al widget secundario en AnimatedContainer .
• decoración: esta propiedad toma la clase Decoración como el objeto para aplicar el color detrás del widget secundario.
• En primer planoDecoration: esta propiedad controla el color predeterminado del texto dentro de AnimatedContainer.
• margin: la propiedad margin contiene la clase EdgeInsetsGeometry como objeto. Agrega espacio vacío alrededor del widget.
• padding: esta propiedad también toma la clase EdgeInsetsGeometry como el objeto para agregar un espacio vacío dentro del AnimatedConatainer y el widget secundario.
• transformar:Esta propiedad toma Matrix4 como el objeto para aplicar la transformación de array antes de pintar el AnimatedContainer .

Siga los pasos a continuación para crear una aplicación con el widget AnimatedContainer:

• Cree un StatefulWidget y defina sus propiedades.
• Agregue un widget AnimatedContainer y defina sus propiedades.
• Cree animaciones alterando esas propiedades.

Vamos a discutirlos en detalle.

Creando un StatefulWidget:

Use la clase State personalizada para crear un StatefulWidget y defina sus propiedades como se muestra a continuación:

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}
 
class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  double _width = 55;
  double _height = 55;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(9);
 
  @override
  Widget build(BuildContext context) {
  }
}

Agregando el widget AnimatedContainer:

Agregue un widget AnimatedContainer con su propiedad de duración definida que determina cuánto tiempo se va a animar el contenedor como se muestra a continuación:

AnimatedContainer(
 
  width: _width,
  height: _height,
  decoration: BoxDecoration(
    color: _color,
    borderRadius: _borderRadius,
  ),
 
  duration: Duration(seconds: 1),
  curve: Curves.fastOutSlowIn,
);

Alterando las propiedades:

La reconstrucción y el cambio de las propiedades después del final de la duración de la propiedad especificada se realiza como se muestra a continuación:

FloatingActionButton(
  child: Icon(Icons.play_arrow),
  onPressed: () {
 
    setState(() {
      final random = Random();
 
      // random dimension generator
      _width = random.nextInt(300).toDouble();
      _height = random.nextInt(300).toDouble();
 
      // random color generator
      _color = Color.fromRGBO(
        random.nextInt(256),
        random.nextInt(256),
        random.nextInt(256),
        1,
      );
      _borderRadius =
          BorderRadius.circular(random.nextInt(100).toDouble());
    });
  },
);

Código fuente completo:

import 'dart:math';
 
import 'package:flutter/material.dart';
 
void main() => runApp(AnimatedContainerApp());
 
class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}
 
class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
 
  double _width = 70;
  double _height = 70;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(10);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: AnimatedContainer(
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.play_arrow),
          backgroundColor: Colors.green,
          onPressed: () {
            setState(() {
              // random generator
              final random = Random();
 
              // random dimension generator
              _width = random.nextInt(500).toDouble();
              _height = random.nextInt(500).toDouble();
 
              // random color generator
              _color = Color.fromRGBO(
                random.nextInt(300),
                random.nextInt(300),
                random.nextInt(300),
                1,
              );
 
              // random radius generator
              _borderRadius =
                  BorderRadius.circular(random.nextInt(100).toDouble());
            });
          },
        ),
      ),
    );
  }
}

Producción: