Merge pull request #1296 from syncfusion-content/FLUT-965284-Gauges-ug-hotfix

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

Author: VijayakumarMariappan

Flutter/linear-gauge/animation.md

@@ -113,8 +113,3 @@ Both the shape and widget marker pointers have the same set of properties and be
 ### Marker pointer with `bounceOut` animation
 
 ![Animate marker pointer in linear gauge](images/animation/shape-pointer/bounceout.gif)
-
-
-
-
-

Flutter/linear-gauge/bar-pointer.md

@@ -362,4 +362,31 @@ You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documenta
 
 {% endhighlight %}
 
-![Add multiple bar pointers in a linear gauge](images/bar-pointer/multiple_bar_pointer.PNG)
+![Add multiple bar pointers in a linear gauge](images/bar-pointer/multiple_bar_pointer.PNG)
+
+## Animation completed callback
+
+The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/onAnimationCompleted.html) callback in the [`LinearBarPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer-class.html) will be triggered when the bar pointer animation is completed. The default value of the [onAnimationCompleted](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/onAnimationCompleted.html) callback is `null`.
+
+{% highlight dart %}
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: Center(
+          child: SfLinearGauge(
+            barPointer:[
+              LinearBarPointer(
+                onAnimationCompleted: () {
+                  print("Bar Pointer animation is completed");
+                },
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+{% endhighlight %}

Flutter/linear-gauge/images/gauge-range/edge_style.png

@@ -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/interaction.md

@@ -71,6 +71,44 @@ 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 [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/edgeStyle.html) property defines the appearance of [`LinearGaugeRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange-class.html) with either sharp or curved edges. The available options are `startCurve`, `endCurve`, `bothCurve`, and `bothFlat`.
+
+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/range.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 %}
 
@@ -363,3 +363,30 @@ The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gaug
   }
 
 {% endhighlight %}
+
+## Animation completed callback
+
+The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onAnimationCompleted.html) callback in the [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) will be triggered when the shape pointer animation is completed. The default value of the [onAnimationCompleted](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onAnimationCompleted.html) callback 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/shape-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 %}
 
@@ -250,3 +250,30 @@ The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gau
   }
 
 {% endhighlight %}
+
+## Animation completed callback
+
+The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onAnimationCompleted.html) callback in the [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html) will be triggered when the widget pointer animation is completed. The default value of the [onAnimationCompleted](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onAnimationCompleted.html) callback is `null`.
+
+{% highlight dart %}
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: Center(
+          child: SfLinearGauge(
+            markerPointers:[
+              LinearWidgetPointer(
+                onAnimationCompleted: () {
+                  print("Widget Pointer animation is completed");
+                },
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+{% endhighlight %}

Flutter/linear-gauge/widget-marker-pointer.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/animation.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 %}