Flutter Web - remove default page transition on named routes

248

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
              },
        ),
Share:
248
PJQuakJag
Author by

PJQuakJag

Updated on January 04, 2023

Comments

  • PJQuakJag
    PJQuakJag 10 months

    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?

    • OMi Shah
      OMi Shah over 1 year
      Does this answer your question? How to remove default navigation route animation
    • PJQuakJag
      PJQuakJag over 1 year
      @OMiShah Would I have to declare the onGenerateRoute for every single named route? Is there a way to do this as a default?
    • Fred Grott
      Fred Grott over 1 year
      recent beta flutter took out page transitions for both Web and Desktop and its by API design according to Flutter team
  • PJQuakJag
    PJQuakJag over 1 year
    How would I set it to have no transition?
  • PJQuakJag
    PJQuakJag over 1 year
    Amazing! Thank you!! Super helpful!