89

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(),
      },
    );
  }
}
3
  • Did you mean that you want to change the content of the page without a new page/route
    – Blasanka
    Commented Apr 17, 2018 at 11:46
  • It could work, but i was meaning navigate to a page cleaning the stack without the animation of the navigation. Commented Apr 17, 2018 at 11:51
  • You can refer to this question stackoverflow.com/questions/43680902/…
    – Dakota
    Commented Apr 18, 2018 at 2:13

11 Answers 11

135

You can use PageRouteBuilder.

Navigator.pushReplacement(
    context, 
    PageRouteBuilder(
        pageBuilder: (context, animation1, animation2) => Page1(),
        transitionDuration: Duration.zero,
        reverseTransitionDuration: Duration.zero,
    ),
);
2
  • 16
    add transitionDuration: Duration(seconds: 0), to make transition instantly.
    – Pezhvak
    Commented May 1, 2020 at 19:39
  • 8
    add reverseTransitionDuration: Duration.zero for no delayed pop!
    – Bugzilla
    Commented Jan 21, 2022 at 12:35
39

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;
  }
}
4
23

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();
    },
  ),
);
2
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),
  ),
);
2
  • 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
    Commented May 25, 2020 at 22:59
  • 6
    And there's reverseTransitionDuration, which you can set to 0 also.
    – Tayan
    Commented Sep 4, 2021 at 9:57
9

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(),
                    ],
                  ),
                ),
              ),
            ),
      },
    ),
  );
}

screen recording

6
  • 2
    The simplest way to achieve a simple result: navigate without animations. Thanks!
    – dcg
    Commented Oct 16, 2019 at 16:04
  • I think this solution does not work on pop or popUntil?
    – camillo777
    Commented Nov 21, 2019 at 10:18
  • 1
    Outstanding and simple, thanks a lot! It works perfectly in Flutter 1.12.13+hotfix.8. Commented May 2, 2020 at 18:41
  • 2
    isInitialRoute has been removed (github.com/flutter/flutter/issues/51649)
    – ncuillery
    Commented Jul 25, 2020 at 15:35
  • 1
    isInitialRoute is no longer there. Please remove this answer. Commented Jun 3, 2022 at 16:38
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.

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;
 }
}
1
  • The builder goes missing.
    – lolelo
    Commented Oct 27, 2019 at 19:24
2

With Navigator 2.0, there are two ways:

  1. 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.
  2. 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 .
1

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;
  }
}
0

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);
}

0

To add to the answer using PageRouteBuilder. If you are building a cross-platform application and want animations over smaller screens (mobile) and no animations over desktop screens, then you can use this function:

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

PageRoute<T> adaptivePageRoute<T>(Widget Function() builder) {
  if (kIsWeb || Platform.isMacOS || Platform.isWindows) {
    // No paging animation
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => builder(),
      transitionDuration: Duration.zero,
      reverseTransitionDuration: Duration.zero,
    );
  } else if (Platform.isAndroid) {
    return MaterialPageRoute(builder:(context) => builder());
  } else {
    return CupertinoPageRoute(builder:(context) => builder());
  }
}

which is then used like this:

Navigator.of(context).push(adaptivePageRoute(() => const LogIn()));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.