Custom navigation route that better support hero animations.

custom_hero_transition_route.dart

// Couldn't find the original developer and the gist of this code. 
// Full credit goes to the original developer for the implementation of [HeroDialogRoute].

import 'package:flutter/material.dart';


class HeroDialogRoute<T> extends PageRoute<T> {
  HeroDialogRoute({required this.builder}) : super();

  final WidgetBuilder builder;

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => true;

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

  @override
  bool get maintainState => true;

  @override
  Color get barrierColor => Colors.black54;

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

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

  @override
  String? get barrierLabel => 'Dismissable Dialog';
}

// Build the next route where the second hero widget lies using [HeroDialogRoute].
await Navigator.push(
        context,
        HeroDialogRoute<void>(
          builder: (BuildContext context) {
            return SizedBox();
          },
        ),
      );