diff --git a/assets/icons/automated_clock.svg b/assets/icons/automated_clock.svg new file mode 100644 index 0000000..f537623 --- /dev/null +++ b/assets/icons/automated_clock.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/icons/lock.svg b/assets/icons/lock.svg new file mode 100644 index 0000000..23e3db3 --- /dev/null +++ b/assets/icons/lock.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/lib/features/dashboard/view/dashboard_view.dart b/lib/features/dashboard/view/dashboard_view.dart index ee8c150..99a50d7 100644 --- a/lib/features/dashboard/view/dashboard_view.dart +++ b/lib/features/dashboard/view/dashboard_view.dart @@ -15,36 +15,38 @@ class DashboardView extends StatelessWidget { @override Widget build(BuildContext context) { - return Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - const TitleMedium( - text: StringsManager.dashboard, - style: TextStyle( - fontSize: 32, - fontWeight: FontWeight.bold, + return SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + const TitleMedium( + text: StringsManager.dashboard, + style: TextStyle( + fontSize: 32, + fontWeight: FontWeight.bold, + ), ), - ), - const LiveMonitorTab(), - const Gap(10), - const EnergyUsage(), - Container( - padding: const EdgeInsets.only(top: 20), - constraints: const BoxConstraints( - minHeight: 220, - maxHeight: 240, + const LiveMonitorTab(), + const Gap(10), + const EnergyUsage(), + Container( + padding: const EdgeInsets.only(top: 20), + constraints: const BoxConstraints( + minHeight: 220, + maxHeight: 240, + ), + child: const Column( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Consumption(), + Gap(20), + CarbonEmission(), + ], + ), ), - child: const Column( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Consumption(), - Gap(20), - CarbonEmission(), - ], - ), - ), - ], + ], + ), ); } } diff --git a/lib/features/dashboard/view/widgets/energy_usage.dart b/lib/features/dashboard/view/widgets/energy_usage.dart index 1781f0b..79f44e5 100644 --- a/lib/features/dashboard/view/widgets/energy_usage.dart +++ b/lib/features/dashboard/view/widgets/energy_usage.dart @@ -1,6 +1,8 @@ +import 'package:fl_chart/fl_chart.dart'; import 'package:flutter/material.dart'; import 'package:syncrow_app/features/dashboard/view/widgets/energy_usage_header.dart'; -import 'package:syncrow_app/generated/assets.dart'; +import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart'; +import 'package:syncrow_app/utils/resource_manager/color_manager.dart'; class EnergyUsage extends StatelessWidget { const EnergyUsage({ @@ -9,26 +11,168 @@ class EnergyUsage extends StatelessWidget { @override Widget build(BuildContext context) { - return Expanded( - child: DecoratedBox( - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(15), - ), - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const EnergyUsageHeader(), - Expanded( - child: Image.asset(Assets.imagesTestDash), - ) - ], - ), + return DecoratedBox( + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(15), + ), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const EnergyUsageHeader(), + ConstrainedBox( + constraints: const BoxConstraints( + maxHeight: 150, + minHeight: 150, + ), + child: LineChart( + LineChartData( + gridData: FlGridData( + show: true, + drawHorizontalLine: true, + horizontalInterval: 2, + drawVerticalLine: false, + getDrawingHorizontalLine: (value) { + return FlLine( + color: Colors.grey.withOpacity(.5), + strokeWidth: 1, + ); + }, + ), + titlesData: FlTitlesData( + show: true, + rightTitles: AxisTitles( + sideTitles: SideTitles( + showTitles: true, + interval: 1, + getTitlesWidget: leftTitleWidgets, + reservedSize: 25, + ), + ), + topTitles: const AxisTitles( + sideTitles: SideTitles(showTitles: false), + ), + bottomTitles: AxisTitles( + sideTitles: SideTitles( + showTitles: true, + reservedSize: 30, + interval: 12, + getTitlesWidget: (value, meta) { + switch (value.toInt()) { + case 0: + return SideTitleWidget( + axisSide: meta.axisSide, + child: BodySmall(text: '1'), + ); + + case 11: + return SideTitleWidget( + axisSide: meta.axisSide, + child: BodySmall(text: '28'), + ); + default: + return Container(); + } + }, + ), + ), + leftTitles: const AxisTitles( + sideTitles: SideTitles(showTitles: false), + ), + ), + minX: 0, + maxX: 11, + minY: 0, + maxY: 6, + lineBarsData: [ + LineChartBarData( + spots: const [ + FlSpot(0, 3), + FlSpot(2.6, 2), + FlSpot(4.9, 5), + FlSpot(6.8, 3.1), + FlSpot(8, 4), + FlSpot(9.5, 3), + FlSpot(11, 4), + ], + isCurved: true, + gradient: LinearGradient( + colors: [ + ColorsManager.primaryColor, + ColorsManager.primaryColor.withOpacity(0.3), + ], + ), + barWidth: 5, + isStrokeCapRound: true, + dotData: const FlDotData( + show: false, + ), + belowBarData: BarAreaData( + show: true, + gradient: LinearGradient( + colors: [ + ColorsManager.primaryColor.withOpacity(0.5), + ColorsManager.primaryColor.withOpacity(0.1), + ], + ), + ), + ), + ], + ), + ), + ) + ], ), ), ); } + + Widget leftTitleWidgets(double value, TitleMeta meta) { + String text; + switch (value.toInt()) { + case 1: + text = '1K'; + break; + case 3: + text = '3k'; + break; + case 5: + text = '5k'; + break; + default: + return Container(); + } + + return Center(child: BodySmall(text: text)); + } + + Widget bottomTitleWidgets(double value, TitleMeta meta) { + // const style = TextStyle( + // fontWeight: FontWeight.bold, + // fontSize: 16, + // ); + // Widget text; + // switch (value.toInt()) { + // case 2: + // text = const Text('MAR', style: style); + // break; + // case 5: + // text = const Text('JUN', style: style); + // break; + // case 8: + // text = const Text('SEP', style: style); + // break; + // default: + // text = const Text('', style: style); + // break; + // } + + return SideTitleWidget( + axisSide: meta.axisSide, + child: BodySmall(text: 'Feb'), + ); + } } diff --git a/lib/generated/assets.dart b/lib/generated/assets.dart index 2a4bff4..799e829 100644 --- a/lib/generated/assets.dart +++ b/lib/generated/assets.dart @@ -5,6 +5,7 @@ class Assets { static const String fontsAftikaRegular = 'assets/fonts/AftikaRegular.ttf'; static const String iconsAC = 'assets/icons/AC.svg'; static const String iconsActive = 'assets/icons/active.svg'; + static const String iconsAutomatedClock = 'assets/icons/automated_clock.svg'; static const String iconsCO2 = 'assets/icons/CO2.svg'; static const String iconsColdMode = 'assets/icons/coldMode.svg'; static const String iconsCurtain = 'assets/icons/Curtain.svg'; @@ -24,7 +25,7 @@ class Assets { static const String iconsLayout = 'assets/icons/Layout.svg'; static const String iconsLayoutFill = 'assets/icons/Layout-fill.svg'; static const String iconsLight = 'assets/icons/Light.svg'; - static const String iconsLogo = 'assets/icons/logo.png'; + static const String iconsLock = 'assets/icons/lock.svg'; static const String iconsMenu = 'assets/icons/Menu.svg'; static const String iconsMenuFill = 'assets/icons/Menu-fill.svg'; static const String iconsMinus = 'assets/icons/minus.svg'; diff --git a/pubspec.lock b/pubspec.lock index 8236457..1302d7c 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -113,6 +113,14 @@ packages: url: "https://pub.dev" source: hosted version: "5.4.1" + equatable: + dependency: transitive + description: + name: equatable + sha256: c2b87cb7756efdf69892005af546c56c0b5037f54d2a88269b4f347a505e3ca2 + url: "https://pub.dev" + source: hosted + version: "2.0.5" fake_async: dependency: transitive description: @@ -209,6 +217,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.1.0" + fl_chart: + dependency: "direct main" + description: + name: fl_chart + sha256: "00b74ae680df6b1135bdbea00a7d1fc072a9180b7c3f3702e4b19a9943f5ed7d" + url: "https://pub.dev" + source: hosted + version: "0.66.2" flutter: dependency: "direct main" description: flutter diff --git a/pubspec.yaml b/pubspec.yaml index d830539..b9a3ec8 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -19,6 +19,7 @@ dependencies: flutter_animated_dialog: ^2.0.1 gap: ^3.0.1 flutter_svg: ^2.0.9 + fl_chart: ^0.66.2 # Utility Packages flutter_secure_storage: ^9.0.0