Flutter Web - remove default page transition on named routes
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
},
),
PJQuakJag
Updated on January 04, 2023Comments
-
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 over 1 yearDoes this answer your question? How to remove default navigation route animation
-
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 over 1 yearrecent beta flutter took out page transitions for both Web and Desktop and its by API design according to Flutter team
-
-
PJQuakJag over 1 yearHow would I set it to have no transition?
-
PJQuakJag over 1 yearAmazing! Thank you!! Super helpful!