Create a main page structure along with scrollable video cards

patelneel55 · Jan 2, 2021 · d8dc65d · d8dc65d
1 parent 4af5ed0
commit d8dc65d
Show file tree

Hide file tree

Showing 17 changed files with 44 additions and 79 deletions.
diff --git a/frontend/memoree_client/lib/constants.dart → ...oree_client/lib/app/models/constants.dart b/frontend/memoree_client/lib/constants.dart → ...oree_client/lib/app/models/constants.dart
diff --git a/frontend/memoree_client/lib/themes.dart → ...memoree_client/lib/app/models/themes.dart b/frontend/memoree_client/lib/themes.dart → ...memoree_client/lib/app/models/themes.dart
@@ -3,13 +3,13 @@ import 'package:flutter/material.dart';
 class AppTheme {
   AppTheme._();
 
-  static Color _iconColor = Colors.redAccent.shade200;
+  static Color _iconColor = Colors.black87;
 
   static const Color _lightPrimaryColor = Colors.white;
   static const Color _lightPrimaryVariantColor = Colors.white;
   static const Color _lightSecondaryColor = Colors.green;
-  static const Color _lightOnPrimaryColor = Colors.black;
-  static const String _fontFamily = "OpenSans";
+  static const Color _lightOnPrimaryColor = Color(0xff3c4043);
+  static const String _fontFamily = "Montserrat";
 
   static final ThemeData lightTheme = ThemeData(
     fontFamily: _fontFamily,

diff --git a/frontend/memoree_client/lib/video_data.dart → ...ree_client/lib/app/models/video_data.dart b/frontend/memoree_client/lib/video_data.dart → ...ree_client/lib/app/models/video_data.dart
diff --git a/...tend/memoree_client/lib/app_scaffold.dart → ...ee_client/lib/app/pages/app_scaffold.dart b/...tend/memoree_client/lib/app_scaffold.dart → ...ee_client/lib/app/pages/app_scaffold.dart
@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 
-import 'package:memoree_client/drawer.dart';
-import 'package:memoree_client/widgets/app_bar.dart';
-import 'package:memoree_client/widgets/grid_results.dart';
+import 'package:memoree_client/app/pages/video_page.dart';
+import 'package:memoree_client/app/widgets/app_bar.dart';
+import 'package:memoree_client/app/widgets/drawer.dart';
 
 class AppScaffold extends StatelessWidget {
   final String page;
@@ -16,19 +16,13 @@ class AppScaffold extends StatelessWidget {
     return Scaffold(
         appBar:
             CustomAppBar(isMobile: isMobileLayout, isTablet: isTabletLayout),
-        drawer: isMobileLayout ? AppDrawer() : null,
+        drawer: isMobileLayout ? AppDrawer(isMobile: isMobileLayout,) : null,
         body: SafeArea(
             child: Container(
                 child: Row(children: <Widget>[
-          if (!isMobileLayout) AppDrawer(),
+          if (!isMobileLayout) AppDrawer(isMobile: isMobileLayout,),
           Container(
-              child: Expanded(child: page == "videos" ? ContentGrid() : null))
+              child: Expanded(child: VideoPage()))
         ]))));
   }
-
-  Widget appDrawer(bool isMobile, bool isTablet) {
-    if (isMobile) return AppDrawer();
-
-    return null;
-  }
 }
diff --git a/frontend/memoree_client/lib/pages/login.dart → ...d/memoree_client/lib/app/pages/login.dart b/frontend/memoree_client/lib/pages/login.dart → ...d/memoree_client/lib/app/pages/login.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:memoree_client/app/services/firebase_auth.dart';
-import 'package:memoree_client/app_scaffold.dart';
-import 'package:memoree_client/constants.dart';
+import 'package:memoree_client/app/pages/app_scaffold.dart';
+import 'package:memoree_client/app/models/constants.dart';
 
 class LoginPage extends StatefulWidget {
   @override

diff --git a/.../memoree_client/lib/pages/video_page.dart → ...oree_client/lib/app/pages/video_page.dart b/.../memoree_client/lib/pages/video_page.dart → ...oree_client/lib/app/pages/video_page.dart
@@ -1,17 +1,10 @@
 import 'package:flutter/material.dart';
-import 'package:memoree_client/widgets/grid_results.dart';
+
+import 'package:memoree_client/app/widgets/grid_results.dart';
 
 class VideoPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    // return Container(
-    //   padding: const EdgeInsets.only(top: 10.0),
-    //   child: Column(
-    //     children: <Widget>[
-    //       Text()
-    //     ],
-    //   ),
-    // );
     return FutureBuilder(
       future: Future.delayed(Duration(seconds: 3)),
       builder: (context, snapshot) {

diff --git a/...tend/memoree_client/lib/pages/videos.dart → .../memoree_client/lib/app/pages/videos.dart b/...tend/memoree_client/lib/pages/videos.dart → .../memoree_client/lib/app/pages/videos.dart
diff --git a/...oree_client/lib/widgets/account_info.dart → ..._client/lib/app/widgets/account_info.dart b/...oree_client/lib/widgets/account_info.dart → ..._client/lib/app/widgets/account_info.dart
@@ -1,8 +1,7 @@
 import 'package:flutter/material.dart';
 
+import 'package:memoree_client/app/pages/login.dart';
 import 'package:memoree_client/app/services/firebase_auth.dart';
-import 'package:memoree_client/app_scaffold.dart';
-import 'package:memoree_client/pages/login.dart';
 
 class AccountInfo extends StatefulWidget {
   @override
@@ -12,22 +11,6 @@ class AccountInfo extends StatefulWidget {
 class _AccountInfoState extends State<AccountInfo> {
   @override
   Widget build(BuildContext context) {
-    // return Container(
-    //   child: Center(
-    //     child: Column(
-    //       mainAxisSize: MainAxisSize.min,
-    //       children: <Widget>[
-    //         CircleAvatar(
-    //           radius: 30,
-    //           child: ClipOval(
-    //             child: Image.network(widget.photoUrl, fit: BoxFit.cover),
-    //           ),
-    //         )
-    //       ],
-    //     )
-    //   ),
-    // );
-
     return FutureBuilder(
       future: FirebaseAuthService().currentUser(),
       builder: (context, snapshot) {
@@ -76,20 +59,6 @@ class _AccountInfoState extends State<AccountInfo> {
                         padding: const EdgeInsets.all(10),
                         child: Text("Sign out", textScaleFactor: 1.1,)
                       ),
-                      // child: Padding(
-                      //   padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
-                      //   child: Row(
-                      //     mainAxisSize: MainAxisSize.min,
-                      //     mainAxisAlignment: MainAxisAlignment.center,
-                      //     children: <Widget>[
-                      //       Image(image: AssetImage("logos/google_logo.png"), height: 30.0),
-                      //       Padding(
-                      //         padding: const EdgeInsets.only(left: 10.0),
-                      //         child: Text("Sign in with Google")
-                      //       ),
-                      //     ],
-                      //   ),
-                      // ),
                     ),
                   ],
               ),

diff --git a/...d/memoree_client/lib/widgets/app_bar.dart → ...moree_client/lib/app/widgets/app_bar.dart b/...d/memoree_client/lib/widgets/app_bar.dart → ...moree_client/lib/app/widgets/app_bar.dart
@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
+
 import 'package:memoree_client/app/services/firebase_auth.dart';
-import 'package:memoree_client/constants.dart';
+import 'package:memoree_client/app/models/constants.dart';
+import 'package:memoree_client/app/widgets/account_info.dart';
 import 'package:memoree_client/search.dart';
-import 'package:memoree_client/widgets/account_info.dart';
 
 class CustomAppBar extends StatefulWidget with PreferredSizeWidget {
   final bool isMobile, isTablet;
@@ -28,7 +29,8 @@ class _CustomAppBarState extends State<CustomAppBar> {
         centerTitle: true,
         title: Row(
           children: <Widget>[
-            Text(PageTitles.appName),
+            Text(PageTitles.appName, style: TextStyle(fontWeight: FontWeight.w400, fontFamily: "ProductSans")),
+            SizedBox(width: 8,),
             if (!widget.isTablet)
               Flexible(
                   flex: 5,
@@ -93,7 +95,7 @@ class _CustomAppBarState extends State<CustomAppBar> {
                               barrierDismissible: true,
                               builder: (context) {
                                 return Align(
-                                  alignment: Alignment(0.98, -0.84),
+                                  alignment: Alignment(0.98, -0.79),
                                   child: Material(
                                     shape:
                                         RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),

diff --git a/.../memoree_client/lib/widgets/carousel.dart → ...oree_client/lib/app/widgets/carousel.dart b/.../memoree_client/lib/widgets/carousel.dart → ...oree_client/lib/app/widgets/carousel.dart
diff --git a/frontend/memoree_client/lib/drawer.dart → ...emoree_client/lib/app/widgets/drawer.dart b/frontend/memoree_client/lib/drawer.dart → ...emoree_client/lib/app/widgets/drawer.dart
@@ -1,7 +1,12 @@
 import 'package:flutter/material.dart';
-import 'package:memoree_client/constants.dart';
+
+import 'package:memoree_client/app/models/constants.dart';
+import 'package:memoree_client/app/widgets/account_info.dart';
 
 class AppDrawer extends StatefulWidget {
+  final isMobile;
+
+  AppDrawer({this.isMobile});
 
   @override
   _AppDrawerState createState() => _AppDrawerState();
@@ -22,15 +27,19 @@ class _AppDrawerState extends State<AppDrawer> {
               child: ListView(
                 padding: EdgeInsets.only(top: 25.0),
                 children: <Widget>[
+                  if(widget.isMobile)
+                    AccountInfo(),
+                  if(widget.isMobile)
+                    Divider(thickness: 2.0),
                   ListTile(
                     leading: const Icon(Icons.movie_outlined),
-                    title: const Text(PageTitles.videos),
+                    title: const Text(PageTitles.videos, style: TextStyle(fontWeight: FontWeight.w500)),
                     selected: _selectedIndex == 0,
                     onTap: () => { },
                   ),
                   ListTile(
                     leading: const Icon(Icons.video_library_outlined),
-                    title: const Text(PageTitles.folders),
+                    title: const Text(PageTitles.folders, style: TextStyle(fontWeight: FontWeight.w500)),
                     selected: _selectedIndex == 1,
                     onTap: () => {},
                   ),

diff --git a/...oree_client/lib/widgets/grid_results.dart → ..._client/lib/app/widgets/grid_results.dart b/...oree_client/lib/widgets/grid_results.dart → ..._client/lib/app/widgets/grid_results.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
-import 'package:memoree_client/widgets/video_card.dart';
+
+import 'package:memoree_client/app/widgets/video_card.dart';
 
 class ContentGrid extends StatefulWidget {
   @override
@@ -17,7 +17,8 @@ class _ContentGridState extends State<ContentGrid> {
       gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
         maxCrossAxisExtent: 300.0,
         crossAxisSpacing: 20.0,
-        // mainAxisSpacing: 20.0,
+        mainAxisSpacing: 10.0,
+        // childAspectRatio: 1.15,
       ),
       itemBuilder: (BuildContext context, int index) {
         return VideoCard(null);

diff --git a/frontend/memoree_client/lib/thumbnail.dart → ...ree_client/lib/app/widgets/thumbnail.dart b/frontend/memoree_client/lib/thumbnail.dart → ...ree_client/lib/app/widgets/thumbnail.dart
@@ -1,7 +1,7 @@
 import 'dart:io';
 
 import 'package:flutter/material.dart';
-import 'package:memoree_client/video_data.dart';
+import 'package:memoree_client/app/models/video_data.dart';
 
 class ThumbnailGenerator extends StatelessWidget {
   final VideoData videoData;

diff --git a/...emoree_client/lib/widgets/video_card.dart → ...ee_client/lib/app/widgets/video_card.dart b/...emoree_client/lib/widgets/video_card.dart → ...ee_client/lib/app/widgets/video_card.dart
@@ -3,8 +3,8 @@ import 'dart:ui';
 import 'package:fading_edge_scrollview/fading_edge_scrollview.dart';
 import 'package:flutter/material.dart';
 
-import 'package:memoree_client/thumbnail.dart';
-import 'package:memoree_client/video_data.dart';
+import 'package:memoree_client/app/widgets/thumbnail.dart';
+import 'package:memoree_client/app/models/video_data.dart';
 
 class VideoCard extends StatefulWidget {
   final VideoData videoData;

diff --git a/frontend/memoree_client/lib/main.dart b/frontend/memoree_client/lib/main.dart
@@ -1,16 +1,12 @@
-import 'package:firebase_core/firebase_core.dart';
 import 'package:flutter/material.dart';
-import 'package:memoree_client/app/models/user.dart';
-import 'package:memoree_client/app/services/firebase_auth.dart';
-import 'package:memoree_client/app_scaffold.dart';
-import 'package:memoree_client/constants.dart';
-import 'package:memoree_client/pages/login.dart';
-import 'package:memoree_client/themes.dart';
+
+import 'package:memoree_client/app/models/constants.dart';
+import 'package:memoree_client/app/pages/login.dart';
+import 'package:memoree_client/app/models/themes.dart';
 
 void main() => runApp(MyApp());
 
 class MyApp extends StatelessWidget {
-  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
     return MaterialApp(

diff --git a/frontend/memoree_client/pubspec.yaml b/frontend/memoree_client/pubspec.yaml
@@ -34,6 +34,7 @@ dependencies:
   provider: ^4.3.2+3
   video_player: ^1.0.1
   video_thumbnail_generator: ^0.0.6
+  fading_edge_scrollview: ^1.1.4
 
 dev_dependencies:
   flutter_test:

diff --git a/frontend/memoree_client/web/favicon.png b/frontend/memoree_client/web/favicon.png