Valuebar miscalculated

[majbar-emir]

Description I've encountered an issue with the LinearGauge widget from the geekyants_flutter_gauges package, where the progress bar does not display correctly for certain values. Specifically, progress values of 25 or lower are not shown at all, and a value of 70 appears visually closer to 50, suggesting an offset in the progress calculation or rendering.

Steps to Reproduce Initialize a LinearGauge widget with the specified configuration. Set the progress value to 20 or lower. Notice that no progress is displayed on the gauge, as if the progress bar is completely missing. Increase the progress value to 60. The progress visually indicates a value closer to the 50% mark, not accurately reflecting the set value. Further increase the progress value to 90. The displayed progress seems to correspond to approximately 87.5%, with the discrepancy between the set value and the visual representation decreasing as the value increases. This behavior suggests an underlying issue with how the gauge calculates or renders progress, particularly less evident at higher values where the discrepancy becomes smaller but still noticeable. Expected Behavior The progress bar should accurately reflect the set progress value across the entire range of the gauge, without any offset or missing segments.

Actual Behavior Progress values of 25 or lower do not appear on the gauge, and a progress value of 70 is visually misrepresented, suggesting an underlying issue with how progress is calculated or rendered.

Environment Flutter version: 3.13.7 geekyants_flutter_gauges version: 1.0.3 Operating System & version: trying to implement it as costume widget in flutterflow Possible Solution N/A

Additional context

import 'package:flutter/material.dart';
import 'package:geekyants_flutter_gauges/geekyants_flutter_gauges.dart';

class CustomGaugeWidget extends StatefulWidget {
  const CustomGaugeWidget({
    super.key,
    this.width,
    this.height,
    required this.gaugethickness,
    required this.gaugeborderRadius,
    this.progressvalue,
    required this.lineargradient1,
    required this.lineargradient2,
    required this.pointerColor,
    required this.pointerheight,
    required this.pointerisInteractive,
    required this.showLabel,
    required this.showPrimaryRulers,
    required this.primaryRulerColor,
    required this.labelOffset,
    required this.animationDuration,
    required this.enableAnimation,
    required this.containerborderRadius,
    required this.containerthikness,
    required this.backgroundcolor,
  });

  final double? width;
  final double? height;
  final double gaugethickness;
  final double gaugeborderRadius;
  final double? progressvalue;
  final Color lineargradient1;
  final Color lineargradient2;
  final Color pointerColor;
  final double pointerheight;
  final bool pointerisInteractive;
  final bool showLabel;
  final bool showPrimaryRulers;
  final Color primaryRulerColor;
  final double labelOffset;
  final int animationDuration;
  final bool enableAnimation;
  final double containerborderRadius;
  final double containerthikness;
  final Color backgroundcolor;

  @override
  State<CustomGaugeWidget> createState() => _CustomGaugeWidgetState();
}

class _CustomGaugeWidgetState extends State<CustomGaugeWidget> {
  @override
  Widget build(BuildContext context) {
    return LinearGauge(
      showLinearGaugeContainer: true,
      start: 0.0,
      end: 100.0, // Defines the ending value of the gauge
      linearGaugeBoxDecoration: LinearGaugeBoxDecoration(
        thickness: widget.containerthikness,
        borderRadius: widget.containerborderRadius,
        edgeStyle: LinearEdgeStyle.endCurve, // Adjust as needed
        backgroundColor:
            widget.backgroundcolor, // Correctly using backgroundColor
      ),
      customLabels: const [
        CustomRulerLabel(text: "Start", value: 20),
        CustomRulerLabel(text: "2d Year", value: 40),
        CustomRulerLabel(text: "3d Year", value: 60),
        CustomRulerLabel(text: "4th Year", value: 80),
        CustomRulerLabel(text: "5th Year", value: 100),
      ],
      valueBar: [
        ValueBar(
          value: widget.progressvalue ?? 0.0,
          color: Colors.transparent,
          linearGradient: LinearGradient(
            colors: [widget.lineargradient1, widget.lineargradient2],
          ),
          valueBarThickness: widget.gaugethickness,
          borderRadius: widget.gaugeborderRadius,
          enableAnimation: widget.enableAnimation,
          animationDuration: widget.animationDuration,
        ),
      ],
      pointers: List.generate(
        4,
        (index) => Pointer(
          value:
              ((20 * (index + 1)) + 20), // Generates values 20, 40, 60, 80, 100
          shape: PointerShape.circle,
          color: widget.pointerColor,
          height: widget.pointerheight,
          pointerPosition: PointerPosition.center,
          isInteractive: widget.pointerisInteractive,
          onChanged: widget.pointerisInteractive
              ? (newValue) {
                  // Add your onChanged logic here if needed
                }
              : null,
        ),
      ),
      rulers: RulerStyle(
        primaryRulersHeight: 20,
        primaryRulersWidth: 2,
        showSecondaryRulers: widget.showLabel,
        showPrimaryRulers: widget.showPrimaryRulers,
        primaryRulerColor: widget.primaryRulerColor,
        secondaryRulerColor: Colors.grey,
        rulerPosition: RulerPosition.bottom,
        textStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.red),
        labelOffset: widget.labelOffset,
      ),
    );
  }
}

[Afroz-Shaikh]

Thank you @majbar-emir for raising the issue. After reviewing your issue, it seems that the problem may stem from how the gauge is configured. Currently if the Gauge has 5 CustomRulerLabels it divides the Gauge into 5 segments equally, The lowest value becomes the start of the Gauge So for your case the Start label holds value of 20 hence the gauge starts from 20, and second year is 40 so the value 50 is just ahead of it.

To Fix it in your code it could be done by adding a CustomRulerLabel with value 0 so that the gauge can divide equally or change the values to a more precise way

  customLabels: const [
        CustomRulerLabel(text: 'start', value: 0),
        CustomRulerLabel(text: "1st Year", value: 20),
        CustomRulerLabel(text: "2d Year", value: 40),
        CustomRulerLabel(text: "3d Year", value: 60),
        CustomRulerLabel(text: "4th Year", value: 80),
        CustomRulerLabel(text: "5th Year", value: 100),
      ],

If you have any further issues, please don't hesitate to create another issue!

[majbar-emir]

Thank you very much, it worked !!!