Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to slide to new page on the right instead of the bottom in flutter?

The default flutter animation to transit a new page into the focus is to slide it up from the bottom. How do i change this behaviors and slide the new page in from the right or left instead?

      Navigator.push(
        context,
          new PageRouteBuilder(
          pageBuilder: (BuildContext context, _, __) {
            return new SearchView();
          }
          )
      );
like image 720
jia chen Avatar asked Jun 05 '18 16:06

jia chen


People also ask

How do you navigate two pages in flutter?

The basic way — push and pop The Navigator behaves like a stack, so the most simple way is to push a new page onto it when you want to navigate to it and to pop a page if you want to go back.

How do you slide transition in flutter?

In the Flutter SlideTransition is a widget that animates the position of a widget relative to its normal position and slides required a little bit more interaction by using tween, in this case, offset, and flutter widget. The translation is expressed as an Offset scaled to the child's size.


2 Answers

Check out the CupertinoPageRoute:

A modal route that replaces the entire screen with an iOS transition.

The page slides in from the right and exits in reverse. The page also shifts to the left in parallax when another page enters to cover it.

The page slides in from the bottom and exits in reverse with no parallax effect for fullscreen dialogs.

There's a demo of it in the flutter gallery example app:

Navigator.of(context, rootNavigator: true).push(
  new CupertinoPageRoute<bool>(
    fullscreenDialog: true,
    builder: (BuildContext context) => new Tab3Dialog(),
  ),
);
like image 143
Danny Tuppeny Avatar answered Oct 16 '22 12:10

Danny Tuppeny


You can create a function with your desirable animation

Route createRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;
      const curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

And call it each time you push to a new screen

Navigator.of(context).push(createRoute(SearchView()))

If you want to change the direction you need to change the offset of begin If you want to change the effect you need to change SlideTransition

like image 7
Matteo Antolini Avatar answered Oct 16 '22 13:10

Matteo Antolini