ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 07:07:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implemented new gauge design.

Browse Source
This commit is contained in:
Faris Armoush
2025-05-29 13:28:44 +03:00
parent 43cb985e74
commit 36ddebb5ae
4 changed files with 78 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
lib/pages/analytics/modules/air_quality/widgets/air_quality_end_side_gauge_and_info.dart
View File

@ -1,18 +1,25 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_gauge.dart';
import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_humidity_and_temperature.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
class AirQualityEndSideGaugeAndInfo extends StatelessWidget {
const AirQualityEndSideGaugeAndInfo({
super.key,
required this.temperature,
required this.humidity,
required this.aqiLevel,
});
final int temperature;
final int humidity;
final String aqiLevel;
double get aqi => switch (aqiLevel) {
'level_1' => 25.0,
'level_2' => 75.0,
'level_3' => 125.0,
_ => 0.0,
};
@override
Widget build(BuildContext context) {
@ -20,12 +27,12 @@ class AirQualityEndSideGaugeAndInfo extends StatelessWidget {
flex: 2,
child: Row(
children: [
const Expanded(
Expanded(
flex: 2,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [Expanded(child: AqiGauge(aqi: 200))],
children: [Expanded(child: AqiGauge(aqi: aqi))],
),
),
const Spacer(),
@ -33,34 +40,10 @@ class AirQualityEndSideGaugeAndInfo extends StatelessWidget {
child: Padding(
padding: const EdgeInsetsDirectional.only(end: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
// crossAxisAlignment: CrossAxisAlignment.stretch,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Spacer(),
FittedBox(
fit: BoxFit.contain,
alignment: AlignmentDirectional.centerStart,
child: Text(
'Air Quality:',
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor,
fontWeight: FontWeight.w400,
fontSize: 14,
),
),
),
FittedBox(
fit: BoxFit.contain,
alignment: AlignmentDirectional.centerStart,
child: Text(
'Perfect',
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.green,
fontWeight: FontWeight.w400,
fontSize: 30,
),
),
),
const Spacer(),
AqiHumidityAndTemperature(
temperature: temperature,
humidity: humidity,

9
lib/pages/analytics/modules/air_quality/widgets/aqi_device_info.dart
View File

@ -41,7 +41,7 @@ class AqiDeviceInfo extends StatelessWidget {
final tempValue = _getValueForStatus(
status,
'temp_current',
formatter: (value) => value.toStringAsFixed(0),
formatter: (value) => (value / 10).toStringAsFixed(0),
);
final pm25Value = _getValueForStatus(
status,
@ -78,6 +78,13 @@ class AqiDeviceInfo extends StatelessWidget {
children: [
const AirQualityEndSideLiveIndicator(),
AirQualityEndSideGaugeAndInfo(
aqiLevel: status
.firstWhere(
(e) => e.code == 'air_quality_index',
orElse: () => Status(code: 'air_quality_index', value: ''),
)
.value
.toString(),
temperature: int.parse(tempValue),
humidity: int.parse(humidityValue),
),

97
lib/pages/analytics/modules/air_quality/widgets/aqi_gauge.dart
View File

@ -10,41 +10,32 @@ class AqiGauge extends StatelessWidget {
static const _minRange = 0.0;
static const _goodRange = 50.0;
static const _moderateRange = 100.0;
static const _poorRange = 150.0;
static const _unhealthyToSevereRange = 225.0;
static const _maxRange = 300.0;
static const _maxRange = 150.0;
Color _getPointerColor(double value) {
if (value <= _goodRange) {
return ColorsManager.goodGreen;
} else if (value <= _moderateRange) {
return ColorsManager.moderateYellow;
} else if (value <= _poorRange) {
return ColorsManager.poorOrange;
} else {
const unhealthyStart = _poorRange + 1;
if (value <= _unhealthyToSevereRange) {
final t =
(value - unhealthyStart) / (_unhealthyToSevereRange - unhealthyStart);
return Color.lerp(
ColorsManager.unhealthyRed,
ColorsManager.severePink,
t,
)!;
} else {
const severeStart = _unhealthyToSevereRange + 1;
final t = (value - severeStart) / (_maxRange - severeStart);
return Color.lerp(
ColorsManager.severePink,
ColorsManager.hazardousPurple,
t,
)!;
}
}
String _getStatusText(double value) {
return switch (value) {
<= _goodRange => 'Good',
<= _moderateRange => 'Moderate',
_ => 'Poor',
};
}
Color _darkenColor(Color color) => Color.lerp(
color,
Colors.black.withValues(alpha: 0.8),
0.4,
)!;
Color _getStatusColor(double value) => switch (value) {
<= _goodRange => ColorsManager.goodGreen,
<= _moderateRange => ColorsManager.moderateYellow,
_ => ColorsManager.poorOrange,
};
@override
Widget build(BuildContext context) {
final status = _getStatusText(aqi);
final statusColor = _getStatusColor(aqi);
return AnimatedRadialGauge(
value: aqi,
debug: false,
@ -60,24 +51,23 @@ class AqiGauge extends StatelessWidget {
alignment: AlignmentDirectional.bottomCenter,
child: Text.rich(
TextSpan(
text: value.toStringAsFixed(0),
text: 'Air Quality\n',
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor,
fontWeight: FontWeight.w700,
fontSize: 30,
fontWeight: FontWeight.w400,
fontSize: 12,
),
children: [
const TextSpan(
text: 'AQI',
style: TextStyle(
color: ColorsManager.textPrimaryColor,
TextSpan(
text: status,
style: context.textTheme.bodySmall?.copyWith(
color: _darkenColor(statusColor),
fontWeight: FontWeight.w400,
fontSize: 12,
fontSize: 30,
),
),
],
),
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
),
@ -98,7 +88,7 @@ class AqiGauge extends StatelessWidget {
color: ColorsManager.whiteColors,
border: GaugePointerBorder(
width: 6,
color: _getPointerColor(aqi),
color: statusColor,
),
shadow: const BoxShadow(
color: ColorsManager.blackColor,
@ -106,41 +96,24 @@ class AqiGauge extends StatelessWidget {
offset: Offset(0, 2),
),
),
transformer: const GaugeAxisTransformer.colorFadeIn(
background: ColorsManager.transparentColor,
interval: Interval(0, 0),
),
segments: [
const GaugeSegment(
segments: const [
GaugeSegment(
from: _minRange,
to: _goodRange,
cornerRadius: Radius.circular(16),
color: ColorsManager.goodGreen,
),
const GaugeSegment(
GaugeSegment(
from: _goodRange + 1,
to: _moderateRange,
cornerRadius: Radius.circular(16),
color: ColorsManager.moderateYellow,
),
const GaugeSegment(
GaugeSegment(
from: _moderateRange + 1,
to: _poorRange,
cornerRadius: Radius.circular(16),
color: ColorsManager.poorOrange,
),
const GaugeSegment(
from: _poorRange + 1,
to: _maxRange,
cornerRadius: Radius.circular(16),
gradient: GaugeAxisGradient(
colorStops: [0.0, 0.5, 1.0],
colors: [
ColorsManager.unhealthyRed,
ColorsManager.severePink,
ColorsManager.hazardousPurple,
],
),
color: ColorsManager.poorOrange,
),
],
),

41
lib/pages/analytics/modules/air_quality/widgets/aqi_humidity_and_temperature.dart
View File

@ -19,7 +19,6 @@ class AqiHumidityAndTemperature extends StatelessWidget {
BlendMode.srcIn,
);
@override
Widget build(BuildContext context) {
return FittedBox(
@ -29,30 +28,32 @@ class AqiHumidityAndTemperature extends StatelessWidget {
style: context.textTheme.bodySmall!.copyWith(
color: ColorsManager.textPrimaryColor,
fontWeight: FontWeight.w400,
fontSize: 12,
fontSize: 16,
),
child: Row(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SvgPicture.asset(
Assets.temperatureAqiSidebar,
height: iconSize,
width: iconSize,
colorFilter: colorFilter,
),
const SizedBox(width: 4),
Text('$temperature°C'),
const SizedBox(width: 10),
SvgPicture.asset(
Assets.humidityAqiSidebar,
height: iconSize,
width: iconSize,
colorFilter: colorFilter,
),
const SizedBox(width: 4),
Text('$humidity%'),
_buildIconAndValue(Assets.temperatureAqiSidebar, '$temperature°C'),
const SizedBox(height: 10),
_buildIconAndValue(Assets.humidityAqiSidebar, '$humidity%'),
],
),
),
);
}
Widget _buildIconAndValue(String icon, String value) {
return Row(
children: [
SvgPicture.asset(
icon,
height: iconSize,
width: iconSize,
colorFilter: colorFilter,
),
const SizedBox(width: 4),
Text(value),
],
);
}
}