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 Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  Future<void> _expandHeroWidget(String tag) {
    final Color barrierColor = Theme.of(context).colorScheme.onBackground.withOpacity(0.25);
    final HeroDialogRoute route = HeroDialogRoute(
      barrierColor: barrierColor,
      builder: (BuildContext context) {
        return Center(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: ConstrainedBox(
              constraints: const BoxConstraints(
                maxWidth: 600.0,
                maxHeight: 400.0,
              ),
              child: Hero(
                tag: tag,
                child: Material(
                  type: MaterialType.canvas,
                  color: Colors.amberAccent,
                  child: Row(
                    children: <Widget>[
                      IconButton(
                        onPressed: () {
                          final SnackBar snackBar = SnackBar(content: Text('SnackBar! $tag'));
                          ScaffoldMessenger.of(context).showSnackBar(snackBar);
                        },
                        icon: const Icon(Icons.abc),
                        tooltip: 'Show a snackbar',
                      ),
                      IconButton(
                        onPressed: () => Navigator.of(context).pop(),
                        icon: const Icon(Icons.check),
                        tooltip: 'Done',
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );

    return Navigator.of(context).push(route);
  }

  Widget _buildHeroWidget(String tag) {
    return Hero(
      tag: tag,
      child: Container(
        color: Colors.amber,
        width: 300.0,
        height: 200.0,
        child: Material(
          type: MaterialType.transparency,
          child: InkResponse(
            onTap: () => _expandHeroWidget(tag),
            child: RichText(
              text: const TextSpan(text: 'tap me'),
              overflow: TextOverflow.fade,
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[ 
            _buildHeroWidget('widget1'),
            const SizedBox(height: 10.0),
            _buildHeroWidget('widget2'),
            const SizedBox(height: 10.0),
            _buildHeroWidget('widget3'),
          ],
        ),
      ),
    );
  }
}

class HeroDialogRoute<T> extends PageRoute<T> {
  HeroDialogRoute({this.barrierColor = const Color(0x80000000), required this.builder})
      : super();

  final WidgetBuilder builder;

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => true;

  @override
  String? get barrierLabel => null;

  @override
  final Color barrierColor;

  @override
  Duration get transitionDuration => const Duration(milliseconds: 200);

  @override
  bool get maintainState => true;

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return FadeTransition(
      opacity: CurvedAnimation(parent: animation, curve: Curves.easeOut),
      child: child,
    );
  }

  @override
  Widget buildPage(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    return builder(context);
  }
}