How can I animate my next page from bottom to top when I navigate to it

Admin 1
Viewed 2387

I want to create an app in which when I Navigate to other page it animate from bottom of the screen to top (e.g when we click on comment button in facebook in android not sure about ios the comment page popups up from bottom of the page) I want exactly that page and its property in flutter where I can drag that page to the bottom to navigate back to previous page. I hope someone can understand what I am trying to say. All i need is that I want to navigate on other page and I want when I navigate to other page it shows beautiful transition from bottom to top

flutter-layout flutter
3 Answers

You can achieve this by setting fullscreenDialog to true. For example, Cupertino:

Navigator.of(context).push(
  CupertinoPageRoute(
    fullscreenDialog: true,
    builder: (context) {
      return YourScreen();
    },
  ),
);

for Material:

await Navigator.of(context).push(
  MaterialPageRoute(
    fullscreenDialog: true,
    builder: (context) {
      return YourScreen();
    },
  ),
);

You can use one of the above examples, but Cupertino may be suitable for your need.

user_139899640
user_116007310

For Animation You have to use PageRouteBuilder[https://flutter.dev/docs/cookbook/animation/page-route-animation]

class AnimatedRoute extends PageRouteBuilder {
  final Widget widget;

  AnimatedRoute(this.widget)
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => widget,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            var begin = Offset(0.0, 1.0);
            var end = Offset.zero;
            var tween = Tween(begin: begin, end: end);
            var offsetAnimation = animation.drive(tween);
            return SlideTransition(
              position: offsetAnimation,
              child: child,
            );
          },
        );
}

You just have to pass the required Page as a widget

return AnimatedRoute(YourWidget());

I guess that will help.

user_75399270
Related