Create Routes Transition

*Create onGeneratedRoutes for custom route transitions.

Author: rayliverified

lib/components/blog.dart

@@ -5,6 +5,7 @@ import 'package:minimal/components/color.dart';
 import 'package:minimal/components/spacing.dart';
 import 'package:minimal/components/text.dart';
 import 'package:minimal/components/typography.dart';
+import 'package:minimal/routes.dart';
 
 class ImageWrapper extends StatelessWidget {
   final String image;
@@ -289,7 +290,7 @@ class ListItem extends StatelessWidget {
           child: Container(
             margin: marginBottom24,
             child: ReadMoreButton(
-              onPressed: () => Navigator.pushNamed(context, '/post'),
+              onPressed: () => Navigator.pushNamed(context, Routes.post),
             ),
           ),
         ),
@@ -317,8 +318,8 @@ class MenuBar extends StatelessWidget {
           child: Row(
             children: <Widget>[
               GestureDetector(
-                onTap: () =>
-                    Navigator.popUntil(context, ModalRoute.withName("/")),
+                onTap: () => Navigator.popUntil(
+                    context, ModalRoute.withName(Navigator.defaultRouteName)),
                 child: Text("MINIMAL",
                     style: GoogleFonts.montserrat(
                         color: textPrimary,
@@ -332,8 +333,8 @@ class MenuBar extends StatelessWidget {
                   child: Wrap(
                     children: <Widget>[
                       FlatButton(
-                        onPressed: () => Navigator.popUntil(
-                            context, ModalRoute.withName("/")),
+                        onPressed: () => Navigator.popUntil(context,
+                            ModalRoute.withName(Navigator.defaultRouteName)),
                         child: Text(
                           "HOME",
                           style: buttonTextStyle,
@@ -353,7 +354,8 @@ class MenuBar extends StatelessWidget {
                         highlightColor: Colors.transparent,
                       ),
                       FlatButton(
-                        onPressed: () => Navigator.pushNamed(context, '/style'),
+                        onPressed: () =>
+                            Navigator.pushNamed(context, Routes.style),
                         child: Text(
                           "STYLE",
                           style: buttonTextStyle,

lib/main.dart

@@ -1,6 +1,6 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:minimal/pages/pages.dart';
+import 'package:minimal/routes.dart';
 import 'package:responsive_framework/responsive_framework.dart';
 import 'package:responsive_framework/utils/bouncing_scroll_behavior.dart';
 
@@ -27,11 +27,22 @@ class MyApp extends StatelessWidget {
             ResponsiveBreakpoint(breakpoint: 2460, name: "4K", autoScale: true),
           ],
           background: Container(color: Color(0xFFF5F5F5))),
-      initialRoute: "/",
-      routes: {
-        "/": (context) => ListPage(),
-        "/post": (context) => PostPage(),
-        "/style": (context) => TypographyPage(),
+      initialRoute: Routes.home,
+      onGenerateRoute: (RouteSettings settings) {
+        switch (settings.name) {
+          case Routes.home:
+            return Routes.fadeThrough(settings, (context) => ListPage());
+            break;
+          case Routes.post:
+            return Routes.fadeThrough(settings, (context) => PostPage());
+            break;
+          case Routes.style:
+            return Routes.fadeThrough(settings, (context) => TypographyPage());
+            break;
+          default:
+            return null;
+            break;
+        }
       },
       theme: Theme.of(context).copyWith(platform: TargetPlatform.android),
       debugShowCheckedModeBanner: false,

lib/routes.dart

@@ -0,0 +1,20 @@
+import 'package:animations/animations.dart';
+import 'package:flutter/widgets.dart';
+
+class Routes {
+  static const String home = "/";
+  static const String post = "post";
+  static const String style = "style";
+
+  static Route<T> fadeThrough<T>(RouteSettings settings, WidgetBuilder page,
+      {int duration = 300}) {
+    return PageRouteBuilder<T>(
+      settings: settings,
+      transitionDuration: Duration(milliseconds: duration),
+      pageBuilder: (context, animation, secondaryAnimation) => page(context),
+      transitionsBuilder: (context, animation, secondaryAnimation, child) {
+        return FadeScaleTransition(animation: animation, child: child);
+      },
+    );
+  }
+}

pubspec.yaml

@@ -10,6 +10,7 @@ dependencies:
     sdk: flutter
   responsive_framework: ^0.0.4
   google_fonts: ^0.3.10
+  animations: ^1.0.0+5
 
 dev_dependencies:
   flutter_test: