segmented_circular_progress.dart

Go to the documentation of this file.

import 'dart:math';
import 'package:connect/core/localization/app_localizations.dart';
 
import '/core/ui/widgets/custom_card.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:math';
 
class Co2EmissionIndicator extends StatelessWidget {
  final double value;
 
  const Co2EmissionIndicator({
    Key? key,
    required this.value,
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      child: CustomCard(
        padding: EdgeInsets.all(30.sp),
        child: CO2GaugeChart(
          value: 16246,
          maxValue: 30000,
          label: AppLocalizations.of(context).translate('CO₂ Emission'),
          size: 200.sp,
        ),
      ),
    );
  }
}
 
class Co2ArcIndicator extends StatelessWidget {
  const Co2ArcIndicator({
    Key? key,
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200.sp,
      height: 70.sp,
      child: const CustomPaint(
        painter: ArcPainter(),
      ),
    );
  }
}
 
class ArcPainter extends CustomPainter {
  const ArcPainter();
 
  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height - 20);
    final radius = size.width * 0.45;
    const startAngle = -5 * pi / 4; // -225 degrees
    const endAngle = pi / 4; // 45 degrees
    const strokeWidth = 6.0;
 
    // Define segments with small gaps
    const segments = [
      SegmentData(Color(0xFFFF6B3D), 0.145),
      SegmentData(Color(0xFF4CAF50), 0.34),
      SegmentData(Color(0xFFFF4B4B), 0.34),
      SegmentData(Color(0xFF2196F3), 0.145),
    ];
 
    // Draw segments
    double currentAngle = startAngle;
    final totalAngle = endAngle - startAngle;
    const gapAngle = pi / 90; // Small gap between segments
 
    for (final segment in segments) {
      final paint = Paint()
        ..color = segment.color
        ..style = PaintingStyle.stroke
        ..strokeWidth = strokeWidth
        ..strokeCap = StrokeCap.round;
 
      final sweepAngle = (totalAngle * segment.percentage) - gapAngle;
 
      canvas.drawArc(
        Rect.fromCircle(center: center, radius: radius),
        currentAngle,
        sweepAngle,
        false,
        paint,
      );
 
      // Draw end dot
      final dotPaint = Paint()
        ..color = segment.color
        ..style = PaintingStyle.fill;
 
      final angleForDot = currentAngle + sweepAngle;
      final dotCenter = Offset(
        center.dx + radius * cos(angleForDot),
        center.dy + radius * sin(angleForDot),
      );
 
      canvas.drawCircle(dotCenter, strokeWidth / 1.8, dotPaint);
 
      currentAngle += sweepAngle + gapAngle;
    }
 
    // Draw the extra blue dot at the end
    if (segments.isNotEmpty) {
      final lastSegment = segments.last;
      final extraDotCenter = Offset(
        center.dx + radius * cos(endAngle),
        center.dy + radius * sin(endAngle) - 8, // Offset slightly up
      );
 
      canvas.drawCircle(
        extraDotCenter,
        strokeWidth / 1.8,
        Paint()..color = lastSegment.color,
      );
    }
  }
 
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
 
class SegmentData {
  final Color color;
  final double percentage;
 
  const SegmentData(this.color, this.percentage);
}
 
class CO2GaugeChart extends StatelessWidget {
  final double value; // Current value
  final double maxValue; // Maximum possible value
  final String label; // Label text
  final double size; // Size of the gauge
 
  const CO2GaugeChart({
    Key? key,
    required this.value,
    required this.maxValue,
    required this.label,
    this.size = 200,
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: size,
      child: Stack(
        children: [
          Center(
            child: CustomPaint(
              size: Size(size, size / 2),
              painter: GaugePainter(
                value: value,
                maxValue: maxValue,
              ),
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            top: 40.sp,
            child: Column(
              children: [
                Text(
                  label,
                  style: const TextStyle(
                    color: Colors.grey,
                    fontSize: 14,
                  ),
                ),
                SizedBox(height: 5.sp),
                Text(
                  '${value.toStringAsFixed(0)} kg',
                  style: const TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
 
class GaugePainter extends CustomPainter {
  final double value;
  final double maxValue;
 
  GaugePainter({
    required this.value,
    required this.maxValue,
  });
 
  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height);
    final radius = size.height;
    const startAngle = pi;
    const sweepAngle = pi;
 
    // Define colors for segments
    final colors = [
      Colors.orange,
      Colors.green,
      Colors.red,
      Colors.blue,
    ];
 
    // Background arc (gray)
    final bgPaint = Paint()
      ..color = Colors.grey[200]!
      ..style = PaintingStyle.stroke
      ..strokeWidth = 12;
 
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      startAngle,
      sweepAngle,
      false,
      bgPaint,
    );
 
    // Calculate segment positions
    final segmentAngle = sweepAngle / colors.length;
    final progress = (value / maxValue).clamp(0.0, 1.0);
    final progressAngle = sweepAngle * progress;
 
    // Draw colored segments
    var currentAngle = startAngle;
    for (var i = 0; i < colors.length; i++) {
      final paint = Paint()
        ..color = colors[i]
        ..style = PaintingStyle.stroke
        ..strokeWidth = 12
        ..strokeCap = StrokeCap.round;
 
      final segEnd = currentAngle + segmentAngle;
      final drawAngle = progressAngle - (startAngle - currentAngle);
 
      if (drawAngle > 0) {
        canvas.drawArc(
          Rect.fromCircle(center: center, radius: radius),
          currentAngle,
          min(segmentAngle, drawAngle),
          false,
          paint,
        );
      }
 
      // Draw dots at segment boundaries
      final dotPaint = Paint()
        ..color = colors[i]
        ..style = PaintingStyle.fill;
 
      final dotPosition = Offset(
        center.dx + radius * cos(currentAngle),
        center.dy + radius * sin(currentAngle),
      );
 
      canvas.drawCircle(dotPosition, 6, dotPaint);
 
      currentAngle = segEnd;
    }
  }
 
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}