aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFelipe Erias <felipeerias@igalia.com>2021-11-26 15:26:05 +0900
committerFelipe Erias <felipeerias@igalia.com>2021-11-26 15:26:05 +0900
commite1a0e2921bc80807fc0dc73cca77be9bdb2f6b33 (patch)
tree2db930cc2a7be7f3945253dc692e04e1f5f493f4
parentdf52cca7ddb759f01bb1e96037a88f058e7e23e7 (diff)
Colors and layouts; add tab tor 3D example
-rw-r--r--lib/homescreen.dart172
-rw-r--r--lib/page_hvac.dart15
-rw-r--r--lib/page_media.dart2
-rw-r--r--lib/widget_clock.dart13
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,
),
),
],