En Flutter, se usa un widget de héroe para crear una animación de héroe. Un héroe en este contexto se refiere a un widget que se mueve entre pantallas. Este es uno de los tipos de animación más fundamentales utilizados en la aplicación, especialmente si la aplicación trata con medios como imágenes. En pocas palabras, una animación de héroe es cuando un héroe vuela de una pantalla a otra.
La clase PhotoHero es un elemento esencial en Hero Animation para mover fotos de una ruta (es decir, página) a otra.
Este artículo explora el proceso de creación de animaciones de PhotoHero utilizando una aplicación sencilla. Para construir una animación de héroe, se deben seguir los siguientes pasos:
- Use MaterialPageRoute para mover la imagen de una ruta a otra
- Use Material Design Motion para especificar el movimiento de la imagen durante la transición
- A través de todo lo anterior en una estructura de aplicación Flutter simple.
Una clase Photo hero estándar controla las siguientes propiedades de la imagen:
- Héroe
- Tamaño del héroe
- El comportamiento del héroe cuando se toca.
El siguiente diagrama representa lo mismo:
A continuación se muestra un ejemplo simple de la animación de PhotoHero:
Dart
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
class PhotoHero extends StatelessWidget {
const PhotoHero(
{Key? key, required this.photo, required this.onTap, required this.width})
: super(key: key);
final String photo;
final VoidCallback onTap;
final double width;
@override
Widget build(BuildContext context) {
return SizedBox(
width: width,
child: Hero(
tag: photo,
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
child: Image.asset(
photo,
fit: BoxFit.contain,
),
),
),
),
);
}
}
class HeroAnimation extends StatelessWidget {
const HeroAnimation({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
timeDilation = 10.0;
return Scaffold(
appBar: AppBar(
title: const Text('GeeksForGeeks'),
backgroundColor: Colors.green,
),
body: Center(
child: PhotoHero(
photo: 'assets/images/aquaman.png',
width: 300.0,
onTap: () {
Navigator.of(context)
.push(MaterialPageRoute<void>(builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Aquaman transition'),
backgroundColor: Colors.green,
),
body: Container(
// background of 2nd route
color: Colors.purple,
padding: const EdgeInsets.all(16.0),
alignment: Alignment.topLeft,
child: PhotoHero(
photo: 'assets/images/aquaman.png',
width: 100.0,
onTap: () {
Navigator.of(context).pop();
},
),
),
);
}));
},
),
),
);
}
}
void main() {
runApp(const MaterialApp(home: HeroAnimation()));
}
Producción:
Analicemos el ejemplo anterior:
- Al tocar la imagen principal dentro del widget Inkwell , MaterialPageRoute crea una ruta de destino. A medida que la ruta de destino se empuja con el Navegador , se activa la animación.
- Luego, el contenedor con la imagen se empuja hacia la parte superior izquierda de la aplicación, justo debajo de la barra de aplicaciones.
- Al tocar el mismo héroe nuevamente, materialPageRoute empuja de regreso a su posición original usando la misma ruta y el movimiento de animación opuesto.
- El tiempo de retardo se utiliza para ralentizar la animación para una mejor visualización.
Publicación traducida automáticamente
Artículo escrito por ddeevviissaavviittaa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA