Flutter Web - remove default page transition on named routes

Question

I'm looking to update the default page transition to remove the left to right page transition that occurs by default and instead have zero transition. I've seen supporting documentation that allows creating a PageRouteBuilder and setting a duration of zero seconds, but I'm unsure how I can do this for named routes.

For example, I'd like to be able to call and have zero transition:

Navigator.pushNamed(context, '/register');

How can I change the default so that all page transitions have zero transition?

Does this answer your question? [How to remove default navigation route animation](https://stackoverflow.com/questions/57773077/how-to-remove-default-navigation-route-animation) — OMi Shah, Mar 24 '22 at 05:58
@OMiShah Would I have to declare the onGenerateRoute for every single named route? Is there a way to do this as a default? — PJQuakJag, Mar 24 '22 at 06:20
recent beta flutter took out page transitions for both Web and Desktop and its by API design according to Flutter team — Fred Grott, Mar 31 '22 at 18:41

Mohammed Alfateh · Accepted Answer · 2022-03-27T14:11:32.947

You can set the navigation theme in the root MaterialApp. You can pass the navigation animation to each platform you are targeting as shown below.

    MaterialApp(
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(
          builders: {
            TargetPlatform.android: ZoomPageTransitionsBuilder(),
            TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
          },
        ),
      ),
    );

But TargetPlatform is not available for web, in fact it gets not the target platform but the OS the app is running on.

As a work around for this, you can use kIsWeb Boolean from flutter foundation package, another thing you need a custom PageTransitionsBuilder that has no animations.

custom PageTransitionsBuilder

class NoTransitionsBuilder extends PageTransitionsBuilder {
  const NoTransitionsBuilder();

  @override
  Widget buildTransitions<T>(
    PageRoute<T>? route,
    BuildContext? context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget? child,
  ) {
    // only return the child without warping it with animations
    return child!;
  }
}

Finally the pageTransitionsTheme

import 'package:flutter/foundation.dart' show kIsWeb;


        pageTransitionsTheme: PageTransitionsTheme(
          builders: kIsWeb
              ? {
                  // No animations for every OS if the app running on the web
                  for (final platform in TargetPlatform.values)
                    platform:const NoTransitionsBuilder(),
                }
              : const {
                // handel other platforms you are targeting
              },
        ),

Amazing! Thank you!! Super helpful! – PJQuakJag Mar 27 '22 at 22:46 — PJQuakJag, Mar 27 '22 at 22:46

score 0 · Answer 2 · answered Mar 26 '22 at 23:03

0

The MaterialApp widget has a pageTransitionsTheme field where you can map specific PageTransitionBuilders to a specific platform. you can read more about PageTransitionsTheme here

answered Mar 26 '22 at 23:03

Boris Kayi

486
7
13

How would I set it to have no transition? – PJQuakJag Mar 26 '22 at 23:26

score 0 · Answer 3 · answered Mar 31 '22 at 16:53

0

Seek for 1.duration inside animation and set it to zero ,or 2.put animation as Animation.none This might help you.

answered Mar 31 '22 at 16:53

Lakshydeep Vikram Sah

1
1
6

Flutter Web - remove default page transition on named routes

3 Answers3

Linked