How to add a custom widget as a pointer for Flutter Linear Gauge?
In Flutter Linear Gauge, you can use any widget as a pointer by following these steps:
Step 1: Add the Syncfusion® Flutter Gauges package to your dependencies in the pubspec.yaml file.
Step 2: Initialize the SfLinearGauge widget.
Step 3: Set the values for the SfLinearGauge.minimum and SfLinearGauge.maximum properties to define the range of your gauge.
Step 4: Add the SfLinearGauge.markerPointer property. Here, you will use the LinearWidgetPointer to add a custom widget as a pointer.
Step 5: Create a _iconWidget() method to return a widget; it takes the marker value as an argument.
Widget _iconWidget(double value) {
if (value > 0 && value < 80) {
return Icon(
Icons.volume_down,
size: 40,
color: Colors.black,
);
} else if (value > 80) {
return Icon(
Icons.volume_up,
size: 40,
color: Colors.red,
);
}
return Icon(
Icons.volume_mute,
size: 40,
color: Colors.grey,
);
}
Step 6: Set the _iconWidget() method for the LinearWidgetPointer.child property.
double _markerValue = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
width: 500,
child: SfLinearGauge(
minimum: 0,
maximum: 100,
axisTrackStyle: LinearAxisTrackStyle(
thickness: 15.0),
barPointers: [
LinearBarPointer(
value: _markerValue,
thickness: 15.0,
)
],
markerPointers: <LinearWidgetPointer>[
LinearWidgetPointer(
value: _markerValue,
onValueChanged: (value) {
setState(() {
_markerValue = value;
});
},
child: _iconWidget(_markerValue),
),
],
),
)),
);
}
Output
Check the following links for more features in Syncfusion® Flutter Gauges:
Live samples
Conclusion
I hope you enjoyed learning how to add a custom widget as a pointer for Flutter Linear Gauge.
You can refer to our Flutter Linear Gauge feature tour page to learn about other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
