diff --git a/Flutter/linear-gauge/animation.md b/Flutter/linear-gauge/animation.md index df3bfcf0e..8012b0c11 100644 --- a/Flutter/linear-gauge/animation.md +++ b/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 %} diff --git a/Flutter/linear-gauge/images/gauge-range/edge_style.png b/Flutter/linear-gauge/images/gauge-range/edge_style.png new file mode 100644 index 000000000..58fec6907 Binary files /dev/null and b/Flutter/linear-gauge/images/gauge-range/edge_style.png differ diff --git a/Flutter/linear-gauge/interaction.md b/Flutter/linear-gauge/interaction.md index 993cbcfea..993e9e221 100644 --- a/Flutter/linear-gauge/interaction.md +++ b/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: diff --git a/Flutter/linear-gauge/range.md b/Flutter/linear-gauge/range.md index 3214ebec5..eb387ba4f 100644 --- a/Flutter/linear-gauge/range.md +++ b/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. diff --git a/Flutter/linear-gauge/shape-marker-pointer.md b/Flutter/linear-gauge/shape-marker-pointer.md index 595a1020a..33f3dcab4 100644 --- a/Flutter/linear-gauge/shape-marker-pointer.md +++ b/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 %} diff --git a/Flutter/linear-gauge/widget-marker-pointer.md b/Flutter/linear-gauge/widget-marker-pointer.md index dff5823fb..a95efc9fd 100644 --- a/Flutter/linear-gauge/widget-marker-pointer.md +++ b/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 %} diff --git a/Flutter/radial-gauge/animation.md b/Flutter/radial-gauge/animation.md index a646ade58..675e8fa5f 100644 --- a/Flutter/radial-gauge/animation.md +++ b/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) \ No newline at end of file +![pointer animation](images/animation/animation.gif) diff --git a/Flutter/radial-gauge/axes.md b/Flutter/radial-gauge/axes.md index 60d240ff0..0c964254d 100644 --- a/Flutter/radial-gauge/axes.md +++ b/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 %} diff --git a/Flutter/radial-gauge/images/pointers/on-create-pointer-renderer.png b/Flutter/radial-gauge/images/pointers/on-create-pointer-renderer.png new file mode 100644 index 000000000..fd72ee79d Binary files /dev/null and b/Flutter/radial-gauge/images/pointers/on-create-pointer-renderer.png differ diff --git a/Flutter/radial-gauge/pointers.md b/Flutter/radial-gauge/pointers.md index c5521de54..f30f6c362 100644 --- a/Flutter/radial-gauge/pointers.md +++ b/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( + pointers: [ + 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)