Mobile/install guide (#90)

* New sliverbar asset & app icon

* Purple accent color in match of webapp, new sliverbar background

* Changed drawer top image

* Added card with link to setup guide

* SliverAppBar title dissapears when collapsed

* renamed setup guide button

Co-authored-by: Mathieu Bélanger <mathieu.belanger@logient.com>

Author: mateobelanger

mobile/android/app/src/main/AndroidManifest.xml

@@ -50,4 +50,4 @@
             android:value="2" />
     </application>
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-</manifest>
+</manifest>

mobile/android/app/src/main/res/mipmap-hdpi/ic_launcher.png

@@ -0,0 +1,2 @@
+const SETUP_GUIDE_URL =
+    'https://polycortex.github.io/polydodo/#/record-my-sleep';

mobile/android/app/src/main/res/mipmap-mdpi/ic_launcher.png

@@ -17,13 +17,14 @@ class NavDrawer extends StatelessWidget {
   Widget build(BuildContext context) {
     return Drawer(
       child: ListView(
-        padding: EdgeInsets.zero, //only(top: 8.0),
+        padding: EdgeInsets.only(top: 45.0),
         children: <Widget>[
           _createHeader(),
           _createDrawerItem(
             icon: Icons.dashboard,
             text: 'Dashboard',
             route: Routes.dashboardPage,
+            tab: NavdrawerTab.Dashboard,
             context: context,
           ),
           // Todo: find the real place for the device selector, up to debate
@@ -37,12 +38,14 @@ class NavDrawer extends StatelessWidget {
             icon: Icons.hotel,
             text: 'Record Sleep sequence',
             route: Routes.recordSleepGuidePage,
+            tab: NavdrawerTab.RecordSleep,
             context: context,
           ),
           _createDrawerItem(
             icon: Icons.analytics,
             text: 'History',
             route: Routes.sleepHistoryPage,
+            tab: NavdrawerTab.History,
             context: context,
           ),
         ],
@@ -52,22 +55,18 @@ class NavDrawer extends StatelessWidget {
 
   Widget _createHeader() {
     return DrawerHeader(
-        margin: EdgeInsets.zero,
-        padding: EdgeInsets.zero,
-        decoration: BoxDecoration(
-            image: DecorationImage(
-                fit: BoxFit.fill,
-                image: AssetImage('common/assets/img/Material-Wallpaper.jpg'))),
-        child: Stack(children: <Widget>[
-          Positioned(
-              bottom: 12.0,
-              left: 16.0,
-              child: Text('Polydodo',
-                  style: TextStyle(
-                      color: Colors.white,
-                      fontSize: 20.0,
-                      fontWeight: FontWeight.w500))),
-        ]));
+      margin: EdgeInsets.zero,
+      padding: EdgeInsets.zero,
+      decoration: BoxDecoration(
+        color: Color(3289693),
+        image: DecorationImage(
+          scale: 15,
+          fit: BoxFit.fitWidth,
+          image: AssetImage('common/assets/img/Objets.png'),
+        ),
+      ),
+      child: Stack(children: <Widget>[]),
+    );
   }
 
   Widget _createDrawerItem(
@@ -87,9 +86,7 @@ class NavDrawer extends StatelessWidget {
         ],
       ),
       onTap: () {
-        //context.bloc<NavdrawerBloc>().add(NavdrawerUpdated(state));
         ExtendedNavigator.of(context).popAndPush(route);
-        // ExtendedNavigator.of(context).replace(route);
       },
       selected: activeTab == tab,
     );

mobile/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:polydodo/src/presentation/navigation/navdrawer_tabs.dart';
 import 'package:polydodo/src/presentation/navigation/navdrawer_widget.dart';
+import 'package:polydodo/src/presentation/pages/dashboard/sliver_app_bar_title.dart';
 
 class DashboardPage extends StatelessWidget {
   @override
@@ -12,20 +13,19 @@ class DashboardPage extends StatelessWidget {
         headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
           return <Widget>[
             SliverAppBar(
+              brightness: Brightness.dark,
               expandedHeight: 200.0,
-              floating: false,
               pinned: true,
+              title: SliverAppBarTitle(child: Text('Polydodo')),
               flexibleSpace: FlexibleSpaceBar(
-                  centerTitle: false,
-                  title: Text('Polydodo',
-                      style: TextStyle(
-                        color: Colors.white,
-                        fontSize: 16.0,
-                      )),
-                  background: Image.network(
-                    'https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350',
+                centerTitle: true,
+                background: Container(
+                  child: Image.asset(
+                    'common/assets/img/polydodo_sliverbar_3_e.png',
                     fit: BoxFit.cover,
-                  )),
+                  ),
+                ),
+              ),
             ),
           ];
         },

mobile/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+
+class SliverAppBarTitle extends StatefulWidget {
+  final Widget child;
+  const SliverAppBarTitle({
+    Key key,
+    @required this.child,
+  }) : super(key: key);
+  @override
+  _SliverAppBarTitleState createState() {
+    return _SliverAppBarTitleState();
+  }
+}
+
+class _SliverAppBarTitleState extends State<SliverAppBarTitle> {
+  ScrollPosition _position;
+  bool _visible;
+  @override
+  void dispose() {
+    _removeListener();
+    super.dispose();
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _removeListener();
+    _addListener();
+  }
+
+  void _addListener() {
+    _position = Scrollable.of(context)?.position;
+    _position?.addListener(_positionListener);
+    _positionListener();
+  }
+
+  void _removeListener() {
+    _position?.removeListener(_positionListener);
+  }
+
+  void _positionListener() {
+    var settings =
+        context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
+    var visible =
+        settings == null || settings.currentExtent <= settings.minExtent;
+    if (_visible != visible) {
+      setState(() {
+        _visible = visible;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Visibility(
+      visible: _visible,
+      child: widget.child,
+    );
+  }
+}

mobile/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png

@@ -2,20 +2,40 @@ import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:polydodo/src/application/blocs.dart';
+import 'package:polydodo/src/constants.dart';
 import 'package:polydodo/src/presentation/navigation/navdrawer_tabs.dart';
 import 'package:polydodo/src/presentation/navigation/navdrawer_widget.dart';
 import 'package:polydodo/src/presentation/navigation/routes/router.gr.dart';
+import 'package:url_launcher/url_launcher.dart';
 
 class RecordSleepGuidePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text('Record Sleep')),
+      appBar: AppBar(title: Text('Record a sleep sequence')),
       drawer: NavDrawer(activeTab: NavdrawerTab.RecordSleep),
       body: PageView(
         children: [
-          Container(child: Center(child: Text('Record Sleep Guide'))),
-          Container(child: Center(child: Text('Record Sleep next'))),
+          Container(
+            child: Center(
+              child: Column(
+                children: [
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Padding(
+                        padding: const EdgeInsets.symmetric(
+                          vertical: 100.0,
+                          horizontal: 20,
+                        ),
+                      ),
+                    ],
+                  ),
+                  _buildSleepGuideCard(context),
+                ],
+              ),
+            ),
+          ),
         ],
       ),
       floatingActionButton: FloatingActionButton.extended(
@@ -30,3 +50,119 @@ class RecordSleepGuidePage extends StatelessWidget {
     );
   }
 }
+
+void _launchURL() async {
+  if (await canLaunch(SETUP_GUIDE_URL)) {
+    await launch(SETUP_GUIDE_URL);
+  } else {
+    throw 'Could not launch $SETUP_GUIDE_URL';
+  }
+}
+
+Widget _buildSleepGuideCard(BuildContext context) {
+  return Container(
+    child: InkWell(
+      onTap: _launchURL,
+      child: Container(
+        height: 345.0,
+        margin: EdgeInsets.all(10.0),
+        width: 400.0,
+        child: Stack(
+          alignment: Alignment.topCenter,
+          children: <Widget>[
+            Positioned(
+              bottom: 15.0,
+              child: Container(
+                height: 150.0,
+                width: 320.0,
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(10.0),
+                ),
+                child: Padding(
+                  padding: EdgeInsets.all(5.0),
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: <Widget>[
+                      Text(
+                        'Setup Guide',
+                        style: TextStyle(
+                          fontSize: 22.0,
+                          fontWeight: FontWeight.w600,
+                          letterSpacing: 1.2,
+                        ),
+                      ),
+                      Text(
+                        "Prior to starting the recording, make sure that you've followed the installation procedures stated in this guide.",
+                        style: TextStyle(
+                          color: Colors.grey,
+                          fontSize: 12,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+            Container(
+              decoration: BoxDecoration(
+                color: Theme.of(context).primaryColor,
+                borderRadius: BorderRadius.circular(20.0),
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.black26,
+                    offset: Offset(0.0, 2.0),
+                    blurRadius: 6.0,
+                  ),
+                ],
+              ),
+              child: Stack(
+                children: <Widget>[
+                  Hero(
+                    tag: 'common/assets/img/Objets.png',
+                    child: ClipRRect(
+                      borderRadius: BorderRadius.circular(20.0),
+                      child: Image(
+                        height: 250.0,
+                        width: 305.0,
+                        image: AssetImage('common/assets/img/Objets.png'),
+                        fit: BoxFit.cover,
+                      ),
+                    ),
+                  ),
+                  Positioned(
+                    left: 80.0,
+                    bottom: 10.0,
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: <Widget>[
+                        Row(
+                          children: <Widget>[
+                            Icon(
+                              Icons.book,
+                              size: 15.0,
+                              color: Colors.white,
+                            ),
+                            SizedBox(width: 5.0),
+                            Text(
+                              'Tap to open the guide',
+                              style: TextStyle(
+                                color: Colors.white,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            )
+          ],
+        ),
+      ),
+    ),
+  );
+}

mobile/common/assets/img/Dodo4.png

@@ -1,6 +1,21 @@
 import 'package:flutter/material.dart';
 
 final theme = ThemeData(
-  primarySwatch: Colors.blue,
+  primaryColor: HexColor('32325D'),
+  buttonColor: HexColor('FC7C5F'),
+  floatingActionButtonTheme:
+      FloatingActionButtonThemeData(backgroundColor: HexColor('FC7C5F')),
   visualDensity: VisualDensity.adaptivePlatformDensity,
 );
+
+class HexColor extends Color {
+  static int _getColorFromHex(String hexColor) {
+    hexColor = hexColor.toUpperCase().replaceAll('#', '');
+    if (hexColor.length == 6) {
+      hexColor = 'FF' + hexColor;
+    }
+    return int.parse(hexColor, radix: 16);
+  }
+
+  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
+}