How to made a open widget with a vertical animation in flutter?

Question

Have a simple idea: Open a custom Scaffold widget but with a specific animation. For now have this code:

Navigator.push(
    context,
    PageRouteBuilder(
        pageBuilder: (context, animation, secondaryAnimation) => const ChooserWidget(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
            final curvedAnimation = CurvedAnimation(
                parent: animation,
                curve: Curves.easeInOut,
            );

            return ScaleTransition(
                alignment: Alignment.center,
                scale: Tween<double>(
                    begin: 0.0,
                    end: 1.0,
                ).animate(curvedAnimation),
                child: child,
            );
        },
    )
)

This animation show the widget from center of screen and expands vertical and horizontal way in same time, but i want expand vertical only, like as game menu of gameboy, start horizontal to 100% and vertical to 0% and expand to start of top and end of bottom same time from center of screen and close in reverse mode.

How to can made this?, i can add a external border when animate and hide border when end animation like as a border window at finish to expand?

Answer 1

You only need to change a single value from the source code of ScaleTransition to make it scale horizontally.

class HorizontalScaleTransition extends MatrixTransition {
  /// Creates a scale transition.
  ///
  /// The [alignment] argument defaults to [Alignment.center].
  const HorizontalScaleTransition({
    super.key,
    required Animation<double> scale,
    super.alignment = Alignment.center,
    super.filterQuality,
    super.child,
  }) : super(animation: scale, onTransform: _handleScaleMatrix);

  /// The animation that controls the scale of the child.
  Animation<double> get scale => animation;

  /// The callback that controls the scale of the child.
  ///
  /// If the current value of the animation is v, the child will be
  /// painted v times its normal size.
  static Matrix4 _handleScaleMatrix(double value) =>
      Matrix4.diagonal3Values(1.0, value, 1.0);
}