Animar un widget a través de pantallas

A menudo es útil guiar a los usuarios a través de una aplicación a medida que navegan de una pantalla a otra. Una técnica común para guiar a los usuarios a través de una aplicación es animar un Widget de una pantalla a la siguiente. Esto crea un anclaje visual que conecta las dos pantallas.

Usa el Widget Hero para animar un Widget de una pantalla a la siguiente. Esta receta utiliza los siguientes pasos:

1. Crear dos pantallas que muestren la misma imagen.
2. Agrega un Widget Hero a la primera pantalla.
3. Agrega un Widget Hero a la segunda pantalla.

En este ejemplo, muestra la misma imagen en ambas pantallas. Anima la imagen de la primera pantalla a la segunda pantalla cuando el usuario toque la imagen. Por ahora, crea la estructura visual; maneja las animaciones en los siguientes pasos.

import 'package:flutter/material.dart';
​
class MainScreen extends StatelessWidget {
  const MainScreen({super.key});
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Main Screen')),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute<void>(
              builder: (context) {
                return const DetailScreen();
              },
            ),
          );
        },
        child: Image.network('https://picsum.photos/250?image=9'),
      ),
    );
  }
}
​
class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Image.network('https://picsum.photos/250?image=9'),
        ),
      ),
    );
  }
}

Para conectar las dos pantallas con una animación, envuelve el Widget Image en ambas pantallas en un Widget Hero. El Widget Hero requiere dos argumentos:

tag

Un objeto que identifica al Hero. Debe ser el mismo en ambas pantallas.

child

El Widget a animar a través de las pantallas.

Hero(
  tag: 'imageHero',
  child: Image.network('https://picsum.photos/250?image=9'),
)

Para completar la conexión con la primera pantalla, envuelve la Image en la segunda pantalla con un Widget Hero que tenga la misma etiqueta tag que el Hero en la primera pantalla.

Después de aplicar el Widget Hero a la segunda pantalla, la animación entre pantallas simplemente funciona.

Hero(
  tag: 'imageHero',
  child: Image.network('https://picsum.photos/250?image=9'),
)