Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove default navigation route animation

I am below code which given in flutter documentation for page routing

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

But it provides some animation while pushing and poping route.

For Android, the entrance transition for the page slides the page upwards and fades it in. The exit transition is the same, but in reverse.

The transition is adaptive to the platform and on iOS, 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. (These directions are flipped in environments with a right-to-left reading direction.)

Is there any way to route to next page without any animation?

Edit: Please check the entire code:

class MyApp extends StatelessWidget {
  final routes = <String, WidgetBuilder>{
    SecondRoute.tag: (context) => SecondRoute(),
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Routes",
      home: new FirstRoute(),
      routes: routes,
      onGenerateRoute: (routeSettings) {
        if (routeSettings.name == SecondRoute.tag)
          return PageRouteBuilder(pageBuilder: (_, a1, a2) => SecondRoute());

        return null;
      },
    );
  }
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.of(context).pushNamed(SecondRoute.tag);

          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  static String tag = 'second-route';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}
like image 435
Jitesh Mohite Avatar asked Sep 03 '19 13:09

Jitesh Mohite


People also ask

How do I navigate to a page without animation flutter?

With Navigator 2.0, there are two ways: Rebuild the Navigator with a new pages list that has the last item replaced. If the previous Page and replacement Page both have no key or the same key, then Flutter will treat them as the same page and will not animate.

How do I turn off animation in flutter?

There is no way to disable Transition animations and Slide Animations on FLutter, but this a requested feature right now due to Flutter Web being a thing now. As a workaround, you can use the transition-duration property of PageRouteBuilder Widget. Navigator.

What is MaterialPageRoute?

MaterialPageRoute<T> class Null safety. A modal route that replaces the entire screen with a platform-adaptive transition. For Android, the entrance transition for the page zooms in and fades in while the exiting page zooms out and fades out. The exit transition is similar, but in reverse.

How do I delete a route on flutter?

To remove all the routes below the pushed route, use a RoutePredicate that always returns false (e.g. (Route<dynamic> route) => false ). The removed routes are removed without being completed, so this method does not take a return value argument. The newly pushed route and its preceding route are notified for Route.


2 Answers

Replace your MyApp with this.

class MyApp extends StatelessWidget {
  final routes = <String, WidgetBuilder>{SecondRoute.tag: (context) => SecondRoute()};

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Routes",
      home: new FirstRoute(),
      onGenerateRoute: (routeSettings) {
        if (routeSettings.name == SecondRoute.tag)
          return PageRouteBuilder(
            pageBuilder: (_, a1, a2) => FadeTransition(opacity: a1 ,child: SecondRoute()),
            transitionDuration: Duration(seconds: 5),
          );

        return null;
      },
    );
  }
}
like image 133
CopsOnRoad Avatar answered Oct 24 '22 12:10

CopsOnRoad


The animation is performed by MaterialPageRoute. If you don't want it, simple use something else:

Navigator.push(
  context,
  PageRouteBuilder(pageBuilder: (_, __, ___) => MyRoute()),
)
like image 9
Rémi Rousselet Avatar answered Oct 24 '22 14:10

Rémi Rousselet