From e1a0e2921bc80807fc0dc73cca77be9bdb2f6b33 Mon Sep 17 00:00:00 2001 From: Felipe Erias Date: Fri, 26 Nov 2021 15:26:05 +0900 Subject: Colors and layouts; add tab tor 3D example --- lib/homescreen.dart | 172 ++++++++++++++++++++++++++++++-------------------- lib/page_hvac.dart | 15 +++-- lib/page_media.dart | 2 +- lib/widget_clock.dart | 13 +++- 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 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: [ - 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( - 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( + 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 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 { @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 { _currentSliderValue = value; }); }, + ), ); } } @@ -251,9 +258,9 @@ class _HVACPageState extends State { 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 { late Timer _timer; DateTime _now = DateTime.now(); + @override void initState() { _now = DateTime.now(); @@ -38,6 +41,10 @@ class _ClockWiddgetState extends State { @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 { 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 { fit: BoxFit.contain, child: Text( DateFormat.jm().format(_now), - style: Theme.of(context).textTheme.headline2, + style: textStyle, ), ), ], -- cgit 1.2.3-korg