template layout and navigation to flutter web

android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip
+distributionUrl=https\://FlutterWeb.services.gradle.org/distributions/gradle-5.6.2-all.zip

lib/FlutterWeb/constants/app_colors.dart

@@ -0,0 +1,4 @@
+
+import 'package:flutter/material.dart';
+
+const Color primaryColor = Color.fromARGB(255, 31, 229, 146);

lib/FlutterWeb/locator.dart

@@ -0,0 +1,9 @@
+
+import 'package:all_flutter_gives/FlutterWeb/services/navigation_service.dart';
+import 'package:get_it/get_it.dart';
+
+GetIt locator = GetIt.instance;
+
+void setupLocator() {
+  locator.registerLazySingleton(() => NavigationService());
+}

lib/FlutterWeb/routing/route_names.dart

@@ -0,0 +1,4 @@
+
+const String HomeRoute = "home";
+const String AboutRoute = "about";
+const String EpisodesRoute = "episodes";

lib/FlutterWeb/routing/router.dart

@@ -0,0 +1,49 @@
+
+import 'package:all_flutter_gives/FlutterWeb/routing/route_names.dart';
+import 'package:all_flutter_gives/FlutterWeb/views/about/about_view.dart';
+import 'package:all_flutter_gives/FlutterWeb/views/episodes/episodes_view.dart';
+import 'package:all_flutter_gives/FlutterWeb/views/home/home_view.dart';
+import 'package:flutter/material.dart';
+
+Route<dynamic> generateRoute(RouteSettings settings) {
+  print('generateRoute: ${settings.name}');
+  switch (settings.name) {
+    case HomeRoute:
+      return _getPageRoute(FlutterWebHomeScreen());
+    case EpisodesRoute:
+      return _getPageRoute(FlutterWebEpisodesScreen());
+    case AboutRoute:
+      return _getPageRoute(FlutterWebAboutScreen());
+    default:
+      return _getPageRoute(FlutterWebHomeScreen());
+  }
+}
+
+PageRoute _getPageRoute(Widget child) {
+  return _FadeRoute(
+    child: child,
+  );
+}
+
+class _FadeRoute extends PageRouteBuilder {
+  final Widget child;
+  _FadeRoute({this.child})
+      : super(
+    pageBuilder: (
+        BuildContext context,
+        Animation<double> animation,
+        Animation<double> secondaryAnimation,
+        ) =>
+    child,
+    transitionsBuilder: (
+        BuildContext context,
+        Animation<double> animation,
+        Animation<double> secondaryAnimation,
+        Widget child,
+        ) =>
+        FadeTransition(
+          opacity: animation,
+          child: child,
+        ),
+  );
+}

lib/FlutterWeb/services/navigation_service.dart

@@ -0,0 +1,15 @@
+
+import 'package:flutter/material.dart';
+
+class NavigationService {
+  final GlobalKey<NavigatorState> navigatorKey =
+  GlobalKey<NavigatorState>();
+
+  Future<dynamic> navigateTo(String routeName) {
+    return navigatorKey.currentState.pushNamed(routeName);
+  }
+
+   goBack() {
+    return navigatorKey.currentState.pop();
+  }
+}

lib/FlutterWeb/views/about/about_view.dart

@@ -0,0 +1,13 @@
+
+import 'package:flutter/material.dart';
+
+class FlutterWebAboutScreen extends StatelessWidget {
+  const FlutterWebAboutScreen({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Text('About'),
+    );
+  }
+}

lib/FlutterWeb/views/episodes/episodes_view.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/material.dart';
+
+class FlutterWebEpisodesScreen extends StatelessWidget {
+  const FlutterWebEpisodesScreen({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Text('Episodes'),
+    );
+  }
+}

lib/FlutterWeb/views/home/home_content_desktop.dart

@@ -0,0 +1,19 @@
+
+import 'package:all_flutter_gives/FlutterWeb/widgets/call_to_action/call_to_action.dart';
+import 'package:all_flutter_gives/FlutterWeb/widgets/course_details/course_details.dart';
+import 'package:flutter/material.dart';
+
+class HomeForDesktopScreens extends StatelessWidget {
+  const HomeForDesktopScreens({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        CourseDetails(),
+        Expanded(
+            child: Center(child: CallToAction("Join The Winning Team")))
+      ],
+    );
+  }
+}

lib/FlutterWeb/views/home/home_content_mobile.dart

@@ -0,0 +1,19 @@
+
+import 'package:all_flutter_gives/FlutterWeb/widgets/call_to_action/call_to_action.dart';
+import 'package:all_flutter_gives/FlutterWeb/widgets/course_details/course_details.dart';
+import 'package:flutter/material.dart';
+
+class HomeForMobileScreens extends StatelessWidget {
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        CourseDetails(),
+        SizedBox(height: 30,),
+        Center(child: CallToAction("Join The Winning Team"))
+      ],
+    );
+  }
+}

lib/FlutterWeb/views/home/home_view.dart

@@ -1,8 +1,14 @@
+import 'package:all_flutter_gives/FlutterWeb/views/home/home_content_desktop.dart';
+import 'package:all_flutter_gives/FlutterWeb/views/layout_template/layout_template.dart';
 import 'package:all_flutter_gives/FlutterWeb/widgets/call_to_action/call_to_action.dart';
 import 'package:all_flutter_gives/FlutterWeb/widgets/centered_view/centered_view.dart';
 import 'package:all_flutter_gives/FlutterWeb/widgets/course_details/course_details.dart';
 import 'package:all_flutter_gives/FlutterWeb/widgets/navigation_bar/navigation_bar.dart';
+import 'package:all_flutter_gives/FlutterWeb/widgets/navigation_drawer/navigation_drawer.dart';
 import 'package:flutter/material.dart';
+import 'package:responsive_builder/responsive_builder.dart';
+
+import 'home_content_mobile.dart';
 
 class FlutterWebHomeScreen extends StatelessWidget {
   //todo : To host on Firebase, run the following commands :
@@ -14,23 +20,9 @@ class FlutterWebHomeScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: Colors.white,
-      body: CenteredView(
-          child: Column(
-        children: [
-          NavigationBar(),
-          Expanded(
-            child: Row(
-              children: [
-                CourseDetails(),
-                Expanded(
-                    child: Center(child: CallToAction("Join The Winning Team")))
-              ],
-            ),
-          )
-        ],
-      )),
-    );
+        return ScreenTypeLayout(
+          mobile: HomeForMobileScreens(),
+          desktop: HomeForDesktopScreens(),
+        );
   }
 }

lib/FlutterWeb/views/layout_template/layout_template.dart

@@ -0,0 +1,42 @@
+
+import 'package:all_flutter_gives/FlutterWeb/routing/route_names.dart';
+import 'package:all_flutter_gives/FlutterWeb/routing/router.dart';
+import 'package:all_flutter_gives/FlutterWeb/services/navigation_service.dart';
+import 'package:all_flutter_gives/FlutterWeb/views/home/home_view.dart';
+import 'package:all_flutter_gives/FlutterWeb/widgets/centered_view/centered_view.dart';
+import 'package:all_flutter_gives/FlutterWeb/widgets/navigation_bar/navigation_bar.dart';
+import 'package:all_flutter_gives/FlutterWeb/widgets/navigation_drawer/navigation_drawer.dart';
+import 'package:flutter/material.dart';
+import 'package:responsive_builder/responsive_builder.dart';
+
+import '../../locator.dart';
+
+class FlutterWebLayoutTemplate extends StatelessWidget {
+  const FlutterWebLayoutTemplate({Key key}) : super(key: key);
+
+  // This layout template is for easy navigation between pages by using the Navigator Widget.
+
+  @override
+  Widget build(BuildContext context) {
+    return ResponsiveBuilder(
+      builder: (context, sizingInformation) => Scaffold(
+        drawer: sizingInformation.isMobile ? NavigationDrawer() : null,
+        backgroundColor: Colors.white,
+        body: CenteredView(
+          child: Column(
+            children: <Widget>[
+              NavigationBar(),
+              Expanded(
+                child: Navigator(
+                  key: locator<NavigationService>().navigatorKey,
+                  onGenerateRoute: generateRoute,
+                  initialRoute: HomeRoute,
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/FlutterWeb/widgets/course_details/course_details.dart

@@ -1,28 +1,40 @@
 import 'package:flutter/material.dart';
+import 'package:responsive_builder/responsive_builder.dart';
 
 class CourseDetails extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return Container(
-      width: 600,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: <Widget>[
-          Text(
-            'FLUTTER WEB.\nTHE BASICS',
-            style: TextStyle(
-                fontWeight: FontWeight.w800, fontSize: 80, height: 0.9),
-          ),
-          SizedBox(
-            height: 30,
-          ),
-          Text(
-            'In this course we will go over the basics of using Flutter Web for website development. Topics will include Responsive Layout, Deploying, Font Changes, Hover Functionality, Modals and more.',
-            style: TextStyle(fontSize: 21, height: 1.7),
+    return ResponsiveBuilder(
+      builder: (context, sizingInformation) {
+
+        var textAlignment =  sizingInformation.deviceScreenType == DeviceScreenType.desktop ? TextAlign.left : TextAlign.center;
+        double titleSize = sizingInformation.deviceScreenType == DeviceScreenType.mobile ? 50 : 80;
+        double descriptionSize = sizingInformation.deviceScreenType == DeviceScreenType.mobile ? 16 : 21;
+
+        return Container(
+          width: 600,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              Text(
+                'FLUTTER WEB.\nTHE BASICS',
+                style: TextStyle(
+                    fontWeight: FontWeight.w800, fontSize: titleSize, height: 0.9,),
+                textAlign: textAlignment,
+              ),
+              SizedBox(
+                height: 30,
+              ),
+              Text(
+                'In this course we will go over the basics of using Flutter Web for website development. Topics will include Responsive Layout, Deploying, Font Changes, Hover Functionality, Modals and more.',
+                style: TextStyle(fontSize: descriptionSize, height: 1.7),
+                textAlign: textAlignment,
+              ),
+            ],
           ),
-        ],
-      ),
+        );
+      },
     );
   }
 }

lib/FlutterWeb/widgets/navigation_bar/navbar_items.dart

@@ -0,0 +1,14 @@
+import 'package:all_flutter_gives/FlutterWeb/services/navigation_service.dart';
+import 'package:flutter/material.dart';
+
+import '../../locator.dart';
+
+Widget navigationBarItems(String title, String navigationPath) => GestureDetector(
+  onTap: () {
+    locator<NavigationService>().navigateTo(navigationPath);
+  },
+  child:   Text(
+        title,
+        style: TextStyle(fontSize: 18),
+      ),
+);

lib/FlutterWeb/widgets/navigation_bar/navbar_logo.dart

@@ -0,0 +1,14 @@
+
+import 'package:all_flutter_gives/FlutterWeb/locator.dart';
+import 'package:all_flutter_gives/FlutterWeb/routing/route_names.dart';
+import 'package:all_flutter_gives/FlutterWeb/services/navigation_service.dart';
+import 'package:flutter/material.dart';
+
+Widget navigationBarLogo() => GestureDetector(
+  onTap: () => locator<NavigationService>().navigateTo(HomeRoute),
+  child:   SizedBox(
+      height: 80,
+      width: 150,
+      child: Image.asset('assets/logo.png'),
+    ),
+);

lib/FlutterWeb/widgets/navigation_bar/navigation_bar.dart

@@ -1,37 +1,17 @@
+import 'package:all_flutter_gives/FlutterWeb/widgets/navigation_bar/navbar_logo.dart';
+import 'package:all_flutter_gives/FlutterWeb/widgets/navigation_bar/navigation_bar_tablet_desktop.dart';
 import 'package:flutter/material.dart';
+import 'package:responsive_builder/responsive_builder.dart';
+
+import 'navbar_items.dart';
+import 'navigation_bar_mobile.dart';
 
 class NavigationBar extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return Container(
-      height: 100,
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          SizedBox(
-            height: 80,
-            width: 150,
-            child: Image.asset('assets/logo.png'),
-          ),
-          Row(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              _NavBarItem('Episodes'),
-              SizedBox(
-                width: 60,
-              ),
-              _NavBarItem('About')
-            ],
-          )
-        ],
-      ),
-    );
-  }
-
-  _NavBarItem(String title) {
-    return Text(
-      title,
-      style: TextStyle(fontSize: 18),
+    return ScreenTypeLayout(
+      mobile: NavigationBarMobile(),
+      tablet: NavigationBarTabletDesktop(),
     );
   }
 }