CODEWITHSUNDEEP
flutterdartflutter-web
PJQuakJag
PJQuakJag

Reputation: 1247

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?

Upvotes: 11

Views: 6399

Answers (3)

Lakshydeep Vikram Sah
Lakshydeep Vikram Sah

Reputation: 39

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

Upvotes: 0

Mohammed Alfateh
Mohammed Alfateh

Reputation: 3514

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

Upvotes: 35

Boris Kayi
Boris Kayi

Reputation: 593

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

Upvotes: 0

Related Questions