Widgets animados en Flutter

Las animaciones se consideran un trabajo duro y lleva tiempo aprenderlas. Flutter lo hizo fácil con sus paquetes. Para animar los widgets sin mucho esfuerzo, podemos envolverlos dentro de diferentes widgets animados definidos en el paquete animate_do. En este artículo, veremos cómo con el paquete animate_do podemos animar widgets fácilmente y mejorar la experiencia del usuario.

Agregar la dependencia

En el archivo pubspec.yaml , agregue la dependencia animate_do en la sección de dependencias. Ejecute pub get para instalar esta dependencia o presione Ctrl + S en Windows.

Importar la dependencia

En main.dart, importe la dependencia de la siguiente manera:

import 'package:animate_do/animate_do.dart';

Implementación

En el paquete animate_do, hay diferentes widgets animados disponibles que podemos usar. Algunos de ellos son – 

• Animaciones de aparición gradual
• Animaciones de fundido de salida
• Animaciones de rebote
• Animaciones ElasticIn
• Animaciones SlideIns
• Animaciones FlipIn

Las propiedades de todos estos widgets animados son las mismas. Las propiedades son – 

dynamic key,
required Widget child,
Duration duration = const Duration(milliseconds: 800),
Duration delay = const Duration(milliseconds: 0),
dynamic Function(AnimationController)? controller,
bool manualTrigger = false,
bool animate = true,
double from = 100,

Antes de pasar a los widgets animados, creemos un widget común que le pasaremos a cada widget animado como niño. Aquí, estamos creando un StatelessWidget NewContainer que devuelve un contenedor de color verde.

class NewContainer extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container(height: 60, width: 60, color: Colors.green);
  }
}

Profundicemos ahora en ejemplos de diferentes animaciones.

Animación de rebote

El widget animado BounceIn implica el rebote del widget secundario. El widget de rebote se puede rebotar hacia abajo, arriba, izquierda o derecha. Para rebotar hacia abajo use el widget BounceInDown, para subir use BounceInUp. Del mismo modo para otras direcciones.

BounceInUp(child: NewContainer(), duration: Duration(seconds: 4)),
BounceInDown(child: NewContainer(), duration: Duration(seconds: 4)),
BounceInUp(child: NewContainer(), duration: Duration(seconds: 4)),
BounceInDown(child: NewContainer(), duration: Duration(seconds: 4))

Producción:

Animaciones que se desvanecen

El widget animado FadeIn también incluye widgets animados que se desvanecen en cuatro direcciones: arriba, abajo, izquierda y derecha. En el siguiente ejemplo, estamos creando animaciones de desvanecimiento simples que se desvanecen en cuatro direcciones diferentes.

FadeInLeft(duration: Duration(seconds: 4), child: NewContainer()),
FadeInUp(duration: Duration(seconds: 4), child: NewContainer()),
FadeInDown(duration: Duration(seconds: 4), child: NewContainer()),
FadeInRight(duration: Duration(seconds: 4), child: NewContainer()),

Producción:

Animaciones deslizantes

Las animaciones deslizantes también se pueden realizar en cuatro direcciones: arriba, derecha, abajo o izquierda. En el siguiente ejemplo, solo estamos creando animaciones de deslizamiento hacia la izquierda. Estamos retrasando la animación de cada widget animado para que aparezca en una secuencia en una pantalla. Para una mejor visualización, vea la salida.

SlideInLeft(
                delay: Duration(seconds: 5),
                duration: Duration(seconds: 4),
                child: NewContainer()),
 SlideInLeft(
                delay: Duration(seconds: 4),
                duration: Duration(seconds: 4),
                child: NewContainer()),
SlideInLeft(
                delay: Duration(seconds: 3),
                duration: Duration(seconds: 4),
                child: NewContainer()),
SlideInLeft(duration: Duration(seconds: 4), 
            child: NewContainer())

Producción:

Animaciones de buscador de atención

Hay algunos widgets animados más disponibles como swing, spin, widget de baile, etc. Si queremos que la animación sea para siempre, establecemos la propiedad infinite del widget animado en verdadero.

Swing(child: NewContainer(),infinite: true),
Bounce(child: NewContainer(), infinite: true),
Dance(child: NewContainer(), infinite: true),
Roulette(child: NewContainer(), infinite: true),
Spin(child: NewContainer(), infinite: true)

Producción:

Código de ejemplo completo

import 'package:flutter/material.dart';
import 'package:animate_do/animate_do.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Widgets',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksForGeeks"),
        centerTitle: true
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            FadeOutLeft(duration: Duration(seconds: 4), child: NewContainer()),
            BounceInUp(child: NewContainer(), duration: Duration(seconds: 4)),
            Swing(
              child: NewContainer(),
              infinite: true,
            ),
            Bounce(child: NewContainer(), infinite: true),
            Dance(child: NewContainer(), infinite: true),
            Roulette(child: NewContainer(), infinite: true),
            Spin(child: NewContainer(), infinite: true),
            SlideInLeft(duration: Duration(seconds: 4), child: NewContainer())
          ],
        ),
      ),
    );
  }
}
  
class NewContainer extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container(height: 60, width: 60, color: Colors.green);
  }
}

Producción: