first commit

lib/main.dart

@@ -8,10 +8,7 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Demo',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-        fontFamily: 'Poppins'
-      ),
+      theme: ThemeData(primarySwatch: Colors.blue, fontFamily: 'Poppins'),
       home: MyHomePage(title: 'Dashboard'),
     );
   }
@@ -44,9 +41,9 @@ class _MyHomePageState extends State<MyHomePage> {
           ),
         ],
       ),
-      body: new Column(
+      body: Column(
         children: <Widget>[
-          new DashboardBody(),
+          DashboardBody(),
         ],
       ),
     );

lib/styles/TextStyles.dart

@@ -1,27 +1,28 @@
 import "package:flutter/material.dart";
 
 class TextStyles {
-  static final poppins = const TextStyle(
-    fontFamily: 'Poppins'
-  );
+  static final poppins = const TextStyle(fontFamily: 'Poppins');
   static final letterGradeTextStyle = poppins.copyWith(
-      color: Colors.white,
-      fontSize: 22.0,
-      fontWeight: FontWeight.w400,
+    color: Colors.white,
+    fontSize: 22.0,
+    fontWeight: FontWeight.w400,
   );
   static final numberGradeTextStyle = poppins.copyWith(
-      color: Colors.white,
-      fontSize: 22.0,
-      fontWeight: FontWeight.w400,
+    color: Colors.white,
+    fontSize: 22.0,
+    fontWeight: FontWeight.w400,
   );
   static final courseNameTextStyle = poppins.copyWith(
-      color: Colors.black,
-      fontSize: 22.0,
-      fontWeight: FontWeight.w600,
+    color: Colors.black,
+    fontSize: 22.0,
+    fontWeight: FontWeight.w600,
+  );
+  static final courseNameTextStyleWhite = courseNameTextStyle.copyWith(
+    color: Colors.white,
   );
   static final courseDetailTextStyle = poppins.copyWith(
-      color: Colors.black54,
-      fontSize: 13.0,
-      fontWeight: FontWeight.w400,
+    color: Colors.black54,
+    fontSize: 13.0,
+    fontWeight: FontWeight.w400,
   );
 }

lib/ui/CourseRow.dart

@@ -2,83 +2,162 @@ import 'package:flutter/material.dart';
 import 'package:schoolpower_flutter/styles/TextStyles.dart';
 
 class CourseRow extends StatelessWidget {
-
   final int course;
+
   CourseRow(this.course);
 
+  double _getAppBarHeight(BuildContext context) =>
+      MediaQuery.of(context).size.height * 0.3;
+
   @override
   Widget build(BuildContext context) {
-    return new Container(
-      margin: const EdgeInsets.symmetric(
-        vertical: 8.0,
-        horizontal: 16.0,
+    final double appBarHeight = _getAppBarHeight(context);
+    final scoreCardContainer = Container(
+      width: 92.0,
+      height: 92.0,
+      margin: EdgeInsets.symmetric(vertical: 16.0),
+      decoration: BoxDecoration(
+        color: Colors.teal,
+        shape: BoxShape.rectangle,
+        borderRadius: BorderRadius.circular(8.0),
+        boxShadow: <BoxShadow>[
+          BoxShadow(
+            color: Colors.black26,
+            blurRadius: 3.0,
+          ),
+        ],
       ),
-      child: new Stack(
+      alignment: FractionalOffset.centerLeft,
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Text("A", style: TextStyles.letterGradeTextStyle),
+            Hero(
+              tag: course.toString() + "numGrade",
+              child: Text("100", style: TextStyles.numberGradeTextStyle),
+            ),
+          ],
+        ),
+      ),
+    );
+
+    final courseCardContainer = Container(
+      margin: EdgeInsets.fromLTRB(66.0, 26.0, 16.0, 16.0),
+      constraints: BoxConstraints.expand(),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
-          courseCard,
-          scoreCard,
+          Hero(
+            tag: course.toString() + "title",
+            child:
+                Text("Pre-Calculus 12", style: TextStyles.courseNameTextStyle),
+          ),
+          Container(
+            height: 3,
+          ),
+          Text("Samuel Owusu-Amoah", style: TextStyles.courseDetailTextStyle),
+          Text("2(A-E)", style: TextStyles.courseDetailTextStyle),
         ],
-      )
+      ),
     );
-  }
 
-  final scoreCard = new Container(
-    width: 92.0,
-    height: 92.0,
-    margin: new EdgeInsets.symmetric(
-      vertical: 16.0
-    ),
-    alignment: FractionalOffset.centerLeft,
-    decoration: new BoxDecoration(
-      color: Colors.teal,
-      shape: BoxShape.rectangle,
-      borderRadius: new BorderRadius.circular(8.0),
-      boxShadow: <BoxShadow>[
-        new BoxShadow(  
-          color: Colors.black26,
-          blurRadius: 5.0,
-          offset: new Offset(0.0, 3.0),
-        ),
-      ],
-    ),
-    child: new Center(
-      child: new Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: <Widget>[
-          new Text("A", style: TextStyles.letterGradeTextStyle),
-          new Text("100", style: TextStyles.numberGradeTextStyle),
-        ]
-      )
-    ),
-  );
+    final scoreCard = Hero(tag: course.toString(), child: scoreCardContainer);
 
-  final courseCard = new Container(
-    child: new Container(
-      margin: new EdgeInsets.fromLTRB(66.0, 26.0, 16.0, 16.0),
-      constraints: new BoxConstraints.expand(),
-      child: new Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: <Widget>[
-          new Text("Pre-Calculus 12", style: TextStyles.courseNameTextStyle),
-          new Container(height: 3,),
-          new Text("Samuel Owusu-Amoah", style: TextStyles.courseDetailTextStyle),
-          new Text("2(A-E)", style: TextStyles.courseDetailTextStyle),
-        ]
+    final courseCard = Container(
+      child: courseCardContainer,
+      height: 124.0,
+      margin: EdgeInsets.only(left: 46.0),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        shape: BoxShape.rectangle,
+        borderRadius: BorderRadius.circular(8.0),
+        boxShadow: <BoxShadow>[
+          BoxShadow(
+            color: Colors.black12,
+            blurRadius: 5.0,
+          ),
+        ],
       ),
-    ),
-    height: 124.0,
-    margin: new EdgeInsets.only(left: 46.0),
-    decoration: new BoxDecoration(
-      color: Colors.white,
-      shape: BoxShape.rectangle,
-      borderRadius: new BorderRadius.circular(8.0),
-      boxShadow: <BoxShadow>[
-        new BoxShadow(  
-          color: Colors.black26,
-          blurRadius: 5.0,
-          offset: new Offset(0.0, 3.0),
+    );
+
+    final courseDetailAppBar = SliverAppBar(
+      expandedHeight: 200,
+      floating: false,
+      pinned: true,
+      flexibleSpace: FlexibleSpaceBar(
+        title: Text('PC12'),
+        collapseMode: CollapseMode.parallax,
+      ),
+      backgroundColor: Colors.teal,
+    );
+
+    final courseDetailPage = Scaffold(
+      body:
+//      Column(
+//        children: <Widget>[
+//          Hero(
+//            tag: course.toString(),
+//            child: Container(
+//              decoration: BoxDecoration(
+//                color: Colors.teal,
+//                boxShadow: <BoxShadow>[
+//                  BoxShadow(
+//                      color: Colors.black26,
+//                      blurRadius: 3.0,
+//                      offset: Offset(0, 3.0)),
+//                ],
+//              ),
+//              child:
+          CustomScrollView(
+        slivers: <Widget>[
+           courseDetailAppBar,
+
+          SliverFillRemaining(
+            child: Container(
+              height: 150,
+              margin: EdgeInsets.only(left: 20, top: 10),
+              decoration: BoxDecoration(
+                color: Colors.transparent,
+                shape: BoxShape.rectangle,
+              ),
+              child: Hero(
+                tag: course.toString() + "numGrade",
+                child: Text('100', style: TextStyles.numberGradeTextStyle),
+              ),
+            ),
+          ),
+        ],
+
+//              ),
+//            ),
+//          ),
+//        ],
+      ),
+    );
+
+    return GestureDetector(
+      onTap: () {
+        Navigator.of(context).push(
+          MaterialPageRoute<void>(
+            builder: (BuildContext context) {
+              return courseDetailPage;
+            },
+          ),
+        );
+      },
+      child: Container(
+        margin: const EdgeInsets.symmetric(
+          vertical: 8.0,
+          horizontal: 16.0,
+        ),
+        child: Stack(
+          children: <Widget>[
+            courseCard,
+            scoreCard,
+          ],
         ),
-      ],
-    ),
-  );
+      ),
+    );
+  }
 }

lib/ui/DashboardBody.dart

@@ -2,19 +2,15 @@ import 'package:flutter/material.dart';
 import 'package:schoolpower_flutter/ui/CourseRow.dart';
 
 class DashboardBody extends StatelessWidget {
-
-  final List<int> courses = [
-    1,1,1,1,1,1,1
-  ];
+  final List<int> courses = [1, 2, 3];
 
   @override
   Widget build(BuildContext context) {
-    return new Expanded(
-      child: new ListView.builder(
-        itemBuilder: (context, index) => new CourseRow(courses[index]),
-        itemCount: courses.length,
-        padding: new EdgeInsets.symmetric(vertical: 8.0)
-      ),
+    return Expanded(
+      child: ListView.builder(
+          itemBuilder: (context, index) => CourseRow(courses[index]),
+          itemCount: courses.length,
+          padding: EdgeInsets.symmetric(vertical: 8.0)),
     );
   }
 }