diff options
Diffstat (limited to 'lib/page_dashboard.dart')
| -rw-r--r-- | lib/page_dashboard.dart | 167 |
1 files changed, 95 insertions, 72 deletions
diff --git a/lib/page_dashboard.dart b/lib/page_dashboard.dart index 09d1eef..c354415 100644 --- a/lib/page_dashboard.dart +++ b/lib/page_dashboard.dart @@ -4,6 +4,7 @@ import 'dart:math'; import 'package:flutter/material.dart'; import 'package:flutter_homescreen/layout_size_helper.dart'; +// The Dashboard page. class DashboardPage extends StatefulWidget { DashboardPage({Key? key}) : super(key: key); @@ -26,13 +27,15 @@ class _DashboardPageState extends State<DashboardPage> { Duration(milliseconds: 10), (Timer timer) { setState(() { - double now = DateTime.now().millisecondsSinceEpoch / 1000; + double now = DateTime.now().millisecondsSinceEpoch / 2000; speed = 50 + 40 * sin(now); rpm = 0.5 + sin(now) / 3.0; fuel = 0.6 + cos(now) / 4.0; }); }, ); + // Animate the values for the demo. + // Eventually, we will get the state of the car from the API. super.initState(); } @@ -53,89 +56,69 @@ class _DashboardPageState extends State<DashboardPage> { colors: [Colors.teal.shade900, Colors.grey.shade900])), constraints: BoxConstraints.expand(), alignment: Alignment.center, - child: Column( + child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - Text( - '${speed.floor()} kpm', - style: Theme.of(context).textTheme.headline2, + Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Container( + height: sizeHelper.largeIconSize * 1, + width: sizeHelper.largeIconSize * 2, + decoration: BoxDecoration( + border: Border.all( + color: Theme.of(context).primaryColorLight, + width: sizeHelper.defaultBorder, + ), + borderRadius: BorderRadius.all( + Radius.circular(sizeHelper.largeIconSize / 2.0))), + child: Center( + child: Text( + '${speed.floor()} kpm', + style: Theme.of(context).textTheme.headline2, + ), + ), + ), + _RPMWidget(rpm), + _FuelWidget(fuel), + ], ), Row( mainAxisAlignment: MainAxisAlignment.spaceAround, + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - Expanded( - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.end, - children: [ - _TireWidget('Left front tire', 21, CrossAxisAlignment.end), - SizedBox( - height: sizeHelper.largeIconSize, - ), - _TireWidget('Left rear tire', 23, CrossAxisAlignment.end), - ], - ), + Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + _TireWidget('Left front tire', 21, CrossAxisAlignment.end), + _TireWidget('Left rear tire', 23, CrossAxisAlignment.end), + ], ), Image.asset( 'images/HMI_Dashboard_Car_720.png', - width: sizeHelper.largeIconSize, + width: 2.0 * sizeHelper.largeIconSize, fit: BoxFit.contain, ), - Expanded( - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - _TireWidget( - 'Right front tire', 21, CrossAxisAlignment.start), - SizedBox( - height: sizeHelper.largeIconSize, - ), - _TireWidget( - 'Right rear tire', 23, CrossAxisAlignment.start), - ], - ), + Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + _TireWidget('Right front tire', 21, CrossAxisAlignment.start), + _TireWidget('Right rear tire', 23, CrossAxisAlignment.start), + ], ), ], ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - _RPMWidget(rpm), - _FuelWidget(fuel), - ], - ) ], ), ); } } -class _TireWidget extends StatelessWidget { - String label; - int value; - CrossAxisAlignment crossAlign; - - _TireWidget(this.label, this.value, this.crossAlign); - - @override - Widget build(BuildContext context) { - var sizeHelper = LayoutSizeHelper(context); - return Column(crossAxisAlignment: crossAlign, children: [ - Text( - label, - style: Theme.of(context).textTheme.caption, - ), - Text( - '$value PSI', - style: Theme.of(context).textTheme.headline5, - ) - ]); - } -} - +// The RPM indicator. class _RPMWidget extends StatelessWidget { - double rpm; + final double rpm; _RPMWidget(this.rpm); @@ -150,13 +133,16 @@ class _RPMWidget extends StatelessWidget { style: Theme.of(context).textTheme.headline4, ), Container( - height: sizeHelper.largeIconSize, - width: sizeHelper.largeIconSize, + height: sizeHelper.largeIconSize * 1.5, + width: sizeHelper.largeIconSize * 1.5, child: RotatedBox( quarterTurns: 2, child: CircularProgressIndicator( value: rpm, - strokeWidth: sizeHelper.largeIconSize / 4.0, + color: HSLColor.fromColor(Colors.redAccent) + .withSaturation(rpm) + .toColor(), + strokeWidth: sizeHelper.largeIconSize / 2.0, semanticsLabel: 'RPM indicator', ), ), @@ -166,8 +152,9 @@ class _RPMWidget extends StatelessWidget { } } +// The fuel indicator. class _FuelWidget extends StatelessWidget { - double fuel; + final double fuel; _FuelWidget(this.fuel); @@ -176,16 +163,26 @@ class _FuelWidget extends StatelessWidget { var sizeHelper = LayoutSizeHelper(context); return Row( children: [ - Text( - 'Fuel', - style: Theme.of(context).textTheme.headline4, + Container( + height: sizeHelper.largeIconSize / 4.0, + width: sizeHelper.largeIconSize / 2.0, + child: Center( + child: Text( + 'Fuel', + style: Theme.of(context).textTheme.headline4, + ), + ), ), Container( height: sizeHelper.largeIconSize / 4.0, - width: sizeHelper.largeIconSize, - margin: EdgeInsets.all(sizeHelper.largePadding), + width: sizeHelper.largeIconSize * 1.5, + margin: EdgeInsets.fromLTRB( + 0, sizeHelper.largePadding, 0, sizeHelper.largePadding), child: LinearProgressIndicator( value: fuel, + color: HSLColor.fromColor(Colors.blueAccent) + .withSaturation(fuel) + .toColor(), semanticsLabel: 'RPM indicator', ), ) @@ -193,3 +190,29 @@ class _FuelWidget extends StatelessWidget { ); } } + +// The small indicator for the state of each tire. +class _TireWidget extends StatelessWidget { + final String label; + final int value; + final CrossAxisAlignment crossAlign; + + _TireWidget(this.label, this.value, this.crossAlign); + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: crossAlign, + children: [ + Text( + label, + style: Theme.of(context).textTheme.headline6, + ), + Text( + '$value PSI', + style: Theme.of(context).textTheme.headline4, + ), + ], + ); + } +} |