How to drag a pointer in Flutter Linear Gauge?
In Flutter Linear Gauge, you can perform dragging interaction in pointers 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 as a child of any widget. Set the values for the SfLinearGauge.maximum and SfLinearGauge.minimum properties.
Step 3: Set markerPointers property with the required pointer type. Set the pointers’ value with the initialized double value, which should be between the minimum and maximum values. By using the onChanged property, you can change the pointers’ value as mentioned in the following code sample.
double shapePointerValue = 20;
double widgetPointerValue = 40;
@override
Widget build(BuildContext context) {
return Column(
children: [
SfLinearGauge(
minimum: 0.0,
maximum: 100.0,
markerPointers: [
LinearShapePointer(
value: shapePointerValue,
onChanged: (value) {
setState(() {
shapePointerValue = value;
});
}),
],
),
SfLinearGauge(
minimum: 0.0,
maximum: 100.0,
markerPointers: [
LinearWidgetPointer(
value: widgetPointerValue,
onChanged: (value) {
setState(() {
widgetPointerValue = value;
});
},
child: Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(15)),
child: Icon(
Icons.thumb_up_rounded,
color: Colors.white,
)))
],
),
],
);
}
Output
Check the following links for more features in Syncfusion® Flutter LinearGauge:
Live samples
