diff --git a/Flutter/linear-gauge/animation.md b/Flutter/linear-gauge/animation.md index df3bfcf0e..8bd99cdc5 100644 --- a/Flutter/linear-gauge/animation.md +++ b/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) - - - - - diff --git a/Flutter/linear-gauge/bar-pointer.md b/Flutter/linear-gauge/bar-pointer.md index 067ea680f..dc0ddbfdb 100644 --- a/Flutter/linear-gauge/bar-pointer.md +++ b/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) \ No newline at end of file +![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 %} 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..9978c2357 100644 --- a/Flutter/linear-gauge/range.md +++ b/Flutter/linear-gauge/range.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. diff --git a/Flutter/linear-gauge/shape-marker-pointer.md b/Flutter/linear-gauge/shape-marker-pointer.md index 595a1020a..6282a5974 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 %} @@ -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 %} diff --git a/Flutter/linear-gauge/widget-marker-pointer.md b/Flutter/linear-gauge/widget-marker-pointer.md index dff5823fb..a2510e3e1 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 %} @@ -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 %} 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..f9e824e21 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 allows you to create a custom pointer in the radial gauge. This callback is available for both the [`NeedlePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) or [`MarkerPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer-class.html) types. +{% 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)