In my App i have to make Speedo Meter to display users speed,
I created Design with Custom Ranges Successfully as (0 2 5 10 25 50 100 150 200 300 500 1000) as below.
As above image, Design has been done that i want.
But in this, problem is when i set value of Range Pointer and Needle Pointer to 60 its display needle pointer and range pointer is greater than 150. So please help me to how i can solve the problem.
And Second, how i can Display 1Gbps instead of 1000,
Below is My Source Code.
SfRadialGauge(axes: <RadialAxis>[
RadialAxis(
minimum: 0,
maximum: 1000,
showLastLabel: true,
onCreateAxisRenderer: () {
final CustomAxisRenderer renderer =
CustomAxisRenderer();
return renderer;
},
axisLabelStyle:
GaugeTextStyle(color: Colors.white),
axisLineStyle: AxisLineStyle(
thickness: 15.0,
color: Colors.blueGrey[300]),
minorTicksPerInterval: 1,
minorTickStyle: MinorTickStyle(
color: Colors.blueGrey[200], length: 7.0),
majorTickStyle: MajorTickStyle(
color: Colors.blueGrey[300],
length: 10.0),
pointers: <GaugePointer>[
NeedlePointer(
value: 60,
// speed ?? 0.0,
enableAnimation: true,
needleStartWidth: 0,
needleEndWidth: 5,
needleColor: Colors.black,
knobStyle: KnobStyle(
color: Colors.white,
borderColor: Colors.black,
knobRadius: 0.06,
borderWidth: 0.04),
tailStyle: TailStyle(
color: Colors.black,
width: 5,
length: 0.15)),
RangePointer(
value: 60,
width: 15.0,
enableAnimation: true,
color:
Color.fromARGB(255, 30, 64, 124)),
],
annotations: <GaugeAnnotation>[
GaugeAnnotation(
widget: Text(
curSpeed + " $unit",
style:
Themes.getTextStyleWhite(context),
),
positionFactor: 1,
angle: 90,
)
],
)
]),
class CustomAxisRenderer extends RadialAxisRenderer {
CustomAxisRenderer() : super();
/// Generated the 9 non-linear interval labels from 0 to 150
/// instead of actual generated labels.
@override
List<CircularAxisLabel> generateVisibleLabels() {
final List<CircularAxisLabel> _visibleLabels = <CircularAxisLabel>[];
for (num i = 0; i < 12; i++) {
final double _value = _calculateLabelValue(i);
final CircularAxisLabel label = CircularAxisLabel(
this.axis.axisLabelStyle, _value.toInt().toString(), i, false);
label.value = _value;
_visibleLabels.add(label);
_visibleLabels.map((e) => print("val:- ${e.value}"));
}
return _visibleLabels;
}
/// Returns the factor(0 to 1) from value to place the labels in an axis.
@override
double valueToFactor(double value) {
// 2 5 10 25 50 100 150 200 300 500 1000
if (value >= 0 && value <= 2) {
return (value * 0.125) / 2;
} else if (value > 2 && value <= 5) {
return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125);
} else if (value > 5 && value <= 10) {
return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125);
} else if (value > 10 && value <= 20) {
return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125);
} else if (value > 25 && value <= 50) {
return (((value - 25) * 0.125) / (50 - 30)) + (4 * 0.125);
} else if (value > 50 && value <= 100) {
return (((value - 50) * 0.125) / (100 - 50)) + (5 * 0.125);
} else if (value > 100 && value <= 150) {
return (((value - 100) * 0.125) / (150 - 100)) + (6 * 0.125);
} else if (value > 150 && value <= 200) {
return (((value - 150) * 0.125) / (200 - 150)) + (7 * 0.125);
} else if (value > 200 && value <= 300) {
return (((value - 200) * 0.125) / (300 - 200)) + (8 * 0.125);
} else if (value > 300 && value <= 500) {
return (((value - 300) * 0.125) / (500 - 300)) + (9 * 0.125);
} else if (value > 500 && value <= 1000) {
return (((value - 500) * 0.125) / (1000 - 500)) + (10 * 0.125);
} else {
return 1;
}
}
/// To return the label value based on interval
double _calculateLabelValue(num value) {
if (value == 0) {
return 0;
} else if (value == 1) {
return 2;
} else if (value == 2) {
return 5;
} else if (value == 3) {
return 10;
} else if (value == 4) {
return 25;
} else if (value == 5) {
return 50;
} else if (value == 6) {
return 100;
} else if (value == 7) {
return 150;
} else if (value == 8) {
return 200;
} else if (value == 9) {
return 300;
} else if (value == 10) {
return 500;
} else {
return 1000;
}
}
}
Please Help me, Thank You.