'Flutter Web - remove default page transition on named routes

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?

Solution 1:^[1]

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

Solution 2:^[2]

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

Solution 3:^[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Boris Kayi
Solution 3	Lakshydeep Vikram Sah

'Flutter Web - remove default page transition on named routes

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]