How to navigate to other page without animation Flutter

Question

I have a Login page, when I log on to go to the main page of my app i am using Navigator.pushReplacement(context, new MaterialPageRoute(builder: (BuildContext context) => new Page1())); But it have the slide animation, i want to disable it.

this is my Material app format

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Login(title: 'Login'),
      routes: <String, WidgetBuilder>{
        '/screen3': (BuildContext context) => new Page1(),
      },
    );
  }
}

Did you mean that you want to change the content of the page without a new page/route — Blasanka, Apr 17 '18 at 11:46
It could work, but i was meaning navigate to a page cleaning the stack without the animation of the navigation. — Mauricio De armas, Apr 17 '18 at 11:51
You can refer to this question https://stackoverflow.com/questions/43680902/replace-initial-route-in-materialapp-without-animation — Dakota, Apr 18 '18 at 02:13

Edwin Liu · Answer 1 · 2022-02-13T05:21:02.023

123

You can use PageRouteBuilder.

Navigator.pushReplacement(
    context, 
    PageRouteBuilder(
        pageBuilder: (context, animation1, animation2) => Page1(),
        transitionDuration: Duration.zero,
        reverseTransitionDuration: Duration.zero,
    ),
);

edited Feb 13 '22 at 05:21

answered Dec 14 '19 at 13:06

Edwin Liu

7,413
3
28
27

15

add transitionDuration: Duration(seconds: 0), to make transition instantly. – Pezhvak May 01 '20 at 19:39
8

add `reverseTransitionDuration: Duration.zero` for no delayed pop! – Bugzilla Jan 21 '22 at 12:35

lsaudon · Answer 2 · 2023-02-09T13:34:18.993

36

You would need to override the buildTransitions method to prevent animations.

import 'package:flutter/material.dart';

class NoAnimationMaterialPageRoute<T> extends MaterialPageRoute<T> {
  NoAnimationMaterialPageRoute({
    required WidgetBuilder builder,
    RouteSettings? settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  }) : super(
            builder: builder,
            maintainState: maintainState,
            settings: settings,
            fullscreenDialog: fullscreenDialog);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return child;
  }
}

edited Feb 09 '23 at 13:34

answered Nov 27 '18 at 16:11

lsaudon

1,263
11
24

1

Any way to determine whether the animation is for opening or closing? I'd like to keep the animation for closing. – Janneman Nov 26 '19 at 16:40
@Janneman I don't know, but you can try to keep animation or secondaryAnimation. https://github.com/flutter/flutter/blob/b31ca1aaca0b9ef70ec478a74b3b690e4d632616/packages/flutter/lib/src/material/page.dart line 105 – lsaudon Nov 27 '19 at 08:16
Amazing stuff!! – James 666 May 17 '21 at 16:28
1

why not just https://stackoverflow.com/a/57774013/5060513? can you explain the plus and drawbacks? – Taufik Nur Rahmanda Oct 08 '21 at 12:55

score 21 · Answer 3 · edited Mar 07 '22 at 14:24

21

Make sure you also set transitionDuration otherwise you may push the new route without animation but when you press back button, you'll see some delay.

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (_, __, ___) => Screen2(),
    transitionDuration: const Duration(seconds: 0),
  ),
);

edited Mar 07 '22 at 14:24

Philippe Fanaro

6,148
6
38
76

answered May 15 '20 at 11:46

CopsOnRoad

237,138
77
654
440

that is correct with duration to zero seconds method we get delay on closing route. and that is very annoying look like a lug. – Fuad All May 25 '20 at 22:59
6

And there's `reverseTransitionDuration`, which you can set to `0` also. – Tayan Sep 04 '21 at 09:57

score 21 · Answer 4 · edited Mar 07 '22 at 14:21

21

You can override MaterialPageRoute to set transitionDuration to zero:

class CustomPageRoute extends MaterialPageRoute {
  CustomPageRoute({builder}) : super(builder: builder);

  @override
  Duration get transitionDuration => const Duration(milliseconds: 0);
}

...

Navigator.of(context).push(
  CustomPageRoute(
    builder: (BuildContext context) {
      return DashboardView();
    },
  ),
);

edited Mar 07 '22 at 14:21

Philippe Fanaro

6,148
6
38
76

answered Aug 24 '20 at 12:26

Pavel Shastov

2,657
1
18
26

8

Can this solution be used for pushNamed aswell? If so, how? – Zandahlen Sep 03 '21 at 12:05
for pushNamed use this solution: https://stackoverflow.com/a/57774013/119861 – hansaplast Jul 22 '22 at 17:51

M. Leonhard · Answer 5 · 2022-06-11T20:43:30.067

EDIT: This simple solution longer works. See https://github.com/flutter/flutter/issues/51649 .

Good luck using the Navigator 2.0 API.

My solution is to define the route with isInitialRoute:true. This prevents Flutter from showing an animation when the route is pushed.

Here's a working example and screen recording:

import 'package:flutter/cupertino.dart'
    show
        CupertinoApp,
        CupertinoButton,
        CupertinoPageRoute,
        CupertinoPageScaffold;
import 'package:flutter/widgets.dart'
    show
        BuildContext,
        Center,
        Column,
        Navigator,
        Route,
        RouteSettings,
        SafeArea,
        Spacer,
        Text,
        runApp,
        Widget;

Widget makeButton(BuildContext context, String routeName) =>
    new CupertinoButton(
      onPressed: () => Navigator.pushReplacementNamed(context, routeName),
      child: Text('Go to \'$routeName\''),
    );

