Flutter : Page Transition

In flutter, page transition can be customized with PageRouteBuilder. The PageRouteBuilder given with two parameter, pageBuilder and transitionBuilder, pushes the page built by pageBuilder with transition animation of transitionBuilder.

Navigator.of(context).push(
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const MyPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
        const begin = Offset(0.0, 1.0);
        const end = Offset.zero;
        final tween = Tween(begin: begin, end: end);
        final offsetAnimation = animation.drive(tween);
        return child;
     },
  )
)

Here's an example of a page transition that makes the new page slide up from bottom as the Tween starts from Offset of (0.0, 1.0), which is bottom edge, to Offset.zero, the base position of screen.

To explain a bit more about the Offset, the left top corner of the screen is (0.0, 0.0) and right bottom is (1.0, 1.0). The code shown above only changes the Y axis value from 1.0 to 0.0, so it moves outside of the screen to base position of the screen.

reference : https://docs.flutter.dev/cookbook/animation/page-route-animation