Animazione Hero in Flutter

In Flutter abbiamo il widget Hero che ci consente un'animazione mentre si connettono due pagine.

La pagina ufficiale del widget spiega cosa avviene dietro le quinte.

Io ci propongo un basico esempio da cui partire:

• un quadrato blu su cui cliccare
• apre una semplice pagina con un quadrato blu più grande
• animazione nell'andare e nel tornare indietro
• il quadrato blu è un semplice widget, che trovate in fondo al codice; come parametro vuole solo la dimensione

Ecco il codice:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
        ),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Flutter Test'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          const SizedBox(height: 20.0),
          ListTile(
            leading: const Hero(
              tag: 'tag_hero',
              child: MyWidget(size: Size(50.0, 50.0)),
            ),
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute<void>(
                builder: (BuildContext context) => Scaffold(
                  appBar: AppBar(
                    title: const Text('Seconda pagina'),
                  ),
                  body: const Center(
                    child: Hero(
                      tag: 'tag_hero',
                      child: MyWidget(size: Size(200.0, 200.0)),
                    ),
                  ),
                ),
              ));
            },
            title: const Text(
              "Tap sul quadrato per l'animazione!",
            ),
          ),
        ],
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({required this.size});

  final Size size;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size.width,
      height: size.height,
      color: Colors.blue,
    );
  }
}

Enjoy!