Category / Section
How to enable rounded edges for the scale and range pointer in the Flutter radial gauge (SfRadialGauge)
1 min read
Description
This article explains how to set rounded edges for Flutter radial axis and range pointer.
Solution
You can customize the edges of radial axis and range pointer with their cornerStyle property. By using the cornerStyle property, you can apply rounded corner for start edge, end edge or both edges. Follow these steps to apply the rounded corner for axis and range pointer.
Step 1: Create a radial gauge and add a radial axis into it.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(),
],
)),
);
}
Step 2: Set the cornerstyle property of radial axis to enable the rounded corner for the axis.
axes: <RadialAxis>[ RadialAxis( axisLineStyle: AxisLineStyle( cornerStyle: CornerStyle.bothCurve, )) ],
Step 3: Add a range pointer to radial axis to point the desired value in the axis.
axes: <RadialAxis>[ RadialAxis( axisLineStyle: AxisLineStyle(cornerStyle: CornerStyle.bothCurve), pointers: <GaugePointer>[RangePointer(value: 50)]) ]
Step 4: Set the cornerStyle property of range pointer to customize their edge.
axes: <RadialAxis>[ RadialAxis( axisLineStyle: AxisLineStyle(cornerStyle: CornerStyle.bothCurve), pointers: <GaugePointer>[ RangePointer(value: 50, cornerStyle: CornerStyle.bothCurve) ]) ]
Output:
