diff options
author | Felipe Erias <felipeerias@igalia.com> | 2021-12-02 01:15:06 +0900 |
---|---|---|
committer | Felipe Erias <felipeerias@igalia.com> | 2021-12-02 01:15:06 +0900 |
commit | ecc4dcabd28889594b94678f9a4ac74b903c05b8 (patch) | |
tree | 3b767866d31994d1e3205de7d31429cf0e4bc5e5 /lib | |
parent | 77ba5c09a4d90a7fa6585b6d1dbbe279b3d68593 (diff) |
Animate dashboard
Diffstat (limited to 'lib')
-rw-r--r-- | lib/page_dashboard.dart | 105 | ||||
-rw-r--r-- | lib/widget_clock.dart | 1 |
2 files changed, 82 insertions, 24 deletions
diff --git a/lib/page_dashboard.dart b/lib/page_dashboard.dart index 9b36f87..09d1eef 100644 --- a/lib/page_dashboard.dart +++ b/lib/page_dashboard.dart @@ -1,8 +1,46 @@ +import 'dart:async'; +import 'dart:math'; + import 'package:flutter/material.dart'; import 'package:flutter_homescreen/layout_size_helper.dart'; -class DashboardPage extends StatelessWidget { - const DashboardPage({Key? key}) : super(key: key); +class DashboardPage extends StatefulWidget { + DashboardPage({Key? key}) : super(key: key); + + @override + _DashboardPageState createState() => _DashboardPageState(); +} + +class _DashboardPageState extends State<DashboardPage> { + late Timer _timer; + + double speed = 20; + // between 0 and 1.0 + double rpm = 0.2; + // between 0 and 1.0 + double fuel = 0.2; + + @override + void initState() { + _timer = new Timer.periodic( + Duration(milliseconds: 10), + (Timer timer) { + setState(() { + double now = DateTime.now().millisecondsSinceEpoch / 1000; + speed = 50 + 40 * sin(now); + rpm = 0.5 + sin(now) / 3.0; + fuel = 0.6 + cos(now) / 4.0; + }); + }, + ); + super.initState(); + } + + @override + void dispose() { + _timer.cancel(); + super.dispose(); + } @override Widget build(BuildContext context) { @@ -19,7 +57,7 @@ class DashboardPage extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Text( - '0 kpm', + '${speed.floor()} kpm', style: Theme.of(context).textTheme.headline2, ), Row( @@ -30,17 +68,11 @@ class DashboardPage extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.end, children: [ - Text( - 'Left front tire', - style: Theme.of(context).textTheme.headline4, - ), + _TireWidget('Left front tire', 21, CrossAxisAlignment.end), SizedBox( height: sizeHelper.largeIconSize, ), - Text( - 'Left rear tire', - style: Theme.of(context).textTheme.headline4, - ), + _TireWidget('Left rear tire', 23, CrossAxisAlignment.end), ], ), ), @@ -54,17 +86,13 @@ class DashboardPage extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text( - 'Right front tire', - style: Theme.of(context).textTheme.headline4, - ), + _TireWidget( + 'Right front tire', 21, CrossAxisAlignment.start), SizedBox( height: sizeHelper.largeIconSize, ), - Text( - 'Right rear tire', - style: Theme.of(context).textTheme.headline4, - ), + _TireWidget( + 'Right rear tire', 23, CrossAxisAlignment.start), ], ), ), @@ -73,8 +101,8 @@ class DashboardPage extends StatelessWidget { Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ - _RPMWidget(), - _FuelWidget(), + _RPMWidget(rpm), + _FuelWidget(fuel), ], ) ], @@ -83,7 +111,34 @@ class DashboardPage extends StatelessWidget { } } +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, + ) + ]); + } +} + class _RPMWidget extends StatelessWidget { + double rpm; + + _RPMWidget(this.rpm); + @override Widget build(BuildContext context) { var sizeHelper = LayoutSizeHelper(context); @@ -100,7 +155,7 @@ class _RPMWidget extends StatelessWidget { child: RotatedBox( quarterTurns: 2, child: CircularProgressIndicator( - value: 0.75, + value: rpm, strokeWidth: sizeHelper.largeIconSize / 4.0, semanticsLabel: 'RPM indicator', ), @@ -112,6 +167,10 @@ class _RPMWidget extends StatelessWidget { } class _FuelWidget extends StatelessWidget { + double fuel; + + _FuelWidget(this.fuel); + @override Widget build(BuildContext context) { var sizeHelper = LayoutSizeHelper(context); @@ -126,7 +185,7 @@ class _FuelWidget extends StatelessWidget { width: sizeHelper.largeIconSize, margin: EdgeInsets.all(sizeHelper.largePadding), child: LinearProgressIndicator( - value: 0.75, + value: fuel, semanticsLabel: 'RPM indicator', ), ) diff --git a/lib/widget_clock.dart b/lib/widget_clock.dart index 27baff2..ae9fb26 100644 --- a/lib/widget_clock.dart +++ b/lib/widget_clock.dart @@ -18,7 +18,6 @@ class _ClockWiddgetState extends State<ClockWiddget> { late Timer _timer; DateTime _now = DateTime.now(); - @override void initState() { _now = DateTime.now(); |