Skip to content

Commit cffe935

Browse files
sfHariHaraSudhansfHariHaraSudhan
committed
FLUT-965284-[Others]: Improved gauges UG content.
1 parent 3636edd commit cffe935

File tree

10 files changed

+110
-7
lines changed

10 files changed

+110
-7
lines changed

‎Flutter/linear-gauge/animation.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,29 @@ Both the shape and widget marker pointers have the same set of properties and be
114114

115115
![Animate marker pointer in linear gauge](images/animation/shape-pointer/bounceout.gif)
116116

117+
## Animation completed event
117118

119+
The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onAnimationCompleted.html) is 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`.
118120

121+
{% highlight dart %}
119122

123+
@override
124+
Widget build(BuildContext context) {
125+
return MaterialApp(
126+
home: Scaffold(
127+
body: Center(
128+
child: SfLinearGauge(
129+
markerPointers:[
130+
LinearShapePointer(
131+
onAnimationCompleted: () {
132+
print("Shape Pointer animation is completed");
133+
},
134+
),
135+
],
136+
),
137+
),
138+
),
139+
);
140+
}
120141

142+
{% endhighlight %}

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

10.2 KB
Loading

‎Flutter/linear-gauge/interaction.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ The shape and widget marker pointers in a Linear Gauge can be moved from one val
1313

1414
## Interaction with marker pointers
1515

16-
The `onChanged` callback enables you to change the value of marker pointers at runtime through user interaction.
16+
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.
1717

1818
The following code sample demonstrates how to update a simple marker pointer value based on swipe or drag gestures:
1919

‎Flutter/linear-gauge/range.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,44 @@ However, to draw concave, convex and exponential-like shapes the [`midValue`](ht
7171

7272
![Draw linear gauge concave range](images/gauge-range/range-concave.png)
7373

74+
## Customize edge style
75+
76+
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` options.
77+
78+
The default value is `bothFlat`.
79+
80+
{% highlight dart %}
81+
82+
@override
83+
Widget build(BuildContext context) {
84+
return MaterialApp(
85+
home: Scaffold(
86+
body: Center(
87+
child: Container(
88+
width: 400,
89+
height: 120,
90+
child: SfLinearGauge(
91+
ranges: [
92+
LinearGaugeRange(
93+
startValue: 0,
94+
startWidth: 20,
95+
endWidth: 20,
96+
endValue: 70,
97+
edgeStyle: LinearEdgeStyle.bothCurve,
98+
color: Colors.blue,
99+
),
100+
],
101+
),
102+
),
103+
),
104+
),
105+
);
106+
}
107+
108+
{% endhighlight %}
109+
110+
![Change the gauge range edge style](images/gauge-range/edge_style.png)
111+
74112
## Customize color of a range
75113

76114
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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ In addition to position the shape pointer, it is also possible to change the off
235235

236236
## Drag behavior
237237

238-
You can drag the pointers freely to any position when adding multiple pointers by setting the `dragBehavior` property to `LinearMarkerDragBehavior.free`.
238+
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`.
239239

240240
The `LinearMarkerDragBehavior.constrained` can be used to limit the active pointer dragging beyond the other pointers.
241241

@@ -331,7 +331,7 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point
331331

332332
## Handle onChangeStart, onChanged, and onChangeEnd callbacks
333333

334-
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.
334+
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.
335335

336336
{% highlight dart %}
337337

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ In addition to position the widget marker pointer, it is also possible to change
126126

127127
## Drag behavior
128128

129-
You can drag the pointers freely to any position when adding multiple pointers by setting the `dragBehavior` property to `LinearMarkerDragBehavior.free`.
129+
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`.
130130

131131
The `LinearMarkerDragBehavior.constrained` can be used to limit the active pointer dragging beyond the other pointers.
132132

@@ -218,7 +218,7 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point
218218

219219
## Handle onChangeStart, onChanged, and onChangeEnd callbacks
220220

221-
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.
221+
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.
222222

223223
{% highlight dart %}
224224

‎Flutter/radial-gauge/animation.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,4 +114,4 @@ The animation type can be changed using the [`animationType`](https://pub.dev/do
114114

115115
{% endhighlight %}
116116

117-
![pointer animation](images/animation/animation.gif)
117+
![pointer animation](images/animation/animation.gif)

‎Flutter/radial-gauge/axes.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -964,7 +964,7 @@ The [`onAxisTapped`](https://pub.dev/documentation/syncfusion_flutter_gauges/lat
964964

965965
## Custom scale
966966

967-
[`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.
967+
[`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.
968968

969969
{% highlight dart %}
970970

‎Flutter/radial-gauge/images/pointers/on-create-pointer-renderer.png‎

18.7 KB
Loading

‎Flutter/radial-gauge/pointers.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,4 +136,47 @@ Pointers can be dragged over the scale to change their values interactively. Thi
136136

137137
{% endhighlight %}
138138

139+
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 can be used only with 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.
139140

141+
{% highlight dart %}
142+
143+
@override
144+
Widget build(BuildContext context) {
145+
return Scaffold(
146+
body: Center(
147+
child: SfRadialGauge(
148+
axes: <RadialAxis>[
149+
RadialAxis(
150+
pointers: <GaugePointer>[
151+
MarkerPointer(
152+
value: 70,
153+
onCreatePointerRenderer: () {
154+
return _CustomPointerRenderer();
155+
},
156+
),
157+
],
158+
),
159+
],
160+
),
161+
),
162+
);
163+
}
164+
165+
class _CustomPointerRenderer extends MarkerPointerRenderer {
166+
@override
167+
void drawPointer(
168+
Canvas canvas,
169+
PointerPaintingDetails pointerPaintingDetails,
170+
SfGaugeThemeData gaugeThemeData,
171+
) {
172+
canvas.drawCircle(
173+
pointerPaintingDetails.startOffset,
174+
10,
175+
Paint()..color = Colors.red,
176+
);
177+
}
178+
}
179+
180+
{% endhighlight %}
181+
182+
![create pointer callback](images/pointers/on-create-pointer-renderer.png)

0 commit comments

Comments
 (0)