Colors and layouts; add tab tor 3D example

4 files changed, 124 insertions, 78 deletions

diff --git a/lib/homescreen.dart b/lib/homescreen.dart
index 8e4eb48..efc622e 100644
--- a/lib/homescreen.dart
+++ b/lib/homescreen.dart
@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_homescreen/page_dashboard.dart';
 import 'package:flutter_homescreen/page_home.dart';
@@ -5,6 +7,8 @@ import 'package:flutter_homescreen/page_hvac.dart';
 import 'package:flutter_homescreen/page_media.dart';
 import 'package:flutter_homescreen/widget_clock.dart';
 
+enum PageIndex { home, dashboard, hvac, media, demo3d }
+
 class Homescreen extends StatefulWidget {
   Homescreen({Key? key, required this.title}) : super(key: key);
 
@@ -25,68 +29,113 @@ class _HomescreenState extends State<Homescreen> with TickerProviderStateMixin {
     });
   }
 
+  Widget _childForIndex(int selectedIndex) {
+    switch (PageIndex.values[selectedIndex]) {
+      case PageIndex.home:
+        return HomePage(
+            key: ValueKey(selectedIndex),
+            onSetNavigationIndex: setNavigationIndex);
+      case PageIndex.dashboard:
+        return DashboardPage(key: ValueKey(selectedIndex));
+      case PageIndex.hvac:
+        return HVACPageContainer(key: ValueKey(selectedIndex));
+      case PageIndex.media:
+        return MediaPage(key: ValueKey(selectedIndex));
+      case PageIndex.demo3d:
+        return Text('3D demo');
+      default:
+        return Text('Undefined');
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
-    var screenHeight = MediaQuery.of(context).size.height;
-    var iconSize = screenHeight / 6;
-    var railSize = screenHeight / 5;
+    return Container(
+        color: Colors.deepPurple.shade50,
+        child: Center(
+            child: LayoutBuilder(
+          builder: _buildLayout,
+        )));
+  }
+
+  Widget _buildLayout(BuildContext context, BoxConstraints constraints) {
+    var iconSize = constraints.maxHeight / (PageIndex.values.length + 2);
+    var railSize = constraints.maxHeight / (PageIndex.values.length + 1);
 
     return Scaffold(
       body: Row(
         children: <Widget>[
-          Stack(
-            children: [
-              NavigationRail(
-                backgroundColor: Colors.black12,
-                selectedIndex: _selectedIndex,
-                groupAlignment: -1.0,
-                minWidth: railSize,
-                // leading widget?
-                // leading: Icon(Icons.house_outlined, size: iconSize),
-                // trailing widget does not expand to bottom
-                onDestinationSelected: (int index) {
-                  setNavigationIndex(index);
-                },
-                selectedIconTheme: IconTheme.of(context).copyWith(
-                  size: iconSize,
-                  color: Theme.of(context).accentColor,
-                ),
-                unselectedIconTheme: IconTheme.of(context).copyWith(
-                  size: iconSize,
-                  color: Theme.of(context).unselectedWidgetColor,
-                ),
-                labelType: NavigationRailLabelType.none,
-                destinations: <NavigationRailDestination>[
-                  NavigationRailDestination(
-                    icon: Icon(Icons.house_outlined),
-                    selectedIcon: Icon(Icons.house),
-                    label: Text('Home'),
-                  ),
-                  NavigationRailDestination(
-                    icon: Icon(Icons.drive_eta_outlined),
-                    selectedIcon: Icon(Icons.drive_eta),
-                    label: Text('Dashboard'),
+          Container(
+            decoration: BoxDecoration(
+                gradient: LinearGradient(
+                    begin: Alignment.centerLeft,
+                    end: Alignment.centerRight,
+                    colors: [
+                  Colors.blueGrey.shade800,
+                  Colors.blueGrey.shade900
+                ])),
+            child: Stack(
+              children: [
+                NavigationRail(
+                  backgroundColor: Colors.transparent,
+                  selectedIndex: _selectedIndex,
+                  groupAlignment: -1.0,
+                  minWidth: railSize,
+                  // leading widget?
+                  // leading: Icon(Icons.house_outlined, size: iconSize),
+                  // trailing widget does not expand to bottom
+                  onDestinationSelected: (int index) {
+                    setNavigationIndex(index);
+                  },
+                  selectedIconTheme: IconTheme.of(context).copyWith(
+                    size: iconSize,
+                    color: Colors.orangeAccent.shade100,
                   ),
-                  NavigationRailDestination(
-                    icon: Icon(Icons.thermostat_outlined),
-                    selectedIcon: Icon(Icons.thermostat),
-                    label: Text('HVAC'),
+                  unselectedIconTheme: IconTheme.of(context).copyWith(
+                    size: iconSize,
+                    color: Colors.blueGrey.shade400,
                   ),
-                  NavigationRailDestination(
-                    icon: Icon(Icons.music_note_outlined),
-                    selectedIcon: Icon(Icons.music_note),
-                    label: Text('Media'),
+                  labelType: NavigationRailLabelType.none,
+                  destinations: <NavigationRailDestination>[
+                    NavigationRailDestination(
+                      icon: Icon(Icons.house),
+                      selectedIcon: Icon(Icons.house),
+                      label: Text('Home'),
+                    ),
+                    NavigationRailDestination(
+                      icon: Icon(Icons.drive_eta),
+                      selectedIcon: Icon(Icons.drive_eta),
+                      label: Text('Dashboard'),
+                    ),
+                    NavigationRailDestination(
+                      icon: Icon(Icons.thermostat),
+                      selectedIcon: Icon(Icons.thermostat),
+                      label: Text('HVAC'),
+                    ),
+                    NavigationRailDestination(
+                      icon: Icon(Icons.music_note),
+                      selectedIcon: Icon(Icons.music_note),
+                      label: Text('Media'),
+                    ),
+                    NavigationRailDestination(
+                      icon: Icon(Icons.view_in_ar),
+                      selectedIcon: Icon(Icons.view_in_ar),
+                      label: Text('3D example'),
+                    ),
+                  ],
+                ),
+                Positioned(
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  // This is the info widget with time, date, etc.
+                  child: ClockWiddget(
+                    size: railSize,
+                    textColor: Colors.blueGrey.shade100,
                   ),
-                ],
-              ),
-              Positioned(
-                bottom: 0,
-                left: 0,
-                right: 0,
-                // This is the info widget with time, date, etc.
-                child: ClockWiddget(size: railSize),
-              )
-            ],
+                )
+              ],
+            ),
           ),
           const VerticalDivider(thickness: 1, width: 1),
           // This is the main content.
@@ -127,21 +176,4 @@ class _HomescreenState extends State<Homescreen> with TickerProviderStateMixin {
       ),
     );
   }
-
-  Widget _childForIndex(int selectedIndex) {
-    switch (selectedIndex) {
-      case 0:
-        return HomePage(
-            key: ValueKey(selectedIndex),
-            onSetNavigationIndex: setNavigationIndex);
-      case 1:
-        return DashboardPage(key: ValueKey(selectedIndex));
-      case 2:
-        return HVACPageContainer(key: ValueKey(selectedIndex));
-      case 3:
-        return MediaPage(key: ValueKey(selectedIndex));
-      default:
-        return Text('Undefined');
-    }
-  }
 }
diff --git a/lib/page_hvac.dart b/lib/page_hvac.dart
index 76e3178..ea6dd3b 100644
--- a/lib/page_hvac.dart
+++ b/lib/page_hvac.dart
@@ -65,7 +65,13 @@ class _HVACFanSpeedState extends State<HVACFanSpeed> {
 
   @override
   Widget build(BuildContext context) {
-    return Slider(
+    return SliderTheme(
+      data: SliderThemeData(
+        thumbColor: Colors.greenAccent.shade700,
+        activeTrackColor: Colors.greenAccent.shade700,
+        inactiveTrackColor: Colors.blueGrey.shade200,
+      ),
+      child: Slider(
       value: _currentSliderValue,
       min: 0,
       max: 300,
@@ -75,6 +81,7 @@ class _HVACFanSpeedState extends State<HVACFanSpeed> {
           _currentSliderValue = value;
         });
       },
+    ),
     );
   }
 }
@@ -251,9 +258,9 @@ class _HVACPageState extends State<HVACPage> {
     return Container(
         decoration: BoxDecoration(
             gradient: LinearGradient(
-                begin: Alignment.topLeft,
-                end: Alignment.bottomRight,
-                colors: [Colors.black, Colors.teal.shade900])),
+                begin: Alignment.topRight,
+                end: Alignment.bottomLeft,
+                colors: [Colors.blueGrey.shade900, Colors.grey.shade900])),
         child: Center(
             child: LayoutBuilder(
           builder: _buildLayout,
diff --git a/lib/page_media.dart b/lib/page_media.dart
index 65ebaf1..f87f20b 100644
--- a/lib/page_media.dart
+++ b/lib/page_media.dart
@@ -9,7 +9,7 @@ class MediaPage extends StatelessWidget {
     // describe the layout in terms of fractions of the container size
     double mainDimension = max(constraints.maxWidth, constraints.maxHeight);
     //double minDimension = min(constraints.maxWidth, constraints.maxHeight);
-    double iconSize = mainDimension / 16.0;
+    double iconSize = mainDimension / 12.0;
 
     return Container(
       color: Colors.blueGrey.shade900,
diff --git a/lib/widget_clock.dart b/lib/widget_clock.dart
index c66a659..27baff2 100644
--- a/lib/widget_clock.dart
+++ b/lib/widget_clock.dart
@@ -5,8 +5,10 @@ import 'package:intl/intl.dart';
 
 class ClockWiddget extends StatefulWidget {
   final double size;
+  final Color textColor;
 
-  const ClockWiddget({Key? key, required this.size}) : super(key: key);
+  const ClockWiddget({Key? key, required this.size, required this.textColor})
+      : super(key: key);
 
   @override
   _ClockWiddgetState createState() => _ClockWiddgetState();
@@ -16,6 +18,7 @@ class _ClockWiddgetState extends State<ClockWiddget> {
   late Timer _timer;
   DateTime _now = DateTime.now();
 
+
   @override
   void initState() {
     _now = DateTime.now();
@@ -38,6 +41,10 @@ class _ClockWiddgetState extends State<ClockWiddget> {
 
   @override
   Widget build(BuildContext context) {
+    TextStyle? textStyle = Theme.of(context)
+        .textTheme
+        .headline2
+        ?.copyWith(color: widget.textColor);
     return Container(
       height: widget.size,
       padding: EdgeInsets.all(16.0),
@@ -54,7 +61,7 @@ class _ClockWiddgetState extends State<ClockWiddget> {
             fit: BoxFit.contain,
             child: Text(
               DateFormat('EEEE').format(_now),
-              style: Theme.of(context).textTheme.headline2,
+              style: textStyle,
             ),
           ),
           const Divider(thickness: 1),
@@ -62,7 +69,7 @@ class _ClockWiddgetState extends State<ClockWiddget> {
             fit: BoxFit.contain,
             child: Text(
               DateFormat.jm().format(_now),
-              style: Theme.of(context).textTheme.headline2,
+              style: textStyle,
             ),
           ),
         ],