Flutter Web – remove default page transition on named routes

Issue

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

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

Answered By – 7mada

Answer Checked By – Timothy Miller (FlutterFixes Admin)