FLUT-965284 - [Feature] Added Gauges UG improvement changes.

Flutter/linear-gauge/animation.md

@@ -114,7 +114,29 @@ Both the shape and widget marker pointers have the same set of properties and be
 
 ![Animate marker pointer in linear gauge](images/animation/shape-pointer/bounceout.gif)
 
+## Event
 
+The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onAnimationCompleted.html) called when the pointer animation is completed. The default value is null.
 
+{% highlight dart %} 
 
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: Center(
+          child: SfLinearGauge(
+            markerPointers:[
+              LinearShapePointer(
+                onAnimationCompleted: () {
+                  print("Shape Pointer animation is completed");
+                },
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
 
+{% endhighlight %}

Flutter/linear-gauge/interaction.md

@@ -13,7 +13,7 @@ The shape and widget marker pointers in a Linear Gauge can be moved from one val
 
 ## Interaction with marker pointers
 
-The `onChanged` callback enables you to change the value of marker pointers at runtime through user interaction.
+The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChanged.html) callback enables you to change the value of marker pointers at runtime through user interaction.
 
 The following code sample demonstrates how to update a simple marker pointer value based on swipe or drag gestures:
 

Flutter/linear-gauge/range.md

@@ -71,6 +71,42 @@ However, to draw concave, convex and exponential-like shapes the [`midValue`](ht
 
 ![Draw linear gauge concave range](images/gauge-range/range-concave.png)
 
+## Customize edge style
+
+The edge style can be changed with the [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/edgeStyle.html) property of the gauge range. The edge style can be any of the `startCurve`, `endCurve`, `bothCurve`, and `bothFlat` options. The default value is `bothFlat`.
+
+{% highlight dart %} 
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: Center(
+          child: Container(
+            width: 400,
+            height: 120,
+            child: SfLinearGauge(
+              ranges: [
+                LinearGaugeRange(
+                  startValue: 0,
+                  startWidth: 20,
+                  endWidth: 20,
+                  endValue: 70,  
+                  edgeStyle: LinearEdgeStyle.bothCurve,
+                  color: Colors.blue,
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+{% endhighlight %}
+
+![Change the gauge range edge style](images/gauge-range/edge_style.png)
+
 ## Customize color of a range
 
 The color of a range can be changed by setting the [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/color.html) property of a range. The below code example demonstrates changing the color property of the range.

Flutter/linear-gauge/shape-marker-pointer.md

@@ -235,7 +235,7 @@ In addition to position the shape pointer, it is also possible to change the off
 
 ## Drag behavior
 
-You can drag the pointers freely to any position when adding multiple pointers by setting the `dragBehavior` property to `LinearMarkerDragBehavior.free`.
+You can drag the pointers freely to any position when adding multiple pointers by setting the [`dragBehavior`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/dragBehavior.html) property to `LinearMarkerDragBehavior.free`.
 
 The `LinearMarkerDragBehavior.constrained` can be used to limit the active pointer dragging beyond the other pointers.
 
@@ -331,7 +331,7 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point
 
 ## Handle onChangeStart, onChanged, and onChangeEnd callbacks
 
-The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) provides the `onChangeStart`, `onChanged`, and `onChangeEnd` callbacks. The `onChangeStart` callback will be called when the user start dragging the pointer, the `onChanged` callback will be called when dragging the pointer and the `onChangeEnd` callback will be called when the user stops the pointer dragging.
+The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) provides the [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeStart.html), [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChanged.html), and [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeEnd.html) callbacks. The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeStart.html) callback will be called when the user start dragging the pointer, the [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChanged.html) callback will be called when dragging the pointer and the [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeEnd.html) callback will be called when the user stops the pointer dragging.
 
 {% highlight dart %}
 

Flutter/linear-gauge/widget-marker-pointer.md

@@ -126,7 +126,7 @@ In addition to position the widget marker pointer, it is also possible to change
 
 ## Drag behavior
 
-You can drag the pointers freely to any position when adding multiple pointers by setting the `dragBehavior` property to `LinearMarkerDragBehavior.free`.
+You can drag the pointers freely to any position when adding multiple pointers by setting the [`dragBehavior`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/dragBehavior.html) property to `LinearMarkerDragBehavior.free`.
 
 The `LinearMarkerDragBehavior.constrained` can be used to limit the active pointer dragging beyond the other pointers.
 
@@ -218,7 +218,7 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point
 
 ## Handle onChangeStart, onChanged, and onChangeEnd callbacks
 
-The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html) provides the `onChangeStart`, `onChanged`, and `onChangeEnd` callbacks. The `onChangeStart` callback will be called when the user start dragging the pointer, the `onChanged` callback will be called when dragging the pointer and the `onChangeEnd` callback will be called when the user stops the pointer dragging.
+The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html) provides the [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeStart.html), [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChanged.html), and [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeEnd.html) callbacks. The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeStart.html) callback will be called when the user start dragging the pointer, the [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChanged.html) callback will be called when dragging the pointer and the [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeEnd.html) callback will be called when the user stops the pointer dragging.
 
 {% highlight dart %}
 

Flutter/radial-gauge/animation.md

@@ -114,4 +114,4 @@ The animation type can be changed using the [`animationType`](https://pub.dev/do
 
 {% endhighlight %}
 
-![pointer animation](images/animation/animation.gif)
+![pointer animation](images/animation/animation.gif)

Flutter/radial-gauge/axes.md

@@ -964,7 +964,7 @@ The [`onAxisTapped`](https://pub.dev/documentation/syncfusion_flutter_gauges/lat
 
 ## Custom scale
 
-[`Radial gauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) allows you to display a set of values along with a custom scale based on your business logic using the [`onCreateAxisRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/onCreateAxisRenderer.html) event of the axis. The `onCreateAxisRenderer` event allows returning the custom renderer for the axis. In that, we can override methods of `RadialAxisRenderer` to create the custom axis.
+[`Radial gauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) allows you to display a set of values along with a custom scale based on your business logic using the [`onCreateAxisRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/onCreateAxisRenderer.html) event of the axis. The [`onCreateAxisRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/onCreateAxisRenderer.html) event allows returning the custom renderer for the axis. In that, we can override methods of `RadialAxisRenderer` to create the custom axis.
 
 {% highlight dart %}
 

Flutter/radial-gauge/pointers.md

@@ -136,4 +136,47 @@ Pointers can be dragged over the scale to change their values interactively. Thi
 
 {% endhighlight %}
 
+The [`onCreatePointerRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/onCreatePointerRenderer.html) callback used to create a custom pointer in the radial gauge. This callback available only in [`needlePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) and [`markerPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer-class.html).
 
+{% highlight dart %}
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: SfRadialGauge(
+          axes: <RadialAxis>[
+            RadialAxis(
+              pointers: <GaugePointer>[
+                MarkerPointer(
+                  value: 70,
+                  onCreatePointerRenderer: () {
+                    return _CustomPointerRenderer();
+                  },
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  class _CustomPointerRenderer extends MarkerPointerRenderer {
+    @override
+    void drawPointer(
+      Canvas canvas,
+      PointerPaintingDetails pointerPaintingDetails,
+      SfGaugeThemeData gaugeThemeData,
+    ) {
+      canvas.drawCircle(
+        pointerPaintingDetails.startOffset,
+        10,
+        Paint()..color = Colors.red,
+      );
+    }
+  }
+
+{% endhighlight %}
+
+![create pointer callback](images/pointers/on-create-pointer-renderer.png)