Disable Route Transition Animation

Author: rayliverified

lib/main.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 // ignore: depend_on_referenced_packages
 import 'package:flutter_web_plugins/url_strategy.dart';
 import 'package:minimal/pages/pages.dart';
+import 'package:minimal/routes.dart';
 import 'package:responsive_framework/responsive_framework.dart';
 
 void main() {
@@ -49,9 +50,9 @@ class MyApp extends StatelessWidget {
 
   // onGenerateRoute route switcher.
   // Navigate using the page name, `Navigator.pushNamed(context, ListPage.name)`.
-  PageRoute buildPage(
+  Route<dynamic> buildPage(
       {required String path, Map<String, String> queryParams = const {}}) {
-    return MaterialPageRoute(
+    return Routes.noAnimation(
         settings: RouteSettings(
             name: (path.startsWith('/') == false) ? '/$path' : path),
         builder: (context) {

lib/main_advanced.dart

@@ -35,37 +35,40 @@ class MyApp extends StatelessWidget {
       // behavior for a page.
       onGenerateRoute: (RouteSettings settings) {
         // A custom `fadeThrough` route transition animation.
-        return Routes.fadeThrough(settings, (context) {
-          // Wrap widgets with another widget based on the route.
-          // Wrap the page with the ResponsiveScaledBox for desired pages.
-          return ConditionalRouteWidget(
-              routesExcluded: const [
-                TypographyPage.name
-              ], // Excluding a page from AutoScale.
-              builder: (context, child) => MaxWidthBox(
-                    // A widget that limits the maximum width.
-                    // This is used to create a gutter area on either side of the content.
-                    maxWidth: 1200,
-                    background: Container(color: const Color(0xFFF5F5F5)),
-                    child: ResponsiveScaledBox(
-                        // ResponsiveScaledBox renders its child with a FittedBox set to the `width` value.
-                        // Set the fixed width value based on the active breakpoint.
-                        width: ResponsiveValue<double>(context,
-                            conditionalValues: [
-                              const Condition.equals(name: MOBILE, value: 450),
-                              const Condition.between(
-                                  start: 800, end: 1100, value: 800),
-                              const Condition.between(
-                                  start: 1000, end: 1200, value: 1000),
-                              // There are no conditions for width over 1200
-                              // because the `maxWidth` is set to 1200 via the MaxWidthBox.
-                            ]).value,
-                        child: child!),
-                  ),
-              child: BouncingScrollWrapper.builder(
-                  context, buildPage(settings.name ?? ''),
-                  dragWithMouse: true));
-        });
+        return Routes.fadeThrough(
+            settings: settings,
+            builder: (context) {
+              // Wrap widgets with another widget based on the route.
+              // Wrap the page with the ResponsiveScaledBox for desired pages.
+              return ConditionalRouteWidget(
+                  routesExcluded: const [
+                    TypographyPage.name
+                  ], // Excluding a page from AutoScale.
+                  builder: (context, child) => MaxWidthBox(
+                        // A widget that limits the maximum width.
+                        // This is used to create a gutter area on either side of the content.
+                        maxWidth: 1200,
+                        background: Container(color: const Color(0xFFF5F5F5)),
+                        child: ResponsiveScaledBox(
+                            // ResponsiveScaledBox renders its child with a FittedBox set to the `width` value.
+                            // Set the fixed width value based on the active breakpoint.
+                            width: ResponsiveValue<double>(context,
+                                conditionalValues: [
+                                  const Condition.equals(
+                                      name: MOBILE, value: 450),
+                                  const Condition.between(
+                                      start: 800, end: 1100, value: 800),
+                                  const Condition.between(
+                                      start: 1000, end: 1200, value: 1000),
+                                  // There are no conditions for width over 1200
+                                  // because the `maxWidth` is set to 1200 via the MaxWidthBox.
+                                ]).value,
+                            child: child!),
+                      ),
+                  child: BouncingScrollWrapper.builder(
+                      context, buildPage(settings.name ?? ''),
+                      dragWithMouse: true));
+            });
       },
       debugShowCheckedModeBanner: false,
     );

lib/routes.dart

@@ -2,15 +2,29 @@ import 'package:animations/animations.dart';
 import 'package:flutter/widgets.dart';
 
 class Routes {
-  static Route<T> fadeThrough<T>(RouteSettings settings, WidgetBuilder page,
-      {int duration = 300}) {
+  static Route<T> fadeThrough<T>(
+      {required RouteSettings settings,
+      required WidgetBuilder builder,
+      int duration = 300}) {
     return PageRouteBuilder<T>(
       settings: settings,
       transitionDuration: Duration(milliseconds: duration),
-      pageBuilder: (context, animation, secondaryAnimation) => page(context),
+      pageBuilder: (context, animation, secondaryAnimation) => builder(context),
       transitionsBuilder: (context, animation, secondaryAnimation, child) {
         return FadeScaleTransition(animation: animation, child: child);
       },
     );
   }
+
+  static Route<T> noAnimation<T>(
+      {required RouteSettings settings, required WidgetBuilder builder}) {
+    return PageRouteBuilder<T>(
+      settings: settings,
+      transitionDuration: Duration.zero,
+      pageBuilder: (context, animation, secondaryAnimation) => builder(context),
+      transitionsBuilder: (context, animation, secondaryAnimation, child) {
+        return child;
+      },
+    );
+  }
 }