mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 15:17:31 +00:00
implemented gauge.
This commit is contained in:
@ -51,7 +51,7 @@ class AirQualityView extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
Expanded(
|
Expanded(
|
||||||
flex: 2,
|
flex: 3,
|
||||||
child: AirQualityEndSideWidget(),
|
child: AirQualityEndSideWidget(),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_svg/flutter_svg.dart';
|
import 'package:flutter_svg/flutter_svg.dart';
|
||||||
|
import 'package:gauge_indicator/gauge_indicator.dart';
|
||||||
import 'package:syncrow_web/utils/color_manager.dart';
|
import 'package:syncrow_web/utils/color_manager.dart';
|
||||||
import 'package:syncrow_web/utils/constants/assets.dart';
|
import 'package:syncrow_web/utils/constants/assets.dart';
|
||||||
import 'package:syncrow_web/utils/extension/build_context_x.dart';
|
import 'package:syncrow_web/utils/extension/build_context_x.dart';
|
||||||
@ -10,15 +11,29 @@ class AirQualityEndSideGaugeAndInfo extends StatelessWidget {
|
|||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Expanded(
|
return Expanded(
|
||||||
flex: 3,
|
flex: 2,
|
||||||
child: Row(
|
child: Row(
|
||||||
children: [
|
children: [
|
||||||
const Expanded(flex: 2, child: Placeholder()),
|
const Expanded(
|
||||||
|
flex: 3,
|
||||||
|
child: Row(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
mainAxisAlignment: MainAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Expanded(flex: 1, child: AqiGauge(aqi: 200)),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
const Spacer(),
|
const Spacer(),
|
||||||
Column(
|
Expanded(
|
||||||
|
child: Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
Text(
|
Expanded(
|
||||||
|
flex: 2,
|
||||||
|
child: FittedBox(
|
||||||
|
alignment: AlignmentDirectional.centerStart,
|
||||||
|
child: Text(
|
||||||
'Air Quality:',
|
'Air Quality:',
|
||||||
style: context.textTheme.bodySmall?.copyWith(
|
style: context.textTheme.bodySmall?.copyWith(
|
||||||
color: ColorsManager.textPrimaryColor,
|
color: ColorsManager.textPrimaryColor,
|
||||||
@ -26,7 +41,13 @@ class AirQualityEndSideGaugeAndInfo extends StatelessWidget {
|
|||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Text(
|
),
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: FittedBox(
|
||||||
|
fit: BoxFit.scaleDown,
|
||||||
|
alignment: AlignmentDirectional.centerStart,
|
||||||
|
child: Text(
|
||||||
'Perfect',
|
'Perfect',
|
||||||
style: context.textTheme.bodySmall?.copyWith(
|
style: context.textTheme.bodySmall?.copyWith(
|
||||||
color: ColorsManager.green,
|
color: ColorsManager.green,
|
||||||
@ -34,7 +55,13 @@ class AirQualityEndSideGaugeAndInfo extends StatelessWidget {
|
|||||||
fontSize: 30,
|
fontSize: 30,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
DefaultTextStyle(
|
),
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: FittedBox(
|
||||||
|
fit: BoxFit.scaleDown,
|
||||||
|
alignment: AlignmentDirectional.centerStart,
|
||||||
|
child: DefaultTextStyle(
|
||||||
style: context.textTheme.bodySmall!.copyWith(
|
style: context.textTheme.bodySmall!.copyWith(
|
||||||
color: ColorsManager.textPrimaryColor,
|
color: ColorsManager.textPrimaryColor,
|
||||||
fontWeight: FontWeight.w400,
|
fontWeight: FontWeight.w400,
|
||||||
@ -68,8 +95,146 @@ class AirQualityEndSideGaugeAndInfo extends StatelessWidget {
|
|||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class AqiGauge extends StatelessWidget {
|
||||||
|
const AqiGauge({super.key, required this.aqi});
|
||||||
|
|
||||||
|
final double aqi;
|
||||||
|
|
||||||
|
Color _getPointerColor(double value) {
|
||||||
|
if (value <= 50) {
|
||||||
|
return ColorsManager.goodGreen;
|
||||||
|
} else if (value <= 100) {
|
||||||
|
return ColorsManager.moderateYellow;
|
||||||
|
} else if (value <= 150) {
|
||||||
|
return ColorsManager.poorOrange;
|
||||||
|
} else {
|
||||||
|
if (value <= 225) {
|
||||||
|
final t = (value - 151) / (225 - 151);
|
||||||
|
return Color.lerp(
|
||||||
|
ColorsManager.unhealthyRed,
|
||||||
|
ColorsManager.severePink,
|
||||||
|
t,
|
||||||
|
)!;
|
||||||
|
} else {
|
||||||
|
final t = (value - 226) / (300 - 226);
|
||||||
|
return Color.lerp(
|
||||||
|
ColorsManager.severePink,
|
||||||
|
ColorsManager.hazardousPurple,
|
||||||
|
t,
|
||||||
|
)!;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return AnimatedRadialGauge(
|
||||||
|
value: aqi,
|
||||||
|
debug: false,
|
||||||
|
duration: const Duration(milliseconds: 200),
|
||||||
|
initialValue: 0,
|
||||||
|
alignment: Alignment.bottomCenter,
|
||||||
|
builder: (context, child, value) {
|
||||||
|
return Align(
|
||||||
|
alignment: AlignmentDirectional.bottomCenter,
|
||||||
|
child: FittedBox(
|
||||||
|
fit: BoxFit.scaleDown,
|
||||||
|
alignment: AlignmentDirectional.bottomCenter,
|
||||||
|
child: Text.rich(
|
||||||
|
TextSpan(
|
||||||
|
text: '${value.toInt()}',
|
||||||
|
style: context.textTheme.bodySmall?.copyWith(
|
||||||
|
color: ColorsManager.textPrimaryColor,
|
||||||
|
fontWeight: FontWeight.w700,
|
||||||
|
fontSize: 30,
|
||||||
|
),
|
||||||
|
children: [
|
||||||
|
const TextSpan(
|
||||||
|
text: 'AQI',
|
||||||
|
style: TextStyle(
|
||||||
|
color: ColorsManager.textPrimaryColor,
|
||||||
|
fontWeight: FontWeight.w400,
|
||||||
|
fontSize: 12,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
axis: GaugeAxis(
|
||||||
|
progressBar: const GaugeProgressBar.basic(color: Colors.transparent),
|
||||||
|
style: const GaugeAxisStyle(
|
||||||
|
cornerRadius: Radius.circular(16),
|
||||||
|
thickness: 10,
|
||||||
|
segmentSpacing: 4,
|
||||||
|
),
|
||||||
|
min: 0,
|
||||||
|
max: 300,
|
||||||
|
pointer: GaugePointer.circle(
|
||||||
|
position: const GaugePointerPosition.surface(),
|
||||||
|
shadow: const BoxShadow(
|
||||||
|
color: ColorsManager.transparentColor,
|
||||||
|
blurRadius: 0,
|
||||||
|
offset: Offset(0, 0),
|
||||||
|
),
|
||||||
|
radius: MediaQuery.sizeOf(context).width * 0.004,
|
||||||
|
color: ColorsManager.whiteColors,
|
||||||
|
border: GaugePointerBorder(
|
||||||
|
width: 4,
|
||||||
|
color: _getPointerColor(aqi),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
transformer: const GaugeAxisTransformer.colorFadeIn(
|
||||||
|
background: Colors.transparent,
|
||||||
|
interval: Interval(0, 0),
|
||||||
|
),
|
||||||
|
segments: [
|
||||||
|
const GaugeSegment(
|
||||||
|
from: 0,
|
||||||
|
to: 50,
|
||||||
|
cornerRadius: Radius.circular(16),
|
||||||
|
color: ColorsManager.goodGreen,
|
||||||
|
),
|
||||||
|
const GaugeSegment(
|
||||||
|
from: 51,
|
||||||
|
to: 100,
|
||||||
|
cornerRadius: Radius.circular(16),
|
||||||
|
color: ColorsManager.moderateYellow,
|
||||||
|
),
|
||||||
|
const GaugeSegment(
|
||||||
|
from: 101,
|
||||||
|
to: 150,
|
||||||
|
cornerRadius: Radius.circular(16),
|
||||||
|
color: ColorsManager.poorOrange,
|
||||||
|
),
|
||||||
|
const GaugeSegment(
|
||||||
|
from: 151,
|
||||||
|
to: 300,
|
||||||
|
cornerRadius: Radius.circular(16),
|
||||||
|
gradient: GaugeAxisGradient(
|
||||||
|
colorStops: [0.0, 0.5, 1.0],
|
||||||
|
colors: [
|
||||||
|
ColorsManager.unhealthyRed,
|
||||||
|
ColorsManager.severePink,
|
||||||
|
ColorsManager.hazardousPurple,
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
@ -61,6 +61,7 @@ dependencies:
|
|||||||
firebase_crashlytics: ^4.3.2
|
firebase_crashlytics: ^4.3.2
|
||||||
firebase_database: ^11.3.2
|
firebase_database: ^11.3.2
|
||||||
bloc: ^9.0.0
|
bloc: ^9.0.0
|
||||||
|
gauge_indicator: ^0.4.3
|
||||||
|
|
||||||
|
|
||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
|
Reference in New Issue
Block a user