Flutter – Widget de fundido cruzado animado

El widget AnimatedCrossFade crea una transición de fundido entre dos widgets cuando un widget se reemplaza por otro. Se usa cuando necesita dar un tipo de transición gradual entre dos widgets. Admite cualquier tipo de Widget de Flutter como texto, imágenes, íconos y cualquier cosa que se extienda desde el widget en Flutter. Además, le permite cambiar la animación y la duración de la animación. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo.

 

Constructor

AnimatedCrossFade
    ({Key? key, 
    required Widget firstChild, 
    required Widget secondChild, 
    Curve firstCurve = Curves.linear, 
    Curve secondCurve = Curves.linear, 
    Curve sizeCurve = Curves.linear, 
    AlignmentGeometry alignment = Alignment.topCenter, 
    required CrossFadeState crossFadeState, 
    required Duration duration, 
    Duration? reverseDuration, 
    AnimatedCrossFadeBuilder layoutBuilder = defaultLayoutBuilder
})

Propiedades

• alineación: cómo se deben alinear los niños mientras se anima el tamaño.  
• crossFadeState: El elemento secundario que se mostrará cuando se haya completado la animación.
• duración: La duración de toda la animación orquestada.
• firstChild: el elemento secundario que es visible cuando crossFadeState es CrossFadeState.showFirst. Se desvanece cuando se realiza la transición de crossFadeState de CrossFadeState.showFirst a CrossFadeState.showSecond y viceversa.
• firstCurve: La curva de fundido del primer hijo.
• hashCode: El código hash para este objeto. 
• clave: Controla cómo un widget reemplaza a otro widget en el árbol.
  layoutBuilder Un constructor que posiciona los widgets firstChild y secondChild. 
• reverseDuration: la duración de toda la animación orquestada cuando se ejecuta en reversa. 
• runtimeType: una representación del tipo de tiempo de ejecución del objeto.
• secondChild: el elemento secundario que es visible cuando crossFadeState es CrossFadeState.showSecond. Se desvanece cuando se realiza la transición de crossFadeState de CrossFadeState.showFirst a CrossFadeState.showSecond y viceversa.
• secondCurve: La curva de fundido del segundo hijo.
• sizeCurve: La curva de la animación entre los dos tamaños de los niños. 

Nota: firstChild y secondChild tienen palabras clave obligatorias aplicadas, lo que significa que estos parámetros son de uso obligatorio.

Ejemplo

El archivo main.dart .

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  // This widget is the root
  // of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GFG(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class GFG extends StatefulWidget {
  const GFG({Key? key}) : super(key: key);
 
  @override
  State<GFG> createState() => _GFGState();
}
 
class _GFGState extends State<GFG> with TickerProviderStateMixin {
  late AnimationController _controller;
  bool _bool = true;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        actions: [
          // Creating a button to
          // switch between two widgets
          TextButton(
            onPressed: () {
              setState(
                () {
                  _bool = !_bool;
                },
              );
            },
            child: Text("Switch", style: TextStyle(color: Colors.white)),
          ),
        ],
      ),
      body: Center(
        child: AnimatedCrossFade(
            // First widget
            firstChild: Container(
              height: 230,
              width: 250,
              color: Colors.blue,
            ),
            // Second widget
            secondChild: Container(
              height: 250,
              width: 230,
              color: Colors.green,
            ),
            // Parameter to change between two
            // widgets on this basis of value of _bool
            crossFadeState:
                _bool ? CrossFadeState.showFirst : CrossFadeState.showSecond,
            // Duration for crossFade animation.
            duration: Duration(seconds: 1)),
      ),
    );
  }
}

Nota: firstChild y secondChild pueden ser cualquier widget siempre que amplíen la clase Widget.

Producción: