class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    timeDilation = 3.0;
    const separator = SizedBox(height: 40);
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              _ItemCard(id: 1, clipped: true),
              separator,
              _ItemCard(id: 2, clipped: true),
              separator,
              _ItemCard(id: 3, clipped: true),
              separator,
            ],
          ),
        ),
      ),
    );
  }
}

class _ItemCard extends StatelessWidget {
  const _ItemCard({
    required this.id,
    this.clipped = false,
    Key? key,
  }) : super(key: key);

  final int id;
  final bool clipped;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 120,
      child: LayoutBuilder(builder: (context, constraints) {
        return GestureDetector(
          onTap: () {
            Navigator.of(context).push(
              PageRouteBuilder(
                pageBuilder: (_, __, ___) => _ItemDetails(
                  id: id,
                ),
                transitionsBuilder: (_, animation, __, child) =>
                    FadeTransition(opacity: animation, child: child),
              ),
            );
          },
          child: Builder(builder: (context) {
            final width = constraints.maxWidth * 0.5;
            final hero = Hero(
              tag: 'hero_details_$id',
              child: Image.asset(
                'assets/person.png',
                fit: BoxFit.cover,
                width: width,
                alignment: Alignment.topCenter,
              ),
            );
            return Stack(
              clipBehavior: Clip.none,
              children: [
                Positioned.fill(
                  child: Hero(
                    tag: 'background_$id',
                    child: Container(
                      color: Colors.black,
                    ),
                  ),
                ),
                if (clipped)
                  Positioned(
                      left: constraints.maxWidth / 2 - width / 2,
                      top: 0,
                      width: width,
                      bottom: 0,
                      child: hero)
                else
                  Positioned.fill(
                    child: hero,
                  ),
              ],
            );
          }),
        );
      }),
    );
  }
}

class _ItemDetails extends StatelessWidget {
  const _ItemDetails({
    required this.id,
    Key? key,
  }) : super(key: key);

  final int id;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            Positioned(
              left: 0,
              right: 0,
              top: 0,
              height: 400,
              child: Stack(
                children: [
                  Hero(
                    tag: 'background_$id',
                    child: Container(
                      color: Colors.black,
                    ),
                  ),
                  Positioned.fill(
                    top: 100,
                    child: Hero(
                      tag: 'hero_details_$id',
                      child: Image.asset(
                        'assets/person.png',
                        fit: BoxFit.cover,
                        alignment: Alignment.topCenter,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Positioned(
              left: 0,
              top: 0,
              right: 0,
              height: kToolbarHeight,
              child: AppBar(
                backgroundColor: Colors.transparent,
                elevation: 0,
                leading: const BackButton(
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}