FlutterHeroTest.dart

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.from(
        colorScheme: ColorScheme.light(),
      ),
      home: const Screen1(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    timeDilation = 5.0;
    return Scaffold(
      appBar: AppBar(
        title: Text('My app'),
      ),
      body: Center(
        child: Column(
          children: [
            Text('Hello, World!'),
            Hero(
              tag: 'First',
              child: Custom1(height: 100,width: 100,),
            ),
            Hero(
              tag: 'Second',
              child: Custom2(),
            ),
            Hero(
              tag: 'Third',
              child: Custom3(height: 50,width: 50,),
            ),
            Hero(
              tag: 'Fourth',
              child: Custom4(),
            ),
            IconButton(
                onPressed: () {
                  Navigator.push<void>(
                    context,
                    MaterialPageRoute<void>(
                      builder: (BuildContext context) => const Screen2(),
                    ),
                  );
                },
                icon: Icon(Icons.chevron_right)),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    timeDilation = 5.0;
    return Scaffold(
      appBar: AppBar(title: Text('Second page')),
      body: Column(
        children: [
          Hero(
            tag: 'First',
            child: Custom1(height: 20,width: 20,),
          ),
          Hero(
            tag: 'Second',
            child: Custom2(),
          ),
          Hero(
            tag: 'Third',
            child: Custom3(height: 100,width: 100,),
          ),
          Text('This is the body'),
          Hero(
            tag: 'Fourth',
            child: Custom4(),
          ),
        ],
      ),
    );
  }
}

class Custom1 extends StatelessWidget {
  const Custom1({super.key, required this.height, required this.width});
  
  final double height;
  final double width;

  @override
  Widget build(BuildContext context) {
    print('Building Custom1');
    return SizedBox(
      height: height,
      width: width,
      child: ColoredBox(
        color: Colors.blue,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    print('Building Custom2');
    return SizedBox(
      height: 150,
      width: 200,
      child: ColoredBox(
        color: Colors.green,
      ),
    );
  }
}

class Custom3 extends StatefulWidget {
  const Custom3({super.key, required this.height, required this.width});
  
  final double height;
  final double width;
  
  @override
  State<Custom3> createState() => Custom3State();
}

class Custom3State extends State<Custom3> {
  @override
  Widget build(BuildContext context) {
    print('Building Custom3');
    return SizedBox(
      height: widget.height,
      width: widget.width,
      child: ColoredBox(
        color: Colors.red,
      ),
    );
  }
}

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

  @override
  State<Custom4> createState() => Custom4State();
}

class Custom4State extends State<Custom4> {
  @override
  Widget build(BuildContext context) {
    print('Building Custom4');
    return SizedBox(
      height: 100,
      width: 100,
      child: ColoredBox(
        color: Colors.orange,
      ),
    );
  }
}