Route generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case 'not-animated':
      return new CupertinoPageRoute(
        settings: RouteSettings(name: settings.name, isInitialRoute: true),
        builder: (context) => CupertinoPageScaffold(
              child: SafeArea(
                child: Center(
                  child: Column(
                    children: [
                      Spacer(),
                      Text('This is \'not-animated\''),
                      makeButton(context, 'animated'),
                      Spacer(),
                    ],
                  ),
                ),
              ),
            ),
      );
    default:
      return null;
  }
}

void main() {
  runApp(
    CupertinoApp(
      onGenerateRoute: generateRoute,
      initialRoute: 'animated',
      routes: {
        'animated': (context) => CupertinoPageScaffold(
              child: SafeArea(
                child: Center(
                  child: Column(
                    children: [
                      Spacer(),
                      Text('This is \'animated\''),
                      makeButton(context, 'not-animated'),
                      Spacer(),
                    ],
                  ),
                ),
              ),
            ),
      },
    ),
  );
}

The simplest way to achieve a simple result: navigate without animations. Thanks! — dcg, Oct 16 '19 at 16:04
Outstanding and simple, thanks a lot! It works perfectly in Flutter 1.12.13+hotfix.8. — Kamil Rykowski, May 02 '20 at 18:41
isInitialRoute has been removed (https://github.com/flutter/flutter/issues/51649) — ncuillery, Jul 25 '20 at 15:35
`isInitialRoute` is no longer there. Please remove this answer. — Karolina Hagegård, Jun 03 '22 at 16:38

Iván Yoed · Answer 6 · 2021-10-01T00:27:40.123

6

In case you would like to use a package, with the get package you can disable transition animations with a property of GetMaterialApp.

GetMaterialApp(
  defaultTransition: Transition.noTransition, //this would be the solution
  transitionDuration: transitionDuration: Duration(seconds: 0),
);

And then just simply add the other desired properties.

edited Oct 01 '21 at 00:27

answered May 19 '21 at 18:40

Iván Yoed

3,878
31
44

score 5 · Answer 7 · answered Nov 22 '18 at 08:08

5

You should try to extend MaterialPageRoute and override buildTransitions as follows:

class ExPageRoute<T> extends MaterialPageRoute<T> {

 @override
 Widget buildTransitions(BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation, Widget child) {
    return child;
 }
}

answered Nov 22 '18 at 08:08

Jidong Chen

450
6
9

The `builder` goes missing. – lolelo Oct 27 '19 at 19:24

score 1 · Answer 8 · answered May 06 '21 at 05:10

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.
Set Navigator.transitionDelegate to an object that extends TransitionDelegate. The delegate must check for a new record with RouteTransitionRecord.isWaitingForEnteringDecision true and call its markForAdd() method. There is some useful code in https://github.com/flutter/flutter/issues/69315#issuecomment-833212172 .

score 1 · Answer 9 · answered Feb 05 '22 at 10:41

Example with navigator 2.0 without animation

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

var userName = '';
var password = '';

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(context) {
    return MaterialApp(
      home: Navigator(
        transitionDelegate: NoAnimationTransitionDelegate(),
        pages: [
          MaterialPage(child: HomePage()),
          if (password.isEmpty) MaterialPage(child: PasswordPage()),
          if (userName.isEmpty) MaterialPage(child: UserNamePage()),
        ],
        onPopPage: (route, result) {
          if (!route.didPop(result)) return false;
          return true;
        },
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(context) {
    return Scaffold(backgroundColor: Colors.blue);
  }
}

class PasswordPage extends StatelessWidget {
  @override
  Widget build(context) {
    return Scaffold(backgroundColor: Colors.amber);
  }
}

class UserNamePage extends StatelessWidget {
  @override
  Widget build(context) {
    return Scaffold(backgroundColor: Colors.green);
  }
}

class NoAnimationTransitionDelegate extends TransitionDelegate<void> {
  @override
  Iterable<RouteTransitionRecord> resolve({
    required List<RouteTransitionRecord> newPageRouteHistory,
    required Map<RouteTransitionRecord?, RouteTransitionRecord> locationToExitingPageRoute,
    required Map<RouteTransitionRecord?, List<RouteTransitionRecord>> pageRouteToPagelessRoutes,
  }) {
    final results = <RouteTransitionRecord>[];

    for (final pageRoute in newPageRouteHistory) {
      if (pageRoute.isWaitingForEnteringDecision) {
        pageRoute.markForAdd();
      }
      results.add(pageRoute);
    }

    for (final exitingPageRoute in locationToExitingPageRoute.values) {
      if (exitingPageRoute.isWaitingForExitingDecision) {
        exitingPageRoute.markForRemove();
        final pagelessRoutes = pageRouteToPagelessRoutes[exitingPageRoute];
        if (pagelessRoutes != null) {
          for (final pagelessRoute in pagelessRoutes) {
            pagelessRoute.markForRemove();
          }
        }
      }
      results.add(exitingPageRoute);
    }

    return results;
  }
}

score 0 · Answer 10 · answered Nov 08 '21 at 07:23

This is without transitions. Only Fade in next page

class FadeInPageRoute<T> extends PageRoute<T> {
  FadeInPageRoute({
    RouteSettings? settings,
    required this.builder,
  }) : super(settings: settings);

  final WidgetBuilder builder;

  @override
  Color get barrierColor => Colors.black;

  @override
  String get barrierLabel => '';

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    return builder(context);
  }

  @override
  bool canTransitionTo(TransitionRoute<dynamic> nextRoute) {
    return false;
  }

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return Opacity(
      opacity: animation.value,
      child: builder(context),
    );
  }

  @override
  bool get maintainState => true;

  @override
  Duration get transitionDuration => Duration(milliseconds: 700);
}

How to navigate to other page without animation Flutter

10 Answers10

EDIT: This simple solution longer works. See https://github.com/flutter/flutter/issues/51649 .

Linked