syncrow-web/lib/pages/analytics/modules/air_quality/widgets/aqi_gauge.dart

import 'package:flutter/material.dart';
import 'package:gauge_indicator/gauge_indicator.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';

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,
              ],
            ),
          ),
        ],
      ),
    );
  }
}