From 7189eda71d15bb9d665ea0a5882b5c27f6a4bb88 Mon Sep 17 00:00:00 2001 From: Hariram4428 Date: Wed, 21 May 2025 17:09:34 +0530 Subject: [PATCH 1/3] FLUT-958981-[feature]: Cleared grammatical errors for linear gauges --- Flutter/linear-gauge/accessibility.md | 8 +- Flutter/linear-gauge/animation.md | 16 +- Flutter/linear-gauge/axis.md | 24 +-- Flutter/linear-gauge/bar-pointer.md | 6 +- Flutter/linear-gauge/getting-started.md | 148 ++++++------- Flutter/linear-gauge/interaction.md | 202 +++++++++--------- Flutter/linear-gauge/labels.md | 108 +++++----- Flutter/linear-gauge/mirror-linear-gauge.md | 4 +- Flutter/linear-gauge/overview.md | 14 +- Flutter/linear-gauge/range.md | 146 +++++++------ Flutter/linear-gauge/shape-marker-pointer.md | 153 ++++++------- Flutter/linear-gauge/ticks.md | 95 ++++---- Flutter/linear-gauge/widget-marker-pointer.md | 128 +++++------ 13 files changed, 531 insertions(+), 521 deletions(-) diff --git a/Flutter/linear-gauge/accessibility.md b/Flutter/linear-gauge/accessibility.md index 74e16a4d9..8ff661ef1 100644 --- a/Flutter/linear-gauge/accessibility.md +++ b/Flutter/linear-gauge/accessibility.md @@ -11,7 +11,7 @@ documentation: ug ## Screen reader -The [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) can be accessed by the screen readers by wrapping the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) widget to the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget. +The [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) can be made accessible to screen readers by wrapping it with the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget. {% tabs %} {% highlight Dart %} @@ -35,7 +35,7 @@ Widget build(BuildContext context) { ## Sufficient contrast -You can customize the color of the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) elements using the following APIs for the sufficient contrast. +You can customize the color of the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) elements using the following APIs to ensure sufficient contrast. * [`Axis solid color`](https://help.syncfusion.com/flutter/linear-gauge/axis#apply-solid-color) * [`Axis gradient`](https://help.syncfusion.com/flutter/linear-gauge/axis#apply-gradient) @@ -50,10 +50,10 @@ You can customize the color of the [`SfLinearGauge`](https://pub.dev/documentati ## Large fonts -You can change the font size of the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) elements using the following API: +You can adjust the font size of the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) elements using the following API: * [`Labels`](https://help.syncfusion.com/flutter/linear-gauge/labels#customize-label-styles) ## Easily touch targets -The [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) has touch target as 48 * 48 as per the standard for all the elements. +The [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) follows accessibility standards by providing touch target of 48 * 48 pixels for all interactive elements. diff --git a/Flutter/linear-gauge/animation.md b/Flutter/linear-gauge/animation.md index 6adfdd514..df3bfcf0e 100644 --- a/Flutter/linear-gauge/animation.md +++ b/Flutter/linear-gauge/animation.md @@ -9,11 +9,11 @@ documentation: ug # Animation in Flutter Linear Gauge (SfLinearGauge) -All Linear Gauge elements such as axis along with ticks and labels, range, bar pointer, shape marker pointer and widget marker pointer can be animated separately. +All Linear Gauge elements such as axis (along with ticks and labels), range, bar pointer, shape marker pointer, and widget marker pointer can be animated separately. ## Animate axis -The [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateAxis.html) and [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animationDuration.html) properties in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) is used to animate the axis track along with the ticks and labels. The axis will have a fade-in with opacity animation when this [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateAxis.html) is set to true. By default, the [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateAxis.html) is set to false. +The [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateAxis.html) and [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animationDuration.html) properties in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) are used to animate the axis track along with the ticks and labels. The axis will have a fade-in with opacity animation when [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateAxis.html) is set to true. By default, the [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateAxis.html) is set to false. {% highlight dart %} @@ -37,7 +37,7 @@ The [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/late ## Animate range -The [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateRange.html) and [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animationDuration.html) properties in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) is used to animate the axis track along with the ticks and labels. The range will be have a fade-in with opacity animation when this [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateRange.html) is set to true. By default, the [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateRange.html) is set to false. +The [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateRange.html) and [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animationDuration.html) properties in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) are used to animate ranges. The range will have a fade-in with opacity animation when [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateRange.html) is set to true. By default, the [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateRange.html) is set to false. {% highlight dart %} @@ -61,15 +61,15 @@ The [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/lat ## Pointer animation -The animation behavior is common for all the three pointers in Linear Gauge - shape, widget and bar pointer. +The animation behavior is common for all three pointers in Linear Gauge - shape pointer, widget pointer, and bar pointer. -All the above three pointers have the below properties for animation. +All three pointers have the following properties for animation: * [`enableAnimation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/enableAnimation.html) - Enable or disable the animation for bar pointer. The default value is `true` * [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/animationDuration.html) - Sets the animation duration. The default value is 1000 * [`animationType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/animationType.html) - Sets the animation type. -The [`animationType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/animationType.html) supports the below animations. The default animation type is `animationType.ease`. +The [`animationType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/animationType.html) supports the following animations. The default animation type is `animationType.ease`. * `bounceOut` * `ease` @@ -81,7 +81,7 @@ The [`animationType`](https://pub.dev/documentation/syncfusion_flutter_gauges/la ### Animate bar pointer -The below code example demonstrates updating the animation for bar pointer. +The following code example demonstrates how to customize the animation for bar pointer: {% highlight dart %} @@ -108,7 +108,7 @@ The below code example demonstrates updating the animation for bar pointer. ### Animate marker pointers (Shape and Widget Pointers) -Both the shape and widget marker pointers will have the same set of properties and behave similarly for animation. So we have demonstrated the [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) only but the same is applicable for [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html) too. +Both the shape and widget marker pointers have the same set of properties and behave similarly for animation. The example below demonstrates [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) but the same principles apply to [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html) as well. ### Marker pointer with `bounceOut` animation diff --git a/Flutter/linear-gauge/axis.md b/Flutter/linear-gauge/axis.md index 27e4b5517..fc216c248 100644 --- a/Flutter/linear-gauge/axis.md +++ b/Flutter/linear-gauge/axis.md @@ -10,11 +10,11 @@ documentation: ug # Axis in Flutter Linear Gauge (SfLinearGauge) -The Linear Gauge axis is a scale where a set of values can be plotted. An axis can be customized by changing the thickness, color and edge styles. Axis elements such as labels and ticks can also be easily customized and you can also inverse the axis. +The Linear Gauge axis is a scale where a set of values can be plotted. An axis can be customized by changing the thickness, color, and edge styles. Axis elements such as labels and ticks can also be easily customized, and you can inverse the axis. ## Default axis -By default axis will have the [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) axis value as 0 and the [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) axis value as 100. Without any changes the default axis of the Linear Gauge will be displayed as follows. +By default axis will have a [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) axis value as 0 and a [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) axis value of 100. Without any customization, the default axis of the Linear Gauge will be displayed as follows: {% highlight dart %} @@ -35,7 +35,7 @@ By default axis will have the [`minimum`](https://pub.dev/documentation/syncfusi ## Customize minimum and maximum axis values -The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) properties of a Linear Gauge can be used to customize the axis values. In the below code snippet the axis is customized to have the [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) value of -50 to [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) value of 50. The axis values are displayed by the labels. Customizing these label styles are further explained in next topics. +The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) properties of a Linear Gauge can be used to customize the axis values. In the example below, the axis is customized to have a [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) value of -50 to [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) value of 50. The axis values are displayed by labels. which can be further customized as explained in later sections. {% highlight dart %} @@ -64,7 +64,7 @@ The linear axis track can be customized using the [`axisTrackStyle`](https://pub * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/borderWidth.html) - Customizes the border width of the axis track. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/borderColor.html) - Customizes the border color of the axis track. -The following code sample demonstrates how to customize the [`thickness`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/thickness.html) and [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/color.html) properties. +The following code sample demonstrates how to customize the [`thickness`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/thickness.html) and [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/color.html) property: {% highlight dart %} @@ -87,7 +87,7 @@ The following code sample demonstrates how to customize the [`thickness`](https: ## Apply solid color -The below code snippet sets solid colors to the axis track. +The code snippet below sets a solid color to the axis track: {% highlight dart %} @@ -109,9 +109,9 @@ The below code snippet sets solid colors to the axis track. ## Apply gradient -The [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/color.html) property of [`axisTrackStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/LinearAxisTrackStyle.html) allows to set a solid color, while the [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/gradient.html) property of [`axisTrackStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/LinearAxisTrackStyle.html) allows to apply linear-gradient to axis track. +The [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/color.html) property of [`axisTrackStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/LinearAxisTrackStyle.html) allows you to set a solid color, while the [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/gradient.html) property allows you to apply a linear gradient to the axis track. -The following code sample sets solid colors to the axis track. +The following code sample applies a gradient to the axis track. {% highlight dart %} @@ -146,7 +146,7 @@ The following code sample sets solid colors to the axis track. The [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/borderColor.html) and [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/borderWidth.html) properties of [`axisTrackStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/LinearAxisTrackStyle.html) allow you to set a border to the axis track. -The below code snippet sets a border to the axis track. +The code snippet below sets a border to the axis track: {% highlight dart %} @@ -176,7 +176,7 @@ The below code snippet sets a border to the axis track. ## Customize corners -The [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/edgeStyle.html) property of [`axisTrackStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/LinearAxisTrackStyle.html) specifies the corner type for the axis track. The corners can be customized with `bothFlat`, `bothCurve`, `startCurve`, and `endCurve` options. The default value of this property is `bothFlat`. +The [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/edgeStyle.html) property of [`axisTrackStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/LinearAxisTrackStyle.html) specifies the corner type for the axis track. The corners can be customized with `bothFlat`, `bothCurve`, `startCurve`, and `endCurve` options. The default value is `bothFlat`. {% highlight dart %} @@ -199,8 +199,8 @@ The [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest ## Inverse the axis -The direction of linear gauge axis can be customized by the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property. -When the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property is true, the axis can be placed in an inverse direction. The default value of the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property is false. +The direction of linear gauge axis can be customized using the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property. +When the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property is set to true, the axis will be displayed in an inverse direction. The default value is false. {% highlight dart %} @@ -223,7 +223,7 @@ You can see that the axis values are displayed from 100 to 0 as the axis track i ## Extend the axis -The axis track can be extended by the [`axisTrackExtent`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/axisTrackExtent.html) property. This will extend the axis track in both ends. The following code sample demonstrates this. +The axis track can be extended using the [`axisTrackExtent`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/axisTrackExtent.html) property. This will extend the axis track at both ends. The following code sample demonstrates this: {% highlight dart %} diff --git a/Flutter/linear-gauge/bar-pointer.md b/Flutter/linear-gauge/bar-pointer.md index fa5aa0284..ccfeef021 100644 --- a/Flutter/linear-gauge/bar-pointer.md +++ b/Flutter/linear-gauge/bar-pointer.md @@ -9,7 +9,7 @@ documentation: ug # Bar Pointer in Flutter Linear Gauge (SfLinearGauge) -A bar pointer is an accenting line or shaded background that can be placed on a Linear Gauge to mark any current value in the axis track. The bar pointers always start from the minimum value of the axis and end with the specified value. So the [`value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/value.html) property is a required parameter for creating a bar pointer. +A bar pointer is an accenting line or shaded background that can be placed on a Linear Gauge to mark any current value in the axis track. The bar pointers always start from the minimum value of the axis and end with the specified value. The [`value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/value.html) property is a required parameter for creating a bar pointer. ## Default bar pointer @@ -129,7 +129,7 @@ By default, the bar pointer is positioned cross to the axis. This position can b ## Customize the offset -In addition to position the bar pointer, it is also possible to change the offset of the bar pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/offset.html) is the distance from the axis and it cannot be negative and the cross positioned elements will not get affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/offset.html) value. The following code sample demonstrates how to change the offset value of the bar pointer. +In addition to positioning the bar pointer, it is also possible to change the offset of the bar pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/offset.html) is the distance from the axis and it cannot be negative. Cross-positioned elements will not be affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/offset.html) value. The following code sample demonstrates how to change the offset value of the bar pointer. {% highlight dart %} @@ -331,7 +331,7 @@ The border can be customized with [`borderWidth`](https://pub.dev/documentation/ ## Add multiple bar pointers -You can add multiple bar pointers in a [`LinearGauge`](). The bar pointers by default will overlap each other. So while adding a bar pointer offset value is needed to be specified. The below code example demonstrates adding two bar pointer with different offset +You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html). The bar pointers by default will overlap each other. So while adding a bar pointer, offset value is needed to be specified. The below code example demonstrates adding two bar pointer with different offsets: {% highlight dart %} diff --git a/Flutter/linear-gauge/getting-started.md b/Flutter/linear-gauge/getting-started.md index e629ac817..76419f8bb 100644 --- a/Flutter/linear-gauge/getting-started.md +++ b/Flutter/linear-gauge/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting started with Flutter Linear Gauge (SfLinearGauge) -This section explains the steps required to add the Linear Gauge and its elements such as axis, range, and pointer and also covers basic features needed to know to get started with the Linear Gauge widget. +This section explains the steps required to add the Linear Gauge and its elements such as axis, range, and pointer, and also covers basic features needed to get started with the Linear Gauge widget. -To get start quickly with our Flutter Linear Gauge widget, you can check on this video. +To get started quickly with our Flutter Linear Gauge widget, you can check out this video: @@ -56,7 +56,7 @@ Import the following package in your Dart code. ## Initialize the Linear Gauge -After the package has been imported, initialize the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/SfLinearGauge.html) as a child of any widget such as container widget. +After the package has been imported, initialize the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/SfLinearGauge.html) as a child of any widget such as a container widget. {% highlight dart %} @@ -98,13 +98,13 @@ The Linear Gauge axis is a scale where a set of values can be plotted. You can s ## Update orientation -As you can see in the above image, the default orientation of the Linear Gauge is horizontal. But you can change it with the [`orientation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/orientation.html) property of the Linear Gauge widget. +As you can see in the above image, the default orientation of the Linear Gauge is horizontal. You can change it with the [`orientation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/orientation.html) property of the Linear Gauge widget. {% highlight dart %} -SfLinearGauge( - orientation: LinearGaugeOrientation.vertical - ), + SfLinearGauge( + orientation: LinearGaugeOrientation.vertical + ), {% endhighlight %} @@ -112,18 +112,18 @@ SfLinearGauge( ## Add range -A range is a visual element that helps you to quickly visualize where a range falls on the axis track. Multiple ranges with different styles can be added to a Linear gauge. You can also specify the start value, end value, and color for a range as demonstrated in the following code sample. +A range is a visual element that helps you to quickly visualize where a range falls on the axis track. Multiple ranges with different styles can be added to a Linear gauge. You can also specify the start value, end value, and color for a range as demonstrated in the following code sample. {% highlight dart %} - SfLinearGauge( - ranges: [ - //First range - LinearGaugeRange(startValue: 0, endValue: 50, color: Colors.green), - //Second range - LinearGaugeRange(startValue: 50, endValue: 100, color: Colors.blue) - ] - ) + SfLinearGauge( + ranges: [ + //First range + LinearGaugeRange(startValue: 0, endValue: 50, color: Colors.green), + //Second range + LinearGaugeRange(startValue: 50, endValue: 100, color: Colors.blue) + ] + ) {% endhighlight %} @@ -131,15 +131,15 @@ A range is a visual element that helps you to quickly visualize where a range fa ## Add marker pointer -The Linear Gauge supports two marker pointers - shape pointer and widget pointer. The shape pointer will have a default set of pre-build icons to point a value in an axis track, while the widget pointer facilitates using any Flutter widget to point a value in an axis track. +The Linear Gauge supports two marker pointers - shape pointer and widget pointer. The shape pointer has a default set of pre-built icons to point to a value in an axis track, while the widget pointer facilitates using any Flutter widget to point to a value in an axis track. -The following code sample demonstrates how to add a shape pointer. +The following code sample demonstrates how to add a shape pointer: {% highlight dart %} - SfLinearGauge( - markerPointers: [LinearShapePointer(value: 50)] - ), + SfLinearGauge( + markerPointers: [LinearShapePointer(value: 50)] + ), {% endhighlight %} @@ -149,18 +149,18 @@ The following code sample demonstrates how to add a widget pointer. {% highlight dart %} - SfLinearGauge( - markerPointers: [ - LinearWidgetPointer( - value: 40, - child: Container( - height: 20, - width: 20, - decoration: BoxDecoration(color: Colors.blueAccent) - ), - ), - ], + SfLinearGauge( + markerPointers: [ + LinearWidgetPointer( + value: 40, + child: Container( + height: 20, + width: 20, + decoration: BoxDecoration(color: Colors.blueAccent) + ), ), + ], + ), {% endhighlight %} @@ -168,66 +168,66 @@ The following code sample demonstrates how to add a widget pointer. ## Add bar pointer -In a Linear Gauge, the bar pointer is used to specify a value in an axis track by drawing a track from the axis’s minimum value to its specified value +In a Linear Gauge, the bar pointer is used to specify a value in an axis track by drawing a track from the axis's minimum value to its specified value. {% highlight dart %} - SfLinearGauge( - barPointers: [LinearBarPointer(value: 40)] - ), + SfLinearGauge( + barPointers: [LinearBarPointer(value: 40)] + ), {% endhighlight %} ![Bar pointer added to a linear gauge](images/getting-started/add_bar_pointer.png) -The following code example gives you the complete view of the above configurations. +The following code example gives you the complete view of the above configurations: {% highlight dart %} -import 'package:flutter/material.dart'; -import 'package:syncfusion_flutter_gauges/gauges.dart'; + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; - void main() => runApp(ChartApp()); - class LinearGaugeDemo extends StatelessWidget { + void main() => runApp(LinearGaugeDemo()); + class LinearGaugeDemo extends StatelessWidget { @override - Widget build(BuildContext context) { - return MaterialApp( + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfLinearGauge( - ranges: [ - //First range - LinearGaugeRange( - startValue: 0, - endValue: 50, - color: Colors.green - ), - //Second range - LinearGaugeRange( - startValue: 50, - endValue: 100, - color: Colors.blue - ), - ], - markerPointers: [ - LinearShapePointer(value: 50), - LinearWidgetPointer( - value: 40, - child: Container( - height: 20, - width: 20, - decoration: BoxDecoration(color: Colors.blueAccent) - ), + body: Center( + child: SfLinearGauge( + ranges: [ + //First range + LinearGaugeRange( + startValue: 0, + endValue: 50, + color: Colors.green + ), + //Second range + LinearGaugeRange( + startValue: 50, + endValue: 100, + color: Colors.blue + ), + ], + markerPointers: [ + LinearShapePointer(value: 50), + LinearWidgetPointer( + value: 40, + child: Container( + height: 20, + width: 20, + decoration: BoxDecoration(color: Colors.blueAccent) ), - ], - barPointers: [LinearBarPointer(value: 40)] - ), - ) + ), + ], + barPointers: [LinearBarPointer(value: 40)] + ), + ) ) - ); + ); + } } -} {% endhighlight %} diff --git a/Flutter/linear-gauge/interaction.md b/Flutter/linear-gauge/interaction.md index cc7077418..cb0bec32d 100644 --- a/Flutter/linear-gauge/interaction.md +++ b/Flutter/linear-gauge/interaction.md @@ -9,17 +9,18 @@ documentation: ug # Interaction in Flutter Linear Gauge (SfLinearGauge) -The shape and widget marker pointers in a Linear Gauge can be moved from one value to another by swiping or drag gestures. +The shape and widget marker pointers in a Linear Gauge can be moved from one value to another using swipe or drag gestures. ## Interaction with marker pointers -The `onChanged` callback is used to change the value of the marker pointer at run-time. +The `onChanged` callback enables you to change the value of marker pointers at runtime through user interaction. -The following code sample demonstrates how to update simple marker pointer value based on swipe or drag gestures. +The following code sample demonstrates how to update a simple marker pointer value based on swipe or drag gestures: {% highlight dart %} -double shapePointerValue = 25; + double shapePointerValue = 25; + @override Widget build(BuildContext context) { return MaterialApp( @@ -47,121 +48,126 @@ double shapePointerValue = 25; ![Simple pointer interaction in linear gauge](images/interaction/simple_interaction.gif) -The following code sample demonstrates how to update multiple marker pointer values based on swipe or drag gesture. +The following code sample demonstrates how to update multiple marker pointer values based on swipe or drag gestures: {% highlight dart %} double shapePointerValue = 85; double barPointerValue = 85; double widgetPointerValue = 26; + @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: Center( - child: Column( - children: [ - SfLinearGauge( - barPointers: [LinearBarPointer(value: shapePointerValue)], - markerPointers: [ - LinearShapePointer( - value: shapePointerValue, - onChanged: (value) { - setState(() { - shapePointerValue = value; - }); - }, - color: Colors.blue[800] + home: Scaffold( + body: Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SfLinearGauge( + barPointers: [LinearBarPointer(value: shapePointerValue)], + markerPointers: [ + LinearShapePointer( + value: shapePointerValue, + onChanged: (value) { + setState(() { + shapePointerValue = value; + }); + }, + color: Colors.blue[800] + ), + ], ), - ], - ), - - SizedBox(height: 30), - SfLinearGauge( - barPointers: [LinearBarPointer(value: barPointerValue)], - markerPointers: [ - LinearWidgetPointer( - position: LinearElementPosition.outside, - value: barPointerValue, - onChanged: (value) { - setState(() { - barPointerValue = value; - }); - }, - child: Container( - height: 20, - width: 20, - decoration: BoxDecoration( - color: Colors.orange[500], shape: BoxShape.circle) - ), + SizedBox(height: 30), + SfLinearGauge( + barPointers: [LinearBarPointer(value: barPointerValue)], + markerPointers: [ + LinearWidgetPointer( + position: LinearElementPosition.outside, + value: barPointerValue, + onChanged: (value) { + setState(() { + barPointerValue = value; + }); + }, + child: Container( + height: 20, + width: 20, + decoration: BoxDecoration( + color: Colors.orange[500], + shape: BoxShape.circle + ) + ), + ), + ], ), - ], - ), - SizedBox(height: 25), - SfLinearGauge( - axisTrackStyle: LinearAxisTrackStyle( - thickness: 10 - ), - markerPointers: [ - LinearShapePointer( - value: widgetPointerValue, - shapeType: LinearShapePointerType.invertedTriangle, - position: LinearElementPosition.cross, - onChanged: (value) { - setState(() { - widgetPointerValue = value; - }); - }, - color: widgetPointerValue < 40 - ? Colors.green - : widgetPointerValue < 80 + SizedBox(height: 25), + SfLinearGauge( + axisTrackStyle: LinearAxisTrackStyle( + thickness: 10 + ), + markerPointers: [ + LinearShapePointer( + value: widgetPointerValue, + shapeType: LinearShapePointerType.invertedTriangle, + position: LinearElementPosition.cross, + onChanged: (value) { + setState(() { + widgetPointerValue = value; + }); + }, + color: widgetPointerValue < 40 + ? Colors.green + : widgetPointerValue < 80 ? Colors.orange : Colors.red - ), - LinearWidgetPointer( - value: widgetPointerValue, - onChanged: (value) { - setState(() { - widgetPointerValue = value; - }); - }, - child: Container( - width: 55, - height: 45, - child: Center( - child: Text( - widgetPointerValue.toStringAsFixed(0), - style: TextStyle( - fontWeight: FontWeight.w500, - fontSize: 20, - color: widgetPointerValue < 40 - ? Colors.green - : widgetPointerValue < 80 + ), + LinearWidgetPointer( + value: widgetPointerValue, + onChanged: (value) { + setState(() { + widgetPointerValue = value; + }); + }, + child: Container( + width: 55, + height: 45, + child: Center( + child: Text( + widgetPointerValue.toStringAsFixed(0), + style: TextStyle( + fontWeight: FontWeight.w500, + fontSize: 20, + color: widgetPointerValue < 40 + ? Colors.green + : widgetPointerValue < 80 ? Colors.orange : Colors.red + ), + ), ), ), + position: LinearElementPosition.outside, ), - ), - position: LinearElementPosition.outside, - ), - ], - ranges: [ - LinearGaugeRange( - endValue: widgetPointerValue, - color: widgetPointerValue < 40 + ], + ranges: [ + LinearGaugeRange( + endValue: widgetPointerValue, + color: widgetPointerValue < 40 ? Colors.green : widgetPointerValue < 80 - ? Colors.orange - : Colors.red, - position: LinearElementPosition.cross) + ? Colors.orange + : Colors.red, + position: LinearElementPosition.cross + ) + ], + ), ], - ), - ], - mainAxisAlignment: MainAxisAlignment.center - )), - ) -); + ) + ), + ) + ); + } {% endhighlight %} diff --git a/Flutter/linear-gauge/labels.md b/Flutter/linear-gauge/labels.md index 3c439a240..f72dc4787 100644 --- a/Flutter/linear-gauge/labels.md +++ b/Flutter/linear-gauge/labels.md @@ -17,29 +17,30 @@ The default style of axis labels is as follows. Axis labels can be customized using the [`axisLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/axisLabelStyle.html) property of [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html). The [`axisLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/axisLabelStyle.html) property has the following properties to customize the axis labels. -* `color` – Allows to customize the color of the labels. -* `fontFamily` – Allows to specify the font family for labels. -* `fontStyle` – Allows to specify the font style for labels. -* `fontWeight` – Allows to specify the font weight for labels. -* `fontSize` – Allows to specify the font size for labels. +* `color` – Allows you to customize the color of the labels. +* `fontFamily` – Allows you to specify the font family for labels. +* `fontStyle` – Allows you to specify the font style for labels. +* `fontWeight` – Allows you to specify the font weight for labels. +* `fontSize` – Allows you to specify the font size for labels. {% highlight dart %} - @override + @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: Center( - child: SfLinearGauge( - axisLabelStyle: TextStyle( - color: Colors.red, - fontSize: 15, - fontStyle: FontStyle.italic, - fontWeight: FontWeight.bold, - fontFamily: 'Times') - ) + home: Scaffold( + body: Center( + child: SfLinearGauge( + axisLabelStyle: TextStyle( + color: Colors.red, + fontSize: 15, + fontStyle: FontStyle.italic, + fontWeight: FontWeight.bold, + fontFamily: 'Times' ) + ) ) + ) ); } @@ -92,23 +93,23 @@ Widget build(BuildContext context) { ## Change label position -The linear axis allows to position the labels either `inside` or `outside` the axis track using the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/labelPosition.html) property. By default, labels are positioned `inside` the axis track. +The linear axis allows you to position the labels either `inside` or `outside` the axis track using the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/labelPosition.html) property. By default, labels are positioned `inside` the axis track. {% highlight dart %} -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfLinearGauge( - tickPosition: LinearElementPosition.outside, - labelPosition: LinearLabelPosition.outside - ), - ) + body: Center( + child: SfLinearGauge( + tickPosition: LinearElementPosition.outside, + labelPosition: LinearLabelPosition.outside + ), ) + ) ); -} + } {% endhighlight %} @@ -121,18 +122,18 @@ The [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/late {% highlight dart %} -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfLinearGauge( - labelOffset:20 - ), - ) + body: Center( + child: SfLinearGauge( + labelOffset: 20 + ), ) + ) ); -} + } {% endhighlight %} @@ -140,22 +141,22 @@ Widget build(BuildContext context) { ## Customize maximum number of visible labels -By default, a maximum of three labels is displayed for every 100 logical pixels in an axis. The maximum number of labels that should present within 100 logical pixels length can be customized using the [`maximumLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximumLabels.html) property of the axis. +By default, a maximum of three labels is displayed for every 100 logical pixels in an axis. The maximum number of labels that should be present within 100 logical pixels length can be customized using the [`maximumLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximumLabels.html) property of the axis. {% highlight dart %} -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfLinearGauge( - maximumLabels: 5 - ) - ) + body: Center( + child: SfLinearGauge( + maximumLabels: 5 + ) ) + ) ); -} + } {% endhighlight %} @@ -167,23 +168,20 @@ You can format or change the whole numeric label text using the [`labelFormatter {% highlight dart %} -SfLinearGauge( + SfLinearGauge( labelFormatterCallback: (label) { if (label == '0') { return 'Start'; } - if (label == '50') { return 'Mid'; } - if (label == '100') { return 'End'; } - return label; } -) + ) {% endhighlight %} @@ -191,14 +189,14 @@ SfLinearGauge( ## Number format -The [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/numberFormat.html) property is used to format the numeric labels. The default value of this property is null. +The [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/numberFormat.html) property is used to format the numeric labels. The default value of this property is null. {% highlight dart %} -SfLinearGauge( - numberFormat: NumberFormat("\$") -), + SfLinearGauge( + numberFormat: NumberFormat("\$") + ), {% endhighlight %} diff --git a/Flutter/linear-gauge/mirror-linear-gauge.md b/Flutter/linear-gauge/mirror-linear-gauge.md index ced8bb447..ad61f7b81 100644 --- a/Flutter/linear-gauge/mirror-linear-gauge.md +++ b/Flutter/linear-gauge/mirror-linear-gauge.md @@ -9,7 +9,7 @@ documentation: ug # Mirrored in Flutter Linear Gauge (SfLinearGauge) -The [`isMirrored`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isMirrored.html) property in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) mirrors all the Gauge elements in the `SfLinearGauge`. The following code sample demonstrates how to setting the [`isMirrored`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isMirrored.html) property. +The [`isMirrored`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isMirrored.html) property in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) allows you to mirror all the gauge elements. This feature is useful when you need to display the gauge in the opposite direction. {% highlight dart %} @@ -26,6 +26,6 @@ The [`isMirrored`](https://pub.dev/documentation/syncfusion_flutter_gauges/lates ## Comparison for the mirrored and normal gauge -The following screenshot provides a comparison for the mirrored and normal Linear Gauge. +The following screenshot provides a visual comparison between a mirrored Linear Gauge and a normal Linear Gauge. ![Mirrored linear gauge comparsion](images/mirrored/mirror_comparison.png) \ No newline at end of file diff --git a/Flutter/linear-gauge/overview.md b/Flutter/linear-gauge/overview.md index 729b471a9..bb59b0d58 100644 --- a/Flutter/linear-gauge/overview.md +++ b/Flutter/linear-gauge/overview.md @@ -9,19 +9,19 @@ documentation: ug # Flutter Linear Gauge (SfLinearGauge) Overview -Syncfusion® Flutter Linear Gauge is a data visualization widget to display data on a linear scale. Use this widget to craft high-quality mobile app user interfaces. +Syncfusion® Flutter Linear Gauge is a powerful data visualization widget designed to display data on a linear scale. It's an ideal component for crafting high-quality mobile app user interfaces that require visual representation of data along a linear axis. ![Overview flutter linear gauge](images/basic_elements.png) ## Key Features -* **Orientation** - The Linear Gauge can be set to vertical or horizontal orientation. -* **Axis** - The axis is a scale where a set of values can be plotted. An axis can be customized by changing the thickness and edge styles and you can also inverse the axis. -* **Labels and Ticks** - The axis elements such as labels, major ticks, and minor ticks can be customized to different styles. -* **Ranges** - A range is a visual element that helps you to quickly visualize where a range falls on the axis track. Multiple ranges with different styles can be added to the Linear Gauge. +* **Orientation** - The Linear Gauge supports both vertical and horizontal orientations, giving you flexibility in your layout design. +* **Axis** - The axis serves as a scale where values are plotted. You can customize the axis by adjusting its thickness and edge styles, and even inverse the axis direction. +* **Labels and Ticks** - Axis elements such as labels, major ticks, and minor ticks can be styled in various ways to match your application's design. +* **Ranges** - Ranges are visual elements that help users quickly visualize where specific values fall on the axis track. You can add multiple ranges with different styles to enhance data visualization. * **Pointers** - A pointer is used to indicate a specific value on an axis. The widget has three types of pointers: shape marker pointer, widget marker pointer, and bar pointer. All the pointers can be customized as needed and you can also add multiple pointers in the Linear Gauge. * **Mirror Gauge** - The Linear Gauge can be mirrored. When the [`isMirrored`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isMirrored.html) property is true, all the gauge elements will be rendered in mirror effect. -* **Animation** - Animate the gauge elements in a visually appealing way, when they are load, or when their values are changed. -* **Interaction** - The shape and widget marker pointers in the Linear Gauge can be moved from one value to another by swiping or drag gestures. +* **Animation** - Add visually appealing animations to gauge elements when they load or when their values change. +* **Interaction** - The shape and widget marker pointers in the Linear Gauge support interactive movement through swiping or drag gestures, allowing users to change values dynamically. You can get the sample in the following link: [`Flutter Linear Gauge`](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/linear_gauge). \ No newline at end of file diff --git a/Flutter/linear-gauge/range.md b/Flutter/linear-gauge/range.md index cfa1e8e73..11d35978f 100644 --- a/Flutter/linear-gauge/range.md +++ b/Flutter/linear-gauge/range.md @@ -38,7 +38,9 @@ A range is a visual element that helps you quickly visualize where a range falls ## Customize range shape -A Linear Gauge range has three values to draw a range - [`startValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/startValue.html), [`midValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/midValue.html) and [`endValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/endValue.html).These values indicate where the range falls in the axis. In addition to this values, the shape of the range can be customized by [`startWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/startWidth.html), [`midWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/midWidth.html) and [`endWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/endWidth.html) properties. To draw a line or rectangle, just [`startValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/startValue.html), [`startWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/startWidth.html), [`endValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/endValue.html) and [`endWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/endWidth.html) are enough - as like the above code snippet in `Default Linear Gauge Range` topic. But to draw a concave, convex and exponential like shapes the [`midValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/midValue.html) and [`midWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/midWidth.html) properties are needed. For this the [`rangeShapeType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/rangeShapeType.html) is used to bring the curve. The below code snippet demonstrates how to bring a concave shape for a range. +A Linear Gauge range has three values to draw a range - [`startValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/startValue.html), [`midValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/midValue.html) and [`endValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/endValue.html).These values indicate where the range falls in the axis. In addition to these values, the shape of the range can be customized by [`startWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/startWidth.html), [`midWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/midWidth.html) and [`endWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/endWidth.html) properties. To draw a line or rectangle, just [`startValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/startValue.html), [`startWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/startWidth.html), [`endValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/endValue.html) and [`endWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/endWidth.html) are enough - as shown in the above code snippet in `Default Linear Gauge Range` topic. + +However, to draw concave, convex and exponential-like shapes the [`midValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/midValue.html) and [`midWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/midWidth.html) properties are needed. For this, the [`rangeShapeType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/rangeShapeType.html) is used to create the curve. The below code snippet demonstrates how to create a concave shape for a range. {% highlight dart %} @@ -48,18 +50,18 @@ A Linear Gauge range has three values to draw a range - [`startValue`](https://p home: Scaffold( body: Center( child: SfLinearGauge( - ranges: [ - LinearGaugeRange( - startValue: 0, - midValue: 50, - endValue: 100, - startWidth: 70, - midWidth: 20, - endWidth: 70, - rangeShapeType: LinearRangeShapeType.curve - ), - ], - ), + ranges: [ + LinearGaugeRange( + startValue: 0, + midValue: 50, + endValue: 100, + startWidth: 70, + midWidth: 20, + endWidth: 70, + rangeShapeType: LinearRangeShapeType.curve + ), + ], + ), ), ), ); @@ -90,6 +92,7 @@ The color of a range can be changed by setting the [`color`](https://pub.dev/doc ), ); } + {% endhighlight %} ![Set linear gauge range color](images/gauge-range/color_range.png) @@ -110,14 +113,15 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu ranges: [ //Applies a radial gradient. The start and end values are 0 to 100 by default LinearGaugeRange( - startWidth: 50, - shaderCallback: (bounds) => RadialGradient( - center: Alignment.topLeft, - radius: 5, - colors: [ - Colors.greenAccent, - Colors.blueAccent, - ]).createShader(bounds)) + startWidth: 50, + shaderCallback: (bounds) => RadialGradient( + center: Alignment.topLeft, + radius: 5, + colors: [ + Colors.greenAccent, + Colors.blueAccent, + ]).createShader(bounds) + ) ], ), ), @@ -144,12 +148,13 @@ The below code snippet demonstrates applying a linear gradient to the range. ranges: [ //Applies linear gradient. The start and end values are 0 to 100 by default LinearGaugeRange( - startWidth: 50, - shaderCallback: (bounds) => LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [Colors.greenAccent, Colors.blueAccent]) - .createShader(bounds)) + startWidth: 50, + shaderCallback: (bounds) => LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [Colors.greenAccent, Colors.blueAccent]) + .createShader(bounds) + ) ], ), ), @@ -213,10 +218,10 @@ It is possible to position the ranges `inside`, `cross`, and `outside` the axis. home: Scaffold( body: Center( child: SfLinearGauge( - //Here the range is positioned inside the axis. - ranges: [ - LinearGaugeRange(position: LinearElementPosition.inside) - ]), + //Here the range is positioned inside the axis. + ranges: [ + LinearGaugeRange(position: LinearElementPosition.inside) + ]), ), ), ); @@ -228,37 +233,36 @@ It is possible to position the ranges `inside`, `cross`, and `outside` the axis. ## Setting range color to axis element -You can set range color to axis elements using the [`useRangeColorForAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/useRangeColorForAxis.html) property of axis +You can set range color to axis elements using the [`useRangeColorForAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/useRangeColorForAxis.html) property of axis. {% highlight dart %} - Container( - child: SfLinearGauge( - minorTicksPerInterval: 4, - useRangeColorForAxis: true, - animateAxis: true, - axisTrackStyle: LinearAxisTrackStyle(thickness: 1), - ranges: [ - LinearGaugeRange( - startValue: 0, - endValue: 33, - position: LinearElementPosition.outside, - color: Color(0xffF45656)), - LinearGaugeRange( - startValue: 33, - endValue: 66, - position: LinearElementPosition.outside, - color: Color(0xffFFC93E)), - LinearGaugeRange( - startValue: 66, - endValue: 100, - position: LinearElementPosition.outside, - color: Color(0xff0DC9AB)), - ], - ) - ) + Container( + child: SfLinearGauge( + minorTicksPerInterval: 4, + useRangeColorForAxis: true, + animateAxis: true, + axisTrackStyle: LinearAxisTrackStyle(thickness: 1), + ranges: [ + LinearGaugeRange( + startValue: 0, + endValue: 33, + position: LinearElementPosition.outside, + color: Color(0xffF45656)), + LinearGaugeRange( + startValue: 33, + endValue: 66, + position: LinearElementPosition.outside, + color: Color(0xffFFC93E)), + LinearGaugeRange( + startValue: 66, + endValue: 100, + position: LinearElementPosition.outside, + color: Color(0xff0DC9AB)), + ], + ) + ) - {% endhighlight %} ![Set range color to axis element](images/gauge-range/range_userangeforaxis.png) @@ -269,24 +273,24 @@ You can add multiple ranges for an axis. The below code example demonstrates add {% highlight dart %} -@override + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: SfLinearGauge( - ranges: [ - //First range. - LinearGaugeRange( - startValue: 0, endValue: 50, color: Colors.blueAccent), - //Second range. - LinearGaugeRange( - startValue: 50, endValue: 70, color: Colors.redAccent), - //Third range. - LinearGaugeRange( - startValue: 70, endValue: 100, color: Colors.greenAccent) - ], - ), + ranges: [ + //First range. + LinearGaugeRange( + startValue: 0, endValue: 50, color: Colors.blueAccent), + //Second range. + LinearGaugeRange( + startValue: 50, endValue: 70, color: Colors.redAccent), + //Third range. + LinearGaugeRange( + startValue: 70, endValue: 100, color: Colors.greenAccent) + ], + ), ), ), ); diff --git a/Flutter/linear-gauge/shape-marker-pointer.md b/Flutter/linear-gauge/shape-marker-pointer.md index 334f4b3f2..e0baabfe5 100644 --- a/Flutter/linear-gauge/shape-marker-pointer.md +++ b/Flutter/linear-gauge/shape-marker-pointer.md @@ -9,7 +9,7 @@ documentation: ug # Shape Marker Pointer in Flutter Linear Gauge (SfLinearGauge) -The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) have the following pre-defined shapes to mark a specific value. The default shape pointer is `invertedTriangle`. +The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) provides pre-defined shapes to mark specific values. The default shape pointer is `invertedTriangle`. 1. `Triangle` 2. `Inverted Triangle` @@ -40,7 +40,7 @@ The following is the default appearance of default shape pointer. ## Change the size -The size of the marker pointer can be changed by the [`height`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/height.html) and [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/width.html) properties of [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html). The following code sample demonstrates how to change the size of a shape pointer. +The size of the marker pointer can be changed by the [`height`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/height.html) and [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/width.html) properties of [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html). The following code sample demonstrates how to change the size of a shape pointer: {% highlight dart %} @@ -68,7 +68,7 @@ The color of the shape pointer can be changed by the [`color`](https://pub.dev/d {% highlight dart %} - @override + @override Widget build(BuildContext context) { return MaterialApp( color: Colors.white, @@ -80,6 +80,7 @@ The color of the shape pointer can be changed by the [`color`](https://pub.dev/d ), ), ); + } {% endhighlight %} @@ -116,7 +117,7 @@ The elevation can be customized by the [`elevation`](https://pub.dev/documentati {% highlight dart %} - @override + @override Widget build(BuildContext context) { return MaterialApp( color: Colors.white, @@ -126,10 +127,10 @@ The elevation can be customized by the [`elevation`](https://pub.dev/documentati color: Colors.white, child: SfLinearGauge(markerPointers: [ LinearShapePointer( - value: 50, - shapeType: LinearShapePointerType.circle, - elevation: 5, - elevationColor: Colors.blueGrey) + value: 50, + shapeType: LinearShapePointerType.circle, + elevation: 5, + elevationColor: Colors.blueGrey) ]), ), ), @@ -147,14 +148,14 @@ The marker pointer alignment can be changed by the [`markerAlignment`](https://p {% highlight dart %} - @override + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: SfLinearGauge(axisTrackExtent: 30, markerPointers: [ LinearShapePointer( - value: 0, markerAlignment: LinearMarkerAlignment.start) + value: 0, markerAlignment: LinearMarkerAlignment.start) ]), ), ), @@ -178,9 +179,9 @@ By default, the shape pointer is positioned `outside` the axis. This position ca body: Center( child: SfLinearGauge(markerPointers: [ LinearShapePointer( - value: 55, - shapeType: LinearShapePointerType.triangle, - position: LinearElementPosition.inside) + value: 55, + shapeType: LinearShapePointerType.triangle, + position: LinearElementPosition.inside) ]), ), ), @@ -204,10 +205,10 @@ In addition to position the shape pointer, it is also possible to change the off body: Center( child: SfLinearGauge(markerPointers: [ LinearShapePointer( - value: 50, - offset: 25, - shapeType: LinearShapePointerType.triangle, - position: LinearElementPosition.inside) + value: 50, + offset: 25, + shapeType: LinearShapePointerType.triangle, + position: LinearElementPosition.inside) ]), ), ), @@ -228,42 +229,42 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point {% highlight dart %} -double _firstPointer = 30; -double _secondPointer = 70; + double _firstPointer = 30; + double _secondPointer = 70; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfLinearGauge( - markerPointers: [ - LinearShapePointer( - value: _firstPointer, - height: 25, - width: 25, - shapeType: LinearShapePointerType.invertedTriangle, - dragBehavior: LinearMarkerDragBehavior.free, - onChanged: (double newValue) { - setState(() { - _firstPointer = newValue; - }); - }, - ), - LinearShapePointer( - value: _secondPointer, - height: 25, - width: 25, - shapeType: LinearShapePointerType.invertedTriangle, - dragBehavior: LinearMarkerDragBehavior.free, - onChanged: (double newValue) { - setState(() { - _secondPointer = newValue; - }); - }, - ), - ], - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfLinearGauge( + markerPointers: [ + LinearShapePointer( + value: _firstPointer, + height: 25, + width: 25, + shapeType: LinearShapePointerType.invertedTriangle, + dragBehavior: LinearMarkerDragBehavior.free, + onChanged: (double newValue) { + setState(() { + _firstPointer = newValue; + }); + }, + ), + LinearShapePointer( + value: _secondPointer, + height: 25, + width: 25, + shapeType: LinearShapePointerType.invertedTriangle, + dragBehavior: LinearMarkerDragBehavior.free, + onChanged: (double newValue) { + setState(() { + _secondPointer = newValue; + }); + }, + ), + ], + ), + ); + } {% endhighlight %} @@ -320,31 +321,31 @@ The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gaug {% highlight dart %} -double _value = 50; + double _value = 50; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfLinearGauge( - markerPointers: [ - LinearShapePointer( - value: _value, - onChangeStart: (double newValue) { - _value = newValue; - }, - onChanged: (double newValue) { - setState(() { + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfLinearGauge( + markerPointers: [ + LinearShapePointer( + value: _value, + onChangeStart: (double newValue) { _value = newValue; - }); - }, - onChangeEnd: (double newValue) { - _value = newValue; - }, - shapeType: LinearShapePointerType.invertedTriangle, - ), - ], - ), - ); -} + }, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + onChangeEnd: (double newValue) { + _value = newValue; + }, + shapeType: LinearShapePointerType.invertedTriangle, + ), + ], + ), + ); + } {% endhighlight %} diff --git a/Flutter/linear-gauge/ticks.md b/Flutter/linear-gauge/ticks.md index 87439767e..90717f54d 100644 --- a/Flutter/linear-gauge/ticks.md +++ b/Flutter/linear-gauge/ticks.md @@ -16,22 +16,23 @@ The default style of axis ticks is as follows. ## Customize tick style There are two types of ticks in the Flutter Linear Gauge namely major and minor ticks. In the above image, the larger ticks are major ticks and the ticks between the major ticks are minor ticks. The major and minor tick of a [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) can be customized using the [`majorTickStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/majorTickStyle.html) and [`minorTickStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MinorTickStyle-class.html) properties. The following properties can be customized for both the major and the minor ticks: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/color.html) – Allows to customize the tick color. -* [`thickness`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/thickness.html) – Allows to customize the thickness of ticks. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/color.html) – Allows customization of the tick color. +* [`thickness`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/thickness.html) – Allows customization of the thickness of ticks. * [`length`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/length.html) – Specifics the length of ticks. {% highlight dart %} -@override + @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: Center( - child: SfLinearGauge( - majorTickStyle: LinearTickStyle(length: 10, thickness: 2.5, color: Colors.black), - minorTickStyle: LinearTickStyle(length: 5, thickness: 1.75, color: Colors.black)) - ) + home: Scaffold( + body: Center( + child: SfLinearGauge( + majorTickStyle: LinearTickStyle(length: 10, thickness: 2.5, color: Colors.black), + minorTickStyle: LinearTickStyle(length: 5, thickness: 1.75, color: Colors.black) + ) ) + ) ); } @@ -45,16 +46,16 @@ The major ticks are generated based on the [`interval`](https://pub.dev/document {% highlight dart %} -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfLinearGauge(minorTicksPerInterval: 4) - ) + body: Center( + child: SfLinearGauge(minorTicksPerInterval: 4) + ) ) - ); -} + ); + } {% endhighlight %} @@ -66,18 +67,18 @@ The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest {% highlight dart %} -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfLinearGauge( - showTicks: false - ), - ) + body: Center( + child: SfLinearGauge( + showTicks: false + ), + ) ) - ); -} + ); + } {% endhighlight %} @@ -85,23 +86,23 @@ Widget build(BuildContext context) { ## Customize tick position -The linear axis allows to position the ticks either inside or outside the axis track using the [`tickPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/tickPosition.html) property. By default, ticks are positioned inside the axis track. +The linear axis allows positioning the ticks either inside or outside the axis track using the [`tickPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/tickPosition.html) property. By default, ticks are positioned inside the axis track. {% highlight dart %} -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfLinearGauge( - tickPosition: LinearElementPosition.outside, - labelPosition: LinearLabelPosition.outside - ), - ) + body: Center( + child: SfLinearGauge( + tickPosition: LinearElementPosition.outside, + labelPosition: LinearLabelPosition.outside + ), + ) ) - ); -} + ); + } {% endhighlight %} @@ -110,20 +111,20 @@ Widget build(BuildContext context) { ## Customize tick offset -The ticks can be moved near or far to the axis line using the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/tickOffset.html) property. The default value of tick offset is 0. While setting offset for the ticks, the axis labels are also moved along with the ticks. +The ticks can be moved near or far from the axis line using the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/tickOffset.html) property. The default value of tick offset is 0. While setting offset for the ticks, the axis labels are also moved along with the ticks. {% highlight dart %} -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfLinearGauge(tickOffset: 20), - ) + body: Center( + child: SfLinearGauge(tickOffset: 20), + ) ) ); -} + } {% endhighlight %} diff --git a/Flutter/linear-gauge/widget-marker-pointer.md b/Flutter/linear-gauge/widget-marker-pointer.md index 1625a880c..69b338825 100644 --- a/Flutter/linear-gauge/widget-marker-pointer.md +++ b/Flutter/linear-gauge/widget-marker-pointer.md @@ -9,7 +9,7 @@ documentation: ug # Widget Marker Pointer in Flutter Linear Gauge (SfLinearGauge) -The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/LinearWidgetPointer.html) in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/SfLinearGauge.html) allows to use any Flutter widget as marker pointer. The following code sample uses a [`container`](https://api.flutter.dev/flutter/widgets/Container-class.html) as marker widget. +The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/LinearWidgetPointer.html) in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/SfLinearGauge.html) allows you to use any Flutter widget as a marker pointer. The following code sample uses a [`container`](https://api.flutter.dev/flutter/widgets/Container-class.html) as marker widget. {% highlight dart %} @@ -46,10 +46,10 @@ The widget marker pointer's alignment can be changed by the [`markerAlignment`]( body: Center( child: SfLinearGauge(axisTrackExtent: 30, markerPointers: [ LinearWidgetPointer( - value: 0, - markerAlignment: LinearMarkerAlignment.center, - child: - Container(height: 14, width: 14, color: Colors.redAccent)), + value: 0, + markerAlignment: LinearMarkerAlignment.center, + child: + Container(height: 14, width: 14, color: Colors.redAccent)), ]), ), ), @@ -62,7 +62,7 @@ The widget marker pointer's alignment can be changed by the [`markerAlignment`]( ## Change the position -By default, the shape pointer is positioned `outside` the axis. This position can be changed by the [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/position.html) property of a [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/position.html). It is possible to position the shape pointer `inside`, `cross`, or `outside` the axis. The following code sample demonstrates how to change the shape pointer position to `inside` the axis. +By default, the widget pointer is positioned `outside` the axis. This position can be changed by the [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/position.html) property of a [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/position.html). It is possible to position the wwidget pointer `inside`, `cross`, or `outside` the axis. The following code sample demonstrates how to change the widget pointer position to `inside` the axis. {% highlight dart %} @@ -89,7 +89,7 @@ By default, the shape pointer is positioned `outside` the axis. This position ca ## Change the offset -In addition to position the widget marker pointer, it is also possible to change the offset of the shape pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/offset.html) is the distance from the axis and it cannot be negative. The cross positioned elements will not get affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/offset.html) value. The following code sample demonstrates how to change the offset value of the shape pointer. +In addition to position the widget marker pointer, it is also possible to change the offset of the shape pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/offset.html) is the distance from the axis and it cannot be negative. The cross positioned elements will not be affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/offset.html) value. The following code sample demonstrates how to change the offset value of the shape pointer. {% highlight dart %} @@ -129,40 +129,40 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point {% highlight dart %} -double _firstPointer = 30; -double _secondPointer = 70; + double _firstPointer = 30; + double _secondPointer = 70; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfLinearGauge( - markerPointers: [ - LinearWidgetPointer( - value: _firstPointer, - dragBehavior: LinearMarkerDragBehavior.free, - onChanged: (double newValue) { - setState(() { - _firstPointer = newValue; - }); - }, - position: LinearElementPosition.outside, - child: Icon(Icons.location_pin, color: Colors.blue, size: 30), - ), - LinearWidgetPointer( - value: _secondPointer, - position: LinearElementPosition.outside, - dragBehavior: LinearMarkerDragBehavior.free, - onChanged: (double newValue) { - setState(() { - _secondPointer = newValue; - }); - }, - child: Icon(Icons.location_pin, color: Colors.red, size: 30), - ), - ], - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfLinearGauge( + markerPointers: [ + LinearWidgetPointer( + value: _firstPointer, + dragBehavior: LinearMarkerDragBehavior.free, + onChanged: (double newValue) { + setState(() { + _firstPointer = newValue; + }); + }, + position: LinearElementPosition.outside, + child: Icon(Icons.location_pin, color: Colors.blue, size: 30), + ), + LinearWidgetPointer( + value: _secondPointer, + position: LinearElementPosition.outside, + dragBehavior: LinearMarkerDragBehavior.free, + onChanged: (double newValue) { + setState(() { + _secondPointer = newValue; + }); + }, + child: Icon(Icons.location_pin, color: Colors.red, size: 30), + ), + ], + ), + ); + } {% endhighlight %} @@ -217,31 +217,31 @@ The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gau {% highlight dart %} -double _value = 50; + double _value = 50; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfLinearGauge( - markerPointers: [ - LinearWidgetPointer( - value: _value, - onChangeStart: (double newValue) { - _value = newValue; - }, - onChanged: (double newValue) { - setState(() { + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfLinearGauge( + markerPointers: [ + LinearWidgetPointer( + value: _value, + onChangeStart: (double newValue) { _value = newValue; - }); - }, - onChangeEnd: (double newValue) { - _value = newValue; - }, - child: Container(height: 14, width: 14, color: Colors.redAccent), - ), - ], - ), - ); -} + }, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + onChangeEnd: (double newValue) { + _value = newValue; + }, + child: Container(height: 14, width: 14, color: Colors.redAccent), + ), + ], + ), + ); + } {% endhighlight %} From dbddb70d466b405cb0a08f05fe2456f9ab744350 Mon Sep 17 00:00:00 2001 From: Hariram4428 Date: Thu, 22 May 2025 13:20:10 +0530 Subject: [PATCH 2/3] FLUT-958981-[feature]: Cleared grammatical errors for radial gauge pages --- Flutter/radial-gauge/accessibility.md | 34 +- Flutter/radial-gauge/animation.md | 110 +- Flutter/radial-gauge/annotation.md | 278 +++-- Flutter/radial-gauge/axes.md | 1053 ++++++++++--------- Flutter/radial-gauge/export-radial-gauge.md | 160 +-- Flutter/radial-gauge/getting-started.md | 16 +- Flutter/radial-gauge/marker-pointer.md | 293 +++--- Flutter/radial-gauge/needle-pointer.md | 402 ++++--- Flutter/radial-gauge/overview.md | 12 +- Flutter/radial-gauge/pointers.md | 143 +-- Flutter/radial-gauge/radial-gauge-title.md | 53 +- Flutter/radial-gauge/range-pointer.md | 191 ++-- Flutter/radial-gauge/ranges.md | 338 +++--- Flutter/radial-gauge/widget-pointer.md | 163 +-- 14 files changed, 1838 insertions(+), 1408 deletions(-) diff --git a/Flutter/radial-gauge/accessibility.md b/Flutter/radial-gauge/accessibility.md index acc5db4cf..e9621d0c6 100644 --- a/Flutter/radial-gauge/accessibility.md +++ b/Flutter/radial-gauge/accessibility.md @@ -11,25 +11,25 @@ documentation: ug ## Screen reader -The [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) can be accessed by the screen readers by wrapping the [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) widget to the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget. +The [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) can be made accessible to screen readers by wrapping it with the flutter [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget. This provides meaningful information about the gauge to assistive technologies. {% tabs %} {% highlight Dart %} -double _value = 50; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Semantics( - label: 'Syncfusion Flutter Radial Gauge', - value: _value.toString(), - child: SfRadialGauge(axes: [ - RadialAxis(pointers: [NeedlePointer(value: _value)]) - ]), - ), - ); -} + double _value = 50; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Semantics( + label: 'Syncfusion Flutter Radial Gauge', + value: _value.toString(), + child: SfRadialGauge(axes: [ + RadialAxis(pointers: [NeedlePointer(value: _value)]) + ]), + ), + ); + } {% endhighlight %} {% endtabs %} @@ -50,7 +50,7 @@ You can customize the color of the [`SfRadialGauge`](https://pub.dev/documentati ## Large fonts -You can change the font size of the [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) elements using the following APIs: +For users who need larger text, you can adjust the font size of the [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) elements using these APIs: * [Title](https://help.syncfusion.com/flutter/radial-gauge/radial-gauge-title#text-alignment) * [Axis labels](https://help.syncfusion.com/flutter/radial-gauge/axes#label-style-customization) @@ -58,4 +58,4 @@ You can change the font size of the [`SfRadialGauge`](https://pub.dev/documentat ## Easier touch targets -The [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) has touch target as 48 * 48 as per the standard for all the elements. +The [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) follows accessibility standards by providing touch targets of 48 × 48 pixels for all interactive elements, making it easier for users with motor impairments to interact with the gauge. diff --git a/Flutter/radial-gauge/animation.md b/Flutter/radial-gauge/animation.md index 1e998a589..a646ade58 100644 --- a/Flutter/radial-gauge/animation.md +++ b/Flutter/radial-gauge/animation.md @@ -15,24 +15,36 @@ The radial gauge allows all of its elements to be animated with [`enableLoadingA {% highlight dart %} -override -Widget build(BuildContext context) { - return Scaffold( + @override + Widget build(BuildContext context) { + return Scaffold( body: Center( child: SfRadialGauge( - enableLoadingAnimation: true, animationDuration: 4500, - axes: [ - RadialAxis(minimum: 0,maximum: 150, - ranges: [ - GaugeRange(startValue: 0,endValue: 50,color: Colors.green,startWidth: 10,endWidth: 10), - GaugeRange(startValue: 50,endValue: 100,color: Colors.orange,startWidth: 10,endWidth: 10), - GaugeRange(startValue: 100,endValue: 150,color: Colors.red,startWidth: 10,endWidth: 10)], - pointers: [NeedlePointer(value:90, )], - annotations: [ - GaugeAnnotation(widget: Container(child: - Text('90.0',style: TextStyle(fontSize: 25,fontWeight:FontWeight.bold))), - angle: 90,positionFactor: 0.5)] - )] + enableLoadingAnimation: true, + animationDuration: 4500, + axes: [ + RadialAxis( + minimum: 0, + maximum: 150, + ranges: [ + GaugeRange(startValue: 0, endValue: 50, color: Colors.green, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 50, endValue: 100, color: Colors.orange, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 100, endValue: 150, color: Colors.red, startWidth: 10, endWidth: 10) + ], + pointers: [ + NeedlePointer(value: 90) + ], + annotations: [ + GaugeAnnotation( + widget: Container( + child: Text('90.0', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)) + ), + angle: 90, + positionFactor: 0.5 + ) + ] + ) + ] ), ), ); @@ -44,7 +56,7 @@ Widget build(BuildContext context) { ## Pointer Animation -The [`enableAnimation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/enableAnimation.html) property of pointer allows to enable or disable animation for pointer. The gauge pointer has the following animation type: +The [`enableAnimation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/enableAnimation.html) property of pointer allows you to enable or disable animation for pointers. The gauge pointer supports the following animation types: * `bounceOut` * `ease` @@ -58,29 +70,47 @@ The animation type can be changed using the [`animationType`](https://pub.dev/do {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - axisLineStyle: AxisLineStyle(thickness: 30), showTicks: false, - pointers: [NeedlePointer(value: 60, enableAnimation: true, - needleStartWidth: 0, - needleEndWidth: 5, needleColor: Color(0xFFDADADA), - knobStyle: KnobStyle(color: Colors.white, borderColor: Color(0xFFDADADA), - knobRadius: 0.06, - borderWidth: 0.04), - tailStyle: TailStyle(color:Color(0xFFDADADA), width: 5, - length: 0.15) - ), - RangePointer(value: 60, width: 30, enableAnimation: true, color: Colors.orange) - ] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle(thickness: 30), + showTicks: false, + pointers: [ + NeedlePointer( + value: 60, + enableAnimation: true, + needleStartWidth: 0, + needleEndWidth: 5, + needleColor: Color(0xFFDADADA), + knobStyle: KnobStyle( + color: Colors.white, + borderColor: Color(0xFFDADADA), + knobRadius: 0.06, + borderWidth: 0.04 + ), + tailStyle: TailStyle( + color: Color(0xFFDADADA), + width: 5, + length: 0.15 + ) + ), + RangePointer( + value: 60, + width: 30, + enableAnimation: true, + color: Colors.orange + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} diff --git a/Flutter/radial-gauge/annotation.md b/Flutter/radial-gauge/annotation.md index 91dd604f9..4ec2eaff3 100644 --- a/Flutter/radial-gauge/annotation.md +++ b/Flutter/radial-gauge/annotation.md @@ -9,13 +9,13 @@ documentation: ug # Annotation in Flutter Radial Gauge (SfRadialGauge) -[`Radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows you to add multiple widgets such as text and image as an annotation to a specific point of interest in radial gauge. +[`Radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows you to add multiple widgets such as text and image as annotations to specific points of interest in the radial gauge. The following properties are available in [`annotation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation-class.html) to customizes the position and alignment of [`annotation widget`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/widget.html) -* [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) – Allows to position the annotation using the angle. +* [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) – Allows you to position the annotation using the angle. -* [`axisValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html) – Allows to position the annotation using the axis value. +* [`axisValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html) – Allows you to position the annotation using the axis value. * [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) – Specifies the factor value to position the annotation based on the provided [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html) or [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) * [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/horizontalAlignment.html) – Specifies the horizontal alignment for positioning the annotation widget. @@ -23,22 +23,29 @@ The following properties are available in [`annotation`](https://pub.dev/documen {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( + @override + Widget build(BuildContext context) { + return Scaffold( body: Center( child: SfRadialGauge( - axes: [RadialAxis( - annotations: [ - GaugeAnnotation(axisValue: 50, positionFactor: 0.4, - widget: Text('50.0', style: - TextStyle(fontWeight: FontWeight.bold, fontSize: 20),))] + axes: [ + RadialAxis( + annotations: [ + GaugeAnnotation( + axisValue: 50, + positionFactor: 0.4, + widget: Text( + '50.0', + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), + ) + ) + ] ) ], ) ) ); -} + } {% endhighlight %} @@ -46,24 +53,34 @@ Widget build(BuildContext context) { **Positioning annotation** -The annotation can be positioned either using the [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) or [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html). When providing both the [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) and the [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html), priority will be provided to the angle value. The following example shows how to position the annotation widget using angle. +The annotation can be positioned either using the [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) or [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html). When providing both the [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) and the [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html), priority will be given to the angle value. The following example shows how to position the annotation widget using angle. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [NeedlePointer(value: 90)], - annotations: [ - GaugeAnnotation(angle: 90, positionFactor: 0.5, - widget: Text('90.0', style: TextStyle(fontWeight: FontWeight.bold, - fontSize: 20),))])],) - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [NeedlePointer(value: 90)], + annotations: [ + GaugeAnnotation( + angle: 90, + positionFactor: 0.5, + widget: Text( + '90.0', + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), + ) + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -72,25 +89,36 @@ Widget build(BuildContext context) { The following code example shows how to position the annotation using [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html) {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - annotations: [ - GaugeAnnotation(axisValue: 50, positionFactor: 0.4, - widget: Text('50.0', style: - TextStyle(fontWeight: FontWeight.bold, fontSize: 20),))] - )],) - ); -} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + annotations: [ + GaugeAnnotation( + axisValue: 50, + positionFactor: 0.4, + widget: Text( + '50.0', + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), + ) + ) + ] + ) + ], + ) + ) + ); + } {% endhighlight %} ![annotation position with axis](images/annotation/annottaion_axis.jpg) -The [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) is used to move the annotation widget from the center of axis to the edge of the axis. For example, when you specify the [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) as 0.5, the annotation widget will be moved from the center towards the corresponding direction with the distance of half of the radius value of axis. +The [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) is used to move the annotation widget from the center of axis to the edge of the axis. For example, when you specify the [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) as 0.5, the annotation widget will be moved from the center towards the corresponding direction with the distance of half of the radius value of the axis. By default, the value of [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) is 0. @@ -99,38 +127,64 @@ By default, the value of [`positionFactor`](https://pub.dev/documentation/syncfu Annotations provide options to add any image over the gauge control with respect to its offset position. You can add multiple images in a single control. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( interval: 10, - startAngle: 0, endAngle: 360, showTicks: false, - showLabels: false, - axisLineStyle: AxisLineStyle(thickness: 20), - pointers: [RangePointer(value: 73, - width: 20, color: Color(0xFFFFCD60), - enableAnimation: true, - cornerStyle: CornerStyle.bothCurve)], - annotations: [ - GaugeAnnotation(widget: Column(children: [Container( - width: 50.00 , - height: 50.00, - decoration: new BoxDecoration( - image: new DecorationImage( - image: ExactAssetImage('images/sun.png'), - fit: BoxFit.fitHeight, - ), - )), - Padding(padding: EdgeInsets.fromLTRB(0, 2, 0, 0), - child: Container(child:Text('73°F', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 25)) ,),) - ],) , angle: 270, positionFactor: 0.1)] - )]) - ); -} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + interval: 10, + startAngle: 0, + endAngle: 360, + showTicks: false, + showLabels: false, + axisLineStyle: AxisLineStyle(thickness: 20), + pointers: [ + RangePointer( + value: 73, + width: 20, + color: Color(0xFFFFCD60), + enableAnimation: true, + cornerStyle: CornerStyle.bothCurve + ) + ], + annotations: [ + GaugeAnnotation( + widget: Column( + children: [ + Container( + width: 50.00, + height: 50.00, + decoration: new BoxDecoration( + image: new DecorationImage( + image: ExactAssetImage('images/sun.png'), + fit: BoxFit.fitHeight, + ), + ) + ), + Padding( + padding: EdgeInsets.fromLTRB(0, 2, 0, 0), + child: Container( + child: Text( + '73°F', + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25) + ), + ), + ) + ], + ), + angle: 270, + positionFactor: 0.1 + ) + ] + ) + ] + ) + ) + ); + } {% endhighlight %} @@ -143,22 +197,31 @@ Widget build(BuildContext context) { The following code example demonstrates how to set the [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/horizontalAlignment.html) for annotation {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - annotations: [ - GaugeAnnotation(axisValue: 50, positionFactor: 0.4, - horizontalAlignment: GaugeAlignment.far, - - widget: Text('50.0', style: - TextStyle(fontWeight: FontWeight.bold, fontSize: 20),))] - )],) - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + annotations: [ + GaugeAnnotation( + axisValue: 50, + positionFactor: 0.4, + horizontalAlignment: GaugeAlignment.far, + widget: Text( + '50.0', + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), + ) + ) + ] + ) + ], + ) + ) + ); + } {% endhighlight %} @@ -168,21 +231,30 @@ The following code example demonstrates how to set [`verticalAlignment`](https:/ {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - annotations: [ - GaugeAnnotation(axisValue: 50, positionFactor: 0.4, - verticalAlignment: GaugeAlignment.far, - - widget: Text('50.0', style: - TextStyle(fontWeight: FontWeight.bold, fontSize: 20),))] - )],) - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + annotations: [ + GaugeAnnotation( + axisValue: 50, + positionFactor: 0.4, + verticalAlignment: GaugeAlignment.far, + widget: Text( + '50.0', + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), + ) + ) + ] + ) + ], + ) + ) + ); + } {% endhighlight %} diff --git a/Flutter/radial-gauge/axes.md b/Flutter/radial-gauge/axes.md index c9f9a877e..514cf4b9e 100644 --- a/Flutter/radial-gauge/axes.md +++ b/Flutter/radial-gauge/axes.md @@ -19,18 +19,18 @@ The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/g {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(minimum: -60, maximum: 60 - ) - ] - ), - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(minimum: -60, maximum: 60) + ] + ), + ), + ); + } {% endhighlight %} @@ -42,18 +42,18 @@ The start and end angles of radial axis can be customized using the [`startAngle {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(startAngle: 180, endAngle: 90, - ) - ] - ), - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(startAngle: 180, endAngle: 90) + ] + ), + ), + ); + } {% endhighlight %} @@ -65,17 +65,19 @@ The radius of the radial axis can be customized using the [`radiusFactor`](https {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(), - RadialAxis(radiusFactor: 0.5)] - ), - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(), + RadialAxis(radiusFactor: 0.5) + ] + ), + ), + ); + } {% endhighlight %} @@ -87,21 +89,26 @@ The position of the [`radial axis`](https://pub.dev/documentation/syncfusion_flu {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(startAngle: 270, endAngle: 270, interval: 10), - RadialAxis( centerY: 0.55, centerX: 0.35, - radiusFactor: 0.3, startAngle: 270, - endAngle: 270, interval: 20 - ) - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(startAngle: 270, endAngle: 270, interval: 10), + RadialAxis( + centerY: 0.55, + centerX: 0.35, + radiusFactor: 0.3, + startAngle: 270, + endAngle: 270, + interval: 20 + ) + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -114,13 +121,19 @@ The [`canScaleToFit`](https://pub.dev/documentation/syncfusion_flutter_gauges/la {% highlight dart %} @override - Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( startAngle: 180, endAngle: 0, - interval: 10, - canScaleToFit: true)]), + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + startAngle: 180, + endAngle: 0, + interval: 10, + canScaleToFit: true + ) + ] + ), ), ); } @@ -136,16 +149,18 @@ The axis label can be rotated based on its current angle using the [`canRotateLa {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(canRotateLabels: true)] - ), - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(canRotateLabels: true) + ] + ), + ), + ); + } {% endhighlight %} @@ -162,18 +177,25 @@ The default value of both the [`showFirstLabel`](https://pub.dev/documentation/s {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( interval: 1, showFirstLabel: false, - startAngle: 270, endAngle: 270, minimum: 0, maximum: 12), - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + interval: 1, + showFirstLabel: false, + startAngle: 270, + endAngle: 270, + minimum: 0, + maximum: 12 + ) + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -187,16 +209,16 @@ When the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/ {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( isInversed: true)] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( isInversed: true)] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -208,16 +230,16 @@ By default, a maximum of three labels are displayed for each 100 logical pixels {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( maximumLabels: 5)] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( maximumLabels: 5)] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -229,16 +251,18 @@ The interval between labels can be customized using the [`interval`](https://pub {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(interval: 20)] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(interval: 20) + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -257,19 +281,24 @@ The radial axis line can be customized using the [`axisLineStyle`](https://pub.d {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - axisLineStyle: AxisLineStyle(thickness: 0.1, - thicknessUnit: GaugeSizeUnit.factor, color: Colors.deepPurple,)), - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 0.1, + thicknessUnit: GaugeSizeUnit.factor, + color: Colors.deepPurple + ) + ) + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -281,18 +310,24 @@ The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/late {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(axisLineStyle: AxisLineStyle(thickness: 15, - cornerStyle:CornerStyle.bothCurve)), - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 15, + cornerStyle: CornerStyle.bothCurve + ) + ) + ] + ), ), - ), - ); -} + ); + } + {% endhighlight %} ![axis corner](images/axis/axis_corner.jpg) @@ -303,18 +338,20 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - axisLineStyle: AxisLineStyle( dashArray: [5,5])), - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle(dashArray: [5, 5]) + ) + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -326,25 +363,27 @@ The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/ {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - axisLineStyle: AxisLineStyle(thickness: 0.1, + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 0.1, thicknessUnit: GaugeSizeUnit.factor, - gradient: const SweepGradient( - colors: [Color(0xFFFF7676), Color(0xFFF54EA2)], - stops: [0.25, 0.75] - ), + gradient: const SweepGradient( + colors: [Color(0xFFFF7676), Color(0xFFF54EA2)], + stops: [0.25, 0.75] ) - ), - ] + ) + ) + ] ), - ), - ); -} + ), + ); + } {% endhighlight %} @@ -356,16 +395,18 @@ The visibility of the axis line can be customized using the [`showAxisLine`](htt {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(showAxisLine: false)] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(showAxisLine: false) + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -377,14 +418,15 @@ Widget build(BuildContext context) { {% highlight dart %} -@override + @override Widget build(BuildContext context) { return Scaffold( body: Center( - child: SfRadialGauge( - backgroundColor: Colors.lightBlue, - axes: [RadialAxis()], - )), + child: SfRadialGauge( + backgroundColor: Colors.lightBlue, + axes: [RadialAxis()] + ) + ), ); } @@ -398,62 +440,70 @@ Widget build(BuildContext context) { {% highlight dart %} -@override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( body: Center( child: Padding( padding: EdgeInsets.fromLTRB(10, 0, 10, 0), child: SfRadialGauge( axes: [ - RadialAxis(showAxisLine: false, - radiusFactor: 1, - showLastLabel: false, - canRotateLabels: true, - tickOffset: 0.32, - offsetUnit: GaugeSizeUnit.factor, - onLabelCreated: axisLabelCreated, - startAngle: 270, - endAngle: 270, - labelOffset: 0.05, - maximum: 360, - minimum: 0, - interval: 30, - minorTicksPerInterval: 4, - axisLabelStyle: GaugeTextStyle(color: const Color(0xFF949494)), - minorTickStyle: MinorTickStyle(color: const Color(0xFF616161), - thickness: 1.6, - length: 0.058, - lengthUnit: GaugeSizeUnit.factor), - majorTickStyle: MajorTickStyle(color: const Color(0xFF949494), - thickness: 2.3, - length: 0.087, - lengthUnit: GaugeSizeUnit.factor), - backgroundImage: const AssetImage( - 'images/dark_theme_gauge.png'), - pointers: [ - MarkerPointer(value: 90, + RadialAxis( + showAxisLine: false, + radiusFactor: 1, + showLastLabel: false, + canRotateLabels: true, + tickOffset: 0.32, + offsetUnit: GaugeSizeUnit.factor, + onLabelCreated: axisLabelCreated, + startAngle: 270, + endAngle: 270, + labelOffset: 0.05, + maximum: 360, + minimum: 0, + interval: 30, + minorTicksPerInterval: 4, + axisLabelStyle: GaugeTextStyle(color: const Color(0xFF949494)), + minorTickStyle: MinorTickStyle( + color: const Color(0xFF616161), + thickness: 1.6, + length: 0.058, + lengthUnit: GaugeSizeUnit.factor + ), + majorTickStyle: MajorTickStyle( + color: const Color(0xFF949494), + thickness: 2.3, + length: 0.087, + lengthUnit: GaugeSizeUnit.factor + ), + backgroundImage: const AssetImage('images/dark_theme_gauge.png'), + pointers: [ + MarkerPointer( + value: 90, + color: const Color(0xFFDF5F2D), + enableAnimation: true, + animationDuration: 1200, + markerOffset: 0.71, + offsetUnit: GaugeSizeUnit.factor, + markerType: MarkerType.triangle, + markerHeight: 10, + markerWidth: 15 + ) + ], + annotations: [ + GaugeAnnotation( + angle: 270, + positionFactor: 0.025, + widget: Text( + '90', + style: TextStyle( color: const Color(0xFFDF5F2D), - enableAnimation: true, - animationDuration: 1200, - markerOffset: 0.71, - offsetUnit: GaugeSizeUnit.factor, - markerType: MarkerType.triangle, - markerHeight: 10, - markerWidth: 15) - ], - annotations: [ - GaugeAnnotation(angle: 270, - positionFactor: 0.025, - widget: Text('90', - style: TextStyle( - color: const Color(0xFFDF5F2D), - fontWeight: FontWeight.bold, - fontSize: 22 - ) - ) - ) - ] + fontWeight: FontWeight.bold, + fontSize: 22 + ) + ) + ) + ] ) ], ), @@ -465,20 +515,16 @@ Widget build(BuildContext context) { void axisLabelCreated(AxisLabelCreatedArgs args) { if (args.text == '90') { args.text = 'E'; - args.labelStyle = GaugeTextStyle( - color: const Color(0xFFDF5F2D)); - }else{ + args.labelStyle = GaugeTextStyle(color: const Color(0xFFDF5F2D)); + } else { if (args.text == '0') { args.text = 'N'; - }else if (args.text == '180') { + } else if (args.text == '180') { args.text = 'S'; } else if (args.text == '270') { args.text = 'W'; } - - args.labelStyle = GaugeTextStyle( - color: const Color(0xFFFFFFFF), - ); + args.labelStyle = GaugeTextStyle(color: const Color(0xFFFFFFFF)); } } @@ -498,20 +544,26 @@ The axis labels can be customized using the [`axisLabelStyle`](https://pub.dev/d {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(axisLabelStyle: GaugeTextStyle( - color: Colors.red, fontSize: 15, - fontStyle:FontStyle.italic, - fontWeight: FontWeight.bold, fontFamily: 'Times') ), - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLabelStyle: GaugeTextStyle( + color: Colors.red, + fontSize: 15, + fontStyle: FontStyle.italic, + fontWeight: FontWeight.bold, + fontFamily: 'Times' + ) + ) + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -519,22 +571,24 @@ Widget build(BuildContext context) { **Formatting axis label** -The following property of the axis allows to customize the axis label text. +The following property of the axis allows to customize the axis label text: * [`labelFormat`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/labelFormat.html) - Allows to add prefix or suffix with the axis labels. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(labelFormat: '{value}m' ),] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(labelFormat: '{value}m') + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -544,20 +598,18 @@ Widget build(BuildContext context) { {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - numberFormat: NumberFormat.compactSimpleCurrency()), - ] - ), - ), - - ); -} - + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(numberFormat: NumberFormat.compactSimpleCurrency()) + ] + ), + ), + ); + } {% endhighlight %} @@ -569,17 +621,16 @@ The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/lates {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(showLabels: false ),] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis(showLabels: false ),] + ), ), - ), - ); -} - + ); + } {% endhighlight %} @@ -601,20 +652,31 @@ The major and minor tick lines of an axis can be customized using the [`majorTic {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(majorTickStyle: MajorTickStyle(length: 0.1, - lengthUnit: GaugeSizeUnit.factor, thickness: 1.5, color: Colors.black), - minorTickStyle: MinorTickStyle(length: 0.05, - lengthUnit: GaugeSizeUnit.factor, thickness: 1.5, color: Colors.black) - )] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + majorTickStyle: MajorTickStyle( + length: 0.1, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1.5, + color: Colors.black + ), + minorTickStyle: MinorTickStyle( + length: 0.05, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1.5, + color: Colors.black + ) + ) + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -626,19 +688,21 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - majorTickStyle: MajorTickStyle(length: 20, dashArray: [5,2.5]), - minorTickStyle: MinorTickStyle(length: 15, dashArray: [3,2.5])), - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + majorTickStyle: MajorTickStyle(length: 20, dashArray: [5, 2.5]), + minorTickStyle: MinorTickStyle(length: 15, dashArray: [3, 2.5]) + ) + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -650,18 +714,18 @@ The major ticks are generated based on the [`interval`](https://pub.dev/document {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(minorTicksPerInterval: 4 - ), - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis(minorTicksPerInterval: 4 + ), + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -673,16 +737,16 @@ The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(showTicks: false)] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis(showTicks: false)] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -690,22 +754,22 @@ Widget build(BuildContext context) { **Label and tick Placement** -The [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows to position the labels and ticks either inside or outside the axis line using the [`labelsPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/labelsPosition.html) and [`ticksPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/ticksPosition.html) properties. By default, both labels and ticks are positioned inside the axis line. +The [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows to position the labels and ticks either inside or outside the axis line using the [`labelsPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/labelsPosition.html) and [`ticksPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/ticksPosition.html) properties. By default, both labels and ticks are positioned inside the axis. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - labelsPosition: ElementsPosition.outside, - ticksPosition: ElementsPosition.outside)] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + labelsPosition: ElementsPosition.outside, + ticksPosition: ElementsPosition.outside)] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -719,17 +783,17 @@ The default value of tick offset is 0. While setting offset for the ticks, the a {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - tickOffset: 20)] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + tickOffset: 20)] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -739,20 +803,22 @@ The following code example shows how to add tick offset with the [`offsetUnit`]( {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(tickOffset: 0.2, - labelOffset: 0.2, offsetUnit: GaugeSizeUnit.factor - ), - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + tickOffset: 0.2, + labelOffset: 0.2, + offsetUnit: GaugeSizeUnit.factor + ) + ] + ), ), - ), - ); -} - + ); + } {% endhighlight %} @@ -764,19 +830,19 @@ The [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/late {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - labelOffset: 0.3, offsetUnit: GaugeSizeUnit.factor - ), - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + labelOffset: 0.3, offsetUnit: GaugeSizeUnit.factor + ), + ] + ), ), - ), - ); -} + ); + } {% endhighlight %} @@ -792,42 +858,42 @@ The [`Radial Gauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/lat {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ RadialAxis(minimum: 0 , maximum: 100, interval: 10, - ticksPosition: ElementsPosition.outside, - labelsPosition: ElementsPosition.outside, - - minorTicksPerInterval: 5, - radiusFactor: 0.9, labelOffset: 15, - minorTickStyle: MinorTickStyle(thickness: 1.5, - color: Color.fromARGB(255, 143, 20, 2), - length: 0.07, lengthUnit: GaugeSizeUnit.factor), - majorTickStyle: MinorTickStyle(thickness: 1.5, - color: Color.fromARGB(255, 143, 20, 2), - length: 0.15, lengthUnit: GaugeSizeUnit.factor,), - axisLineStyle: AxisLineStyle( thickness: 3, - color: Color.fromARGB(255, 143, 20, 2), ), - axisLabelStyle: GaugeTextStyle(fontSize: 12, - color:Color.fromARGB(255, 143, 20, 2),),), - - RadialAxis(minimum: 0 , maximum: 60, interval: 10, - radiusFactor: 0.6, labelOffset: 15, isInversed: true, - minorTicksPerInterval: 5, - minorTickStyle: MinorTickStyle(color: Colors.black, thickness: 1.5, - lengthUnit: GaugeSizeUnit.factor, length: 0.07), - majorTickStyle: MajorTickStyle(color: Colors.black, thickness: 1.5, - lengthUnit: GaugeSizeUnit.factor, length: 0.15), - axisLineStyle: AxisLineStyle(color: Colors.black, thickness: 3, ), - axisLabelStyle: GaugeTextStyle(color: Colors.black, fontSize: 12)), - ], - ) - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ RadialAxis(minimum: 0 , maximum: 100, interval: 10, + ticksPosition: ElementsPosition.outside, + labelsPosition: ElementsPosition.outside, + + minorTicksPerInterval: 5, + radiusFactor: 0.9, labelOffset: 15, + minorTickStyle: MinorTickStyle(thickness: 1.5, + color: Color.fromARGB(255, 143, 20, 2), + length: 0.07, lengthUnit: GaugeSizeUnit.factor), + majorTickStyle: MinorTickStyle(thickness: 1.5, + color: Color.fromARGB(255, 143, 20, 2), + length: 0.15, lengthUnit: GaugeSizeUnit.factor,), + axisLineStyle: AxisLineStyle( thickness: 3, + color: Color.fromARGB(255, 143, 20, 2), ), + axisLabelStyle: GaugeTextStyle(fontSize: 12, + color:Color.fromARGB(255, 143, 20, 2),),), + + RadialAxis(minimum: 0 , maximum: 60, interval: 10, + radiusFactor: 0.6, labelOffset: 15, isInversed: true, + minorTicksPerInterval: 5, + minorTickStyle: MinorTickStyle(color: Colors.black, thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, length: 0.07), + majorTickStyle: MajorTickStyle(color: Colors.black, thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, length: 0.15), + axisLineStyle: AxisLineStyle(color: Colors.black, thickness: 3, ), + axisLabelStyle: GaugeTextStyle(color: Colors.black, fontSize: 12)), + ], + ) + ), + ); + } {% endhighlight %} @@ -847,28 +913,27 @@ N> If both [`axisLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_g {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - onLabelCreated:axisLabelCreated,), - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + onLabelCreated:axisLabelCreated,), + ] + ), ), - ), - ); -} - -void axisLabelCreated(AxisLabelCreatedArgs args){ - if(args.text == '100'){ - args.labelStyle = GaugeTextStyle(color: Colors.red,fontStyle: FontStyle.italic, - fontFamily: 'Times', fontWeight: FontWeight.bold, fontSize: 15); - args.canRotate = true; - args.text = '100 %'; + ); } -} + void axisLabelCreated(AxisLabelCreatedArgs args){ + if(args.text == '100'){ + args.labelStyle = GaugeTextStyle(color: Colors.red,fontStyle: FontStyle.italic, + fontFamily: 'Times', fontWeight: FontWeight.bold, fontSize: 15); + args.canRotate = true; + args.text = '100 %'; + } + } {% endhighlight %} @@ -880,23 +945,22 @@ The [`onAxisTapped`](https://pub.dev/documentation/syncfusion_flutter_gauges/lat {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - onAxisTapped: axisTapped), - ] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + onAxisTapped: axisTapped), + ] + ), ), - ), - ); -} - + ); + } -void axisTapped(double _tappedValue){ - -} + void axisTapped(double _tappedValue){ + // Handle the tapped value + } {% endhighlight %} @@ -905,7 +969,8 @@ void axisTapped(double _tappedValue){ [`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. {% highlight dart %} - @override + + @override Widget build(BuildContext context) { return Scaffold( body: Center( @@ -923,72 +988,72 @@ void axisTapped(double _tappedValue){ ); } -class _CustomAxisRenderer extends RadialAxisRenderer { - _CustomAxisRenderer() : super(); + class _CustomAxisRenderer extends RadialAxisRenderer { + _CustomAxisRenderer() : super(); + + /// Generated the 9 non-linear interval labels from 0 to 150 + /// instead of actual generated labels. + @override + List generateVisibleLabels() { + final List _visibleLabels = []; + for (num i = 0; i < 9; i++) { + final double _value = _calculateLabelValue(i); + final CircularAxisLabel label = CircularAxisLabel( + this.axis.axisLabelStyle, _value.toInt().toString(), i, false); + label.value = _value; + _visibleLabels.add(label); + } - /// Generated the 9 non-linear interval labels from 0 to 150 - /// instead of actual generated labels. - @override - List generateVisibleLabels() { - final List _visibleLabels = []; - for (num i = 0; i < 9; i++) { - final double _value = _calculateLabelValue(i); - final CircularAxisLabel label = CircularAxisLabel( - this.axis.axisLabelStyle, _value.toInt().toString(), i, false); - label.value = _value; - _visibleLabels.add(label); + return _visibleLabels; } - return _visibleLabels; - } - - /// Returns the factor(0 to 1) from value to place the labels in an axis. - @override - double valueToFactor(double value) { - if (value >= 0 && value <= 2) { - return (value * 0.125) / 2; - } else if (value > 2 && value <= 5) { - return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125); - } else if (value > 5 && value <= 10) { - return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125); - } else if (value > 10 && value <= 20) { - return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125); - } else if (value > 20 && value <= 30) { - return (((value - 20) * 0.125) / (30 - 20)) + (4 * 0.125); - } else if (value > 30 && value <= 50) { - return (((value - 30) * 0.125) / (50 - 30)) + (5 * 0.125); - } else if (value > 50 && value <= 100) { - return (((value - 50) * 0.125) / (100 - 50)) + (6 * 0.125); - } else if (value > 100 && value <= 150) { - return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125); - } else { - return 1; + /// Returns the factor(0 to 1) from value to place the labels in an axis. + @override + double valueToFactor(double value) { + if (value >= 0 && value <= 2) { + return (value * 0.125) / 2; + } else if (value > 2 && value <= 5) { + return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125); + } else if (value > 5 && value <= 10) { + return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125); + } else if (value > 10 && value <= 20) { + return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125); + } else if (value > 20 && value <= 30) { + return (((value - 20) * 0.125) / (30 - 20)) + (4 * 0.125); + } else if (value > 30 && value <= 50) { + return (((value - 30) * 0.125) / (50 - 30)) + (5 * 0.125); + } else if (value > 50 && value <= 100) { + return (((value - 50) * 0.125) / (100 - 50)) + (6 * 0.125); + } else if (value > 100 && value <= 150) { + return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125); + } else { + return 1; + } } - } - /// To return the label value based on interval - double _calculateLabelValue(num value) { - if (value == 0) { - return 0; - } else if (value == 1) { - return 2; - } else if (value == 2) { - return 5; - } else if (value == 3) { - return 10; - } else if (value == 4) { - return 20; - } else if (value == 5) { - return 30; - } else if (value == 6) { - return 50; - } else if (value == 7) { - return 100; - } else { - return 150; + /// To return the label value based on interval + double _calculateLabelValue(num value) { + if (value == 0) { + return 0; + } else if (value == 1) { + return 2; + } else if (value == 2) { + return 5; + } else if (value == 3) { + return 10; + } else if (value == 4) { + return 20; + } else if (value == 5) { + return 30; + } else if (value == 6) { + return 50; + } else if (value == 7) { + return 100; + } else { + return 150; + } } } -} {% endhighlight %} diff --git a/Flutter/radial-gauge/export-radial-gauge.md b/Flutter/radial-gauge/export-radial-gauge.md index eef4fcb79..f0997bf95 100644 --- a/Flutter/radial-gauge/export-radial-gauge.md +++ b/Flutter/radial-gauge/export-radial-gauge.md @@ -9,92 +9,92 @@ documentation: ug # Export in Flutter Radial Gauge (SfRadialGauge) -[`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) provides support to export the Radial Gauge as a PNG image or as PDF document. +[`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) provides support to export the Radial Gauge as a PNG image or as a PDF document. ## Export image -To export the Radial Gauge as a PNG image, we can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary. +To export the Radial Gauge as a PNG image, we can get the image by calling the [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method on a repaint boundary. {% highlight dart %} -GlobalKey _globalKey = GlobalKey(); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Column( - children: [ - Container( - height: 400, - width: 400, - child: RepaintBoundary( - key: _globalKey, - child: SfRadialGauge( - axes: [ - RadialAxis( - minimum: 0, - maximum: 150, - ranges: [ - GaugeRange( - startValue: 0, - endValue: 50, - color: Colors.green, - startWidth: 10, - endWidth: 10), - GaugeRange( - startValue: 50, - endValue: 100, - color: Colors.orange, - startWidth: 10, - endWidth: 10), - GaugeRange( - startValue: 100, - endValue: 150, - color: Colors.red, - startWidth: 10, - endWidth: 10) - ], - pointers: [NeedlePointer(value: 90)], - ) - ], + GlobalKey _globalKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Column( + children: [ + Container( + height: 400, + width: 400, + child: RepaintBoundary( + key: _globalKey, + child: SfRadialGauge( + axes: [ + RadialAxis( + minimum: 0, + maximum: 150, + ranges: [ + GaugeRange( + startValue: 0, + endValue: 50, + color: Colors.green, + startWidth: 10, + endWidth: 10), + GaugeRange( + startValue: 50, + endValue: 100, + color: Colors.orange, + startWidth: 10, + endWidth: 10), + GaugeRange( + startValue: 100, + endValue: 150, + color: Colors.red, + startWidth: 10, + endWidth: 10) + ], + pointers: [NeedlePointer(value: 90)], + ) + ], + ), ), ), - ), - Padding( - padding: const EdgeInsets.only(top: 5.0), - child: ElevatedButton( - onPressed: _renderGaugeImage, - child: Text('Gauge to image'), - ), - ), - ], - ), - ); - } - - Future _renderGaugeImage() async { - final RenderRepaintBoundary boundary = - _globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary; - final ui.Image data = await boundary.toImage(pixelRatio: 3.0); - final bytes = await data.toByteData(format: ui.ImageByteFormat.png); - if (data != null) { - await Navigator.of(context).push( - MaterialPageRoute( - builder: (BuildContext context) { - return Scaffold( - appBar: AppBar(), - body: Center( - child: Container( - color: Colors.white, - child: Image.memory(bytes!.buffer.asUint8List()), - ), + Padding( + padding: const EdgeInsets.only(top: 5.0), + child: ElevatedButton( + onPressed: _renderGaugeImage, + child: Text('Gauge to image'), ), - ); - }, + ), + ], ), ); - } - } + } + + Future _renderGaugeImage() async { + final RenderRepaintBoundary boundary = + _globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary; + final ui.Image data = await boundary.toImage(pixelRatio: 3.0); + final bytes = await data.toByteData(format: ui.ImageByteFormat.png); + if (data != null) { + await Navigator.of(context).push( + MaterialPageRoute( + builder: (BuildContext context) { + return Scaffold( + appBar: AppBar(), + body: Center( + child: Container( + color: Colors.white, + child: Image.memory(bytes!.buffer.asUint8List()), + ), + ), + ); + }, + ), + ); + } + } {% endhighlight %} @@ -113,11 +113,11 @@ Similar to the above way, we can also export the rendered chart as a PDF documen GlobalKey _globalKey = GlobalKey(); -@override -Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar(title: Text('RenderGaugePdf')), - body: Column( + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: Text('RenderGaugePdf')), + body: Column( children: [ Container( height: 400, diff --git a/Flutter/radial-gauge/getting-started.md b/Flutter/radial-gauge/getting-started.md index ffdc628ca..6c6599169 100644 --- a/Flutter/radial-gauge/getting-started.md +++ b/Flutter/radial-gauge/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting started with Flutter Radial Gauge (SfRadialGauge) -This section explains the steps required to add the Flutter [Radial Gauge](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge) and its elements such as title, axis, range, pointer and annotation. This section covers only basic features needed to know to get started with Syncfusion® radial gauge. +This section explains the steps required to add the Flutter [Radial Gauge](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge) and its elements such as title, axis, range, pointer and annotation. This section covers only the basic features needed to get started with Syncfusion® radial gauge. -To get start quickly with our Flutter radial gauge widget, you can check on this video. +To get start quickly with our Flutter radial gauge widget, you can check on this video: @@ -56,7 +56,7 @@ Import the following package in your Dart code. ## Initialize the radial gauge -After the package has been imported, initialize the [SfRadialGauge](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge) as a child of any widget such as container widget. +After the package has been imported, initialize the [SfRadialGauge](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge) as a child of any widget such as a container widget. {% highlight dart %} @@ -67,11 +67,11 @@ After the package has been imported, initialize the [SfRadialGauge](https://www. body: Center( child: Container( child:SfRadialGauge() - ) ) - ) - ); - } + ) + ) + ); + } {% endhighlight %} @@ -79,7 +79,7 @@ After the package has been imported, initialize the [SfRadialGauge](https://www. ## Add title -You can add a title to the radial gauge to provide information to users about the designed gauge. The title can be set to gauge as demonstrated in following code snippet. +You can add a title to the radial gauge to provide information to users about the designed gauge. The title can be set to the gauge as demonstrated in the following code snippet: {% highlight dart %} diff --git a/Flutter/radial-gauge/marker-pointer.md b/Flutter/radial-gauge/marker-pointer.md index 08c4cbe54..213d6b892 100644 --- a/Flutter/radial-gauge/marker-pointer.md +++ b/Flutter/radial-gauge/marker-pointer.md @@ -12,18 +12,23 @@ documentation: ug Different types of markers are used to mark the pointer values in a scale. You can change the marker type using the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) property. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [MarkerPointer(value: 60)] - )], - ) - ), - ); - } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer(value: 60) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -43,25 +48,32 @@ Gauge supports the following types of marker: ## Image pointer -Image is used to denote the current pointer values instead of shape. It can be achieved by specifying the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) as image and specifying the [`imageUrl`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/imageUrl.html) property of marker pointer. +An Image can be used to denote the current pointer values instead of a shape. This can be achieved by setting the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) as image and specifying the [`imageUrl`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/imageUrl.html) property of the marker pointer. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [MarkerPointer(value: 60, - markerType: MarkerType.image,markerHeight: 30, - markerWidth: 30, - imageUrl: 'images/pin.png')] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: 60, + markerType: MarkerType.image, + markerHeight: 30, + markerWidth: 30, + imageUrl: 'images/pin.png' + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -69,27 +81,35 @@ Widget build(BuildContext context) { ## Text pointer -Text is used to denote the current pointer value instead of any marker shape. It can be achieved by setting the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) as text. The provided text can be customized using the [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/textStyle.html) property of marker pointer. +Text can be used to denote the current pointer value instead of any marker shape. This can be achieved by setting the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) as text. The provided text can be customized using the [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/textStyle.html) property of the marker pointer. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [MarkerPointer(value: 50, - markerType: MarkerType.text, text: 'Average', - textStyle: GaugeTextStyle(fontSize: 15, - fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic) - )] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: 50, + markerType: MarkerType.text, + text: 'Average', + textStyle: GaugeTextStyle( + fontSize: 15, + fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic + ) + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -99,29 +119,38 @@ Widget build(BuildContext context) { The marker pointer can be customized using the following properties: -* [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/color.html) – Allows to customize the marker color. -* [`markerHeight`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerHeight.html) – Allows to specify the marker height. -* [`markerWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerWidth.html) – Allows to specify the marker width. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/borderColor.html) – Allows to specify the border color for the marker. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/borderWidth.html) – Allows to specify the border width of the marker. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/color.html) – Allows you to customize the marker color. +* [`markerHeight`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerHeight.html) – Allows you to specify the marker height. +* [`markerWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerWidth.html) – Allows you to specify the marker width. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/borderColor.html) – Allows you to specify the border color for the marker. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/borderWidth.html) – Allows you to specify the border width of the marker. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [MarkerPointer(value: 60, - markerHeight: 30, markerWidth: 30, - markerType: MarkerType.circle, color: Colors.lightBlue, - borderWidth: 3, borderColor: Colors.black)] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: 60, + markerHeight: 30, + markerWidth: 30, + markerType: MarkerType.circle, + color: Colors.lightBlue, + borderWidth: 3, + borderColor: Colors.black + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -129,22 +158,29 @@ Widget build(BuildContext context) { **Marker elevation** -The marker pointer can be elevated by rendering its shadow behind it and the z- coordinate position at which the shadow can be positioned relative to the marker can be controlled by the [`elevation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/elevation.html) property. +The marker pointer can be elevated by rendering its shadow behind it. The z- coordinate position at which the shadow can be positioned relative to the marker can be controlled by the [`elevation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/elevation.html) property. {% highlight dart %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(pointers: [ - MarkerPointer( - value: 60, markerHeight: 20, markerWidth: 20, elevation: 4) - ]) - ], - )), + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: 60, + markerHeight: 20, + markerWidth: 20, + elevation: 4 + ) + ] + ) + ], + ) + ), ); } @@ -158,7 +194,7 @@ N> The [`elevation`](https://pub.dev/documentation/syncfusion_flutter_gauges/lat **Marker overlay** -The marker overlay rendered around the marker when the marker is dragged. When [`enableDragging`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/enableDragging.html) property of marker is set as true and while dragging the marker, the overlay will come around the marker pointer. +The marker overlay is rendered around the marker when the marker is dragged. When [`enableDragging`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/enableDragging.html) property of the marker is set to true and while dragging the marker, the overlay will appear around the marker pointer. {% highlight dart %} @@ -166,18 +202,22 @@ The marker overlay rendered around the marker when the marker is dragged. When [ Widget build(BuildContext context) { return Scaffold( body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(pointers: [ - MarkerPointer( - value: 60, - markerHeight: 20, - markerWidth: 20, - enableDragging: true, - markerType: MarkerType.circle) - ]) - ], - )), + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: 60, + markerHeight: 20, + markerWidth: 20, + enableDragging: true, + markerType: MarkerType.circle + ) + ] + ) + ], + ) + ), ); } @@ -185,7 +225,7 @@ The marker overlay rendered around the marker when the marker is dragged. When [ ![marker overlay](images/marker-pointers/marker_overlay.png) -By default, the [`overlayRadius`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/overlayRadius.html) is calculated based on the provided [`markerHeight`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerHeight.html) and [`markerWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerWidth.html) property and [`overlayColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/overlayColor.html) is considered based on [`marker color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/color.html). The properties are used to customize the overlay color and its radius, +By default, the [`overlayRadius`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/overlayRadius.html) is calculated based on the provided [`markerHeight`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerHeight.html) and [`markerWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerWidth.html) property and the [`overlayColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/overlayColor.html) is derived from the [`marker color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/color.html). The following properties are used to customize the overlay color and its radius, * [`overlayColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/overlayColor.html) – Allows customizing the overlay color. @@ -197,24 +237,27 @@ By default, the [`overlayRadius`](https://pub.dev/documentation/syncfusion_flutt Widget build(BuildContext context) { return Scaffold( body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(pointers: [ - MarkerPointer( - value: 60, - markerHeight: 20, - markerWidth: 20, - enableDragging: true, - overlayRadius: 15, - overlayColor: Colors.red.withOpacity(0.12), - markerType: MarkerType.circle) - ]) - ], - )), + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: 60, + markerHeight: 20, + markerWidth: 20, + enableDragging: true, + overlayRadius: 15, + overlayColor: Colors.red.withOpacity(0.12), + markerType: MarkerType.circle + ) + ] + ) + ], + ) + ), ); } - {% endhighlight %} ![overlay customization](images/marker-pointers/marker_overlay_customization.png) @@ -225,25 +268,31 @@ N> The marker overlay applies to all the marker types except [`MarkerType.image` The marker pointer can be moved near or far from its actual position using the [`markerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerOffset.html) and [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) properties. -When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) to logical pixel, then the marker pointer will be moved based on the logical pixel value. If you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) to factor, then provided factor will be multiplied with the axis radius value, and then the pointer will be moved to corresponding value. The default value of [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) is GaugeSizeUnit.logicalPixel. +When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) to logical pixel, the marker pointer will be moved based on the logical pixel value. If you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) to factor, then provided factor will be multiplied with the axis radius value, and the pointer will be moved to the corresponding position. The default value of [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) is GaugeSizeUnit.logicalPixel. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( radiusFactor: 0.9, centerY: 0.65, - pointers: [MarkerPointer(value: 60, - markerOffset: -5 - ) - ] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + radiusFactor: 0.9, + centerY: 0.65, + pointers: [ + MarkerPointer( + value: 60, + markerOffset: -5 + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} diff --git a/Flutter/radial-gauge/needle-pointer.md b/Flutter/radial-gauge/needle-pointer.md index ccbcc3d0d..c573d651a 100644 --- a/Flutter/radial-gauge/needle-pointer.md +++ b/Flutter/radial-gauge/needle-pointer.md @@ -9,23 +9,26 @@ documentation: ug # Needle Pointer in Flutter Radial Gauge (SfRadialGauge) -[`Needle Pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) contains three parts namely needle, [`knob`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/knobStyle.html), and [`tail`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/tailStyle.html) and that can be placed on a gauge to mark the values. +[`Needle Pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) contains three parts namely needle, [`knob`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/knobStyle.html), and [`tail`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/tailStyle.html) and that can be placed on a gauge to mark values. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [NeedlePointer(value: 60) - ] - ) - ], - ) - ), - ); - } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer(value: 60) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -52,25 +55,30 @@ The needle can be customized using the following properties: The needle length can be controlled using the [`needleLength`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleLength.html) and [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/lengthUnit.html) properties. The length can be set either in logical pixels or factor using [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/lengthUnit.html). If the [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/lengthUnit.html) is set to logical pixel, the logical pixel value will be set to the [`needleLength`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleLength.html) -If the [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/lengthUnit.html) is set to factor, then the factor value will be set to the [`needleLength`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleLength.html). The factor value ranges from 0 to 1. For example, if the needle length is set to 0.5, the half of the radius value of axis to needle length. The default value of [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/lengthUnit.html) is GaugeSizeUnit.factor +If the [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/lengthUnit.html) is set to factor, then the factor value will be set to the [`needleLength`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleLength.html). The factor value ranges from 0 to 1. For example, if the needle length is set to 0.5, half of the radius value of axis will be used as the needle length. The default value of [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/lengthUnit.html) is GaugeSizeUnit.factor {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [NeedlePointer(value: 60, - lengthUnit: GaugeSizeUnit.logicalPixel, - needleLength: 130)] - ) - ], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + lengthUnit: GaugeSizeUnit.logicalPixel, + needleLength: 130 + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -81,21 +89,30 @@ Widget build(BuildContext context) { The width of the needle pointer can be customized using the [`needleStartWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleStartWidth.html) and [`needleEndWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleEndWidth.html) properties. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [NeedlePointer(value: 60, - lengthUnit: GaugeSizeUnit.factor, - needleLength: 0.75, needleColor: Colors.red, - needleStartWidth: 6, needleEndWidth: 6)] - )], - ) - ), - ); - } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.75, + needleColor: Colors.red, + needleStartWidth: 6, + needleEndWidth: 6 + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -103,34 +120,40 @@ Widget build(BuildContext context) { **Gradient support for needle** - The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/gradient.html) property of [`needle pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) allows to specify the smooth color transition to pointer by specifying the different colors based on provided factor value. + The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/gradient.html) property of [`needle pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) allows you to specify a smooth color transition for the pointer by defining different colors based on provided factor values. + +{% highlight dart %} - {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( + @override + Widget build(BuildContext context) { + return Scaffold( body: Center( child: SfRadialGauge( - axes: [RadialAxis(, - pointers: [ - NeedlePointer( - value: 65, - lengthUnit: GaugeSizeUnit.factor, - needleLength: 0.8, - needleEndWidth: 11, - gradient: const LinearGradient( - colors: [ - Color(0xFFFF6B78), Color(0xFFFF6B78), - Color(0xFFE20A22), Color(0xFFE20A22)], - stops: [0, 0.5, 0.5, 1]), - needleColor: const Color(0xFFF67280), - knobStyle: KnobStyle( - knobRadius: 0.08, - sizeUnit: GaugeSizeUnit.factor, - color: Colors.black)), - ] + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 65, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.8, + needleEndWidth: 11, + gradient: const LinearGradient( + colors: [ + Color(0xFFFF6B78), Color(0xFFFF6B78), + Color(0xFFE20A22), Color(0xFFE20A22) + ], + stops: [0, 0.5, 0.5, 1] + ), + needleColor: const Color(0xFFF67280), + knobStyle: KnobStyle( + knobRadius: 0.08, + sizeUnit: GaugeSizeUnit.factor, + color: Colors.black + ) + ), + ] ), - ] + ] ), ), ); @@ -152,31 +175,40 @@ The knob can be customized using the following properties: * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/borderColor.html) – Specifies the border color of knob. -* [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) – Allows to specify whether the value of knob radius and border width is in logical pixels or in factor. +* [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) – Allows you to specify whether the value of knob radius and border width is in logical pixels or in factor. **Knob radius customization** The radius of the knob can be customized using the [`knobRadius`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/knobRadius.html) and [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html). - The logical pixel value can be set to knob radius when the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) is set to logical pixel +The logical pixel value can be set to knob radius when the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) is set to logical pixel {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [NeedlePointer(value: 60, - needleStartWidth: 1, needleEndWidth: 5, - knobStyle: KnobStyle(knobRadius: 10, - sizeUnit: GaugeSizeUnit.logicalPixel, color: Colors.red)) - ] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + needleStartWidth: 1, + needleEndWidth: 5, + knobStyle: KnobStyle( + knobRadius: 10, + sizeUnit: GaugeSizeUnit.logicalPixel, + color: Colors.red + ) + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -190,24 +222,32 @@ Like radius, the [`borderWidth`](https://pub.dev/documentation/syncfusion_flutte {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [NeedlePointer(value: 60, - needleStartWidth: 1, needleEndWidth: 5, - knobStyle: KnobStyle(knobRadius: 0.05, borderColor: Colors.black, - borderWidth: 0.02, - color: Colors.white - ) - )] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + needleStartWidth: 1, + needleEndWidth: 5, + knobStyle: KnobStyle( + knobRadius: 0.05, + borderColor: Colors.black, + borderWidth: 0.02, + color: Colors.white + ) + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -223,9 +263,9 @@ The [`tail`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gaug * [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/TailStyle/width.html) – Specifies the width for the tail. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/TailStyle/borderColor.html) – Allows to specify the border color of tail. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/TailStyle/borderColor.html) – Allows you to specify the border color of tail. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/TailStyle/borderWidth.html) – Allows to specify the border width of tail. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/TailStyle/borderWidth.html) – Allows you to specify the border width of tail. * [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/gradient.html) - Specifies the gradient for the tail. @@ -233,20 +273,25 @@ By default, the value of [`lengthUnit`](https://pub.dev/documentation/syncfusion {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [NeedlePointer(value: 60, - tailStyle: TailStyle(width: 8, length: 0.15) - )] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + tailStyle: TailStyle(width: 8, length: 0.15) + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -256,24 +301,40 @@ The following code example shows how to specify the length in logical pixels. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [NeedlePointer(value: 60,needleStartWidth: 3, needleEndWidth: 3, - knobStyle: KnobStyle(color: Colors.white, knobRadius: 0.07, - borderColor: Colors.black, borderWidth: 0.02), - tailStyle: TailStyle(width: 5, length: 30, lengthUnit: GaugeSizeUnit.logicalPixel, - color: Colors.white, borderWidth: 3, borderColor: Colors.black) - ) - ] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + needleStartWidth: 3, + needleEndWidth: 3, + knobStyle: KnobStyle( + color: Colors.white, + knobRadius: 0.07, + borderColor: Colors.black, + borderWidth: 0.02 + ), + tailStyle: TailStyle( + width: 5, + length: 30, + lengthUnit: GaugeSizeUnit.logicalPixel, + color: Colors.white, + borderWidth: 3, + borderColor: Colors.black + ) + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -283,36 +344,45 @@ The following code shows how to apply the gradient for the tail. {% highlight dart %} -@override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( body: Center( child: SfRadialGauge( - axes: [RadialAxis( - pointers: [ - NeedlePointer( - value: 65, - lengthUnit: GaugeSizeUnit.factor, - needleLength: 0.8, - needleEndWidth: 11, - tailStyle: TailStyle(length: 0.2, width: 11, - gradient:LinearGradient( - colors: [ - Color(0xFFFF6B78), Color(0xFFFF6B78), - Color(0xFFE20A22), Color(0xFFE20A22)], - stops: [0, 0.5, 0.5, 1]), - ), - gradient: LinearGradient( - colors: [ + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 65, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.8, + needleEndWidth: 11, + tailStyle: TailStyle( + length: 0.2, + width: 11, + gradient: LinearGradient( + colors: [ Color(0xFFFF6B78), Color(0xFFFF6B78), - Color(0xFFE20A22), Color(0xFFE20A22)], - stops: [0, 0.5, 0.5, 1]), - needleColor: Color(0xFFF67280), - knobStyle: KnobStyle( - knobRadius: 0.08, - sizeUnit: GaugeSizeUnit.factor, - color: Colors.black)), - ] + Color(0xFFE20A22), Color(0xFFE20A22) + ], + stops: [0, 0.5, 0.5, 1] + ), + ), + gradient: LinearGradient( + colors: [ + Color(0xFFFF6B78), Color(0xFFFF6B78), + Color(0xFFE20A22), Color(0xFFE20A22) + ], + stops: [0, 0.5, 0.5, 1] + ), + needleColor: Color(0xFFF67280), + knobStyle: KnobStyle( + knobRadius: 0.08, + sizeUnit: GaugeSizeUnit.factor, + color: Colors.black + ) + ), + ] ), ] ), diff --git a/Flutter/radial-gauge/overview.md b/Flutter/radial-gauge/overview.md index aa6440045..da638511b 100644 --- a/Flutter/radial-gauge/overview.md +++ b/Flutter/radial-gauge/overview.md @@ -9,17 +9,17 @@ documentation: ug # Flutter Radial Gauge (SfRadialGauge) Overview -Syncfusion® Flutter Radial Gauge is a data visualization widget, which is written in dart, to create modern, interactive, and animated gauge that is used to craft high-quality mobile app user interfaces using Flutter. +Syncfusion® Flutter Radial Gauge is a powerful data visualization widget in Dart. It enables you to create modern, interactive, and animated gauges that enhance the user interface of high-quality mobile application built with Flutter. ![Overview flutter radial gauge](images/overview/gauge_overview.png) ## Key Features -* **Axes** - The radial gauge axis is a circular arc in which a set of values are displayed along a linear or custom scale based on the design requirements. Axis elements such as labels, ticks, and axis line can be easily customized with built-in properties -* **Ranges** - Gauge range is a visual element that helps to quickly visualize a value where it falls on the axis. The text can be easily annotated in range to improve the readability. +* **Axes** - The radial gauge axis is a circular arc that displays a set of values along a linear or custom scale based on your design requirements. Axis elements such as labels, ticks, and axis lines can be easily customized with built-in properties to match your application's theme. +* **Ranges** - Gauge ranges are visual elements that help users quickly visualize where a value falls on the axis. Text can be easily annotated within ranges to improve readability and provide additional context to your data visualization. * **Pointers** - Pointer is used to indicate values on an axis. Radial gauge has four types of pointers: needle pointer, marker pointer, range pointer, and widget pointer. All the pointers can be customized as needed. -* **Pointer Animation** - Animates the pointer in a visually appealing way when the pointer moves from one value to another. Gauge supports various pointer animations. -* **Pointer interaction** - Radial gauge provides an option to drag a pointer from one value to another. It is used to change the value at run time. -* **Annotations** - Adds multiple widgets such as text and image as an annotation at a specific point of interest in the radial gauge. +* **Pointer Animation** - The Radial Gauge provides visually appealing animations when pointers move from one value to another. Various animation types and customization options are available to create engaging user experiences. +* **Pointer interaction** - Interactive functionality allows users to drag pointers from one value to another, enabling real-time value changes and user input directly through the gauge interface. +* **Annotations** - Add multiple widgets such as text, images, or custom Flutter widgets as annotations at specific points of interest in the radial gauge to provide additional context or information. You can get the sample in the following link: [`Flutter Gauges`](https://github.com/syncfusion/flutter-examples). \ No newline at end of file diff --git a/Flutter/radial-gauge/pointers.md b/Flutter/radial-gauge/pointers.md index 132ddb520..c5521de54 100644 --- a/Flutter/radial-gauge/pointers.md +++ b/Flutter/radial-gauge/pointers.md @@ -9,37 +9,41 @@ documentation: ug # Pointers in Flutter Radial Gauge (SfRadialGauge) - Pointer is used to indicate values on an axis. The radial gauge control has four types of pointers: + Pointer is used to indicate values on an axis. The Syncfusion Flutter Radial Gauge control offers four types of pointers: [`Marker pointer`](https://help.syncfusion.com/flutter/radial-gauge/marker-pointer) [`Needle pointer`](https://help.syncfusion.com/flutter/radial-gauge/needle-pointer) [`Range pointer`](https://help.syncfusion.com/flutter/radial-gauge/range-pointer) [`Widget pointer`](https://help.syncfusion.com/flutter/radial-gauge/widget-pointer) -All the pointers can be customized as needed. You can add multiple pointers to the gauge to point multiple values on the same scale. The value of the pointer is set using the [`value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/value.html) property. +All pointers can be customized to meet your specific requirement. You can add multiple pointers to the gauge to indicate multiple values on the same scale. The value of the pointer is set using the [`value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/value.html) property. ![multiple pointers](images/pointers/pointers.png) ## Multiple pointers -In addition to the default pointer, you can add n number of pointers to an axis by adding in the [`pointers`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/pointers.html) property. +In addition to the default pointer, you can add any number of pointers to an axis by adding then to the [`pointers`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/pointers.html) collection. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [RangePointer(value: 30, ), - MarkerPointer(value: 70), - NeedlePointer(value: 60)] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer(value: 30), + MarkerPointer(value: 70), + NeedlePointer(value: 60) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -47,29 +51,38 @@ Widget build(BuildContext context) { ## Pointer Dragging -Pointers can be dragged over the scale value. It can be achieved by clicking and dragging the pointer. To enable or disable the pointer drag, use the [`enableDragging`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/enableDragging.html) property. +Pointers can be dragged over the scale to change their values interactively. This can be achieved by clicking and dragging the pointer. To enable or disable pointer dragging, use the [`enableDragging`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/enableDragging.html) property. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - axisLineStyle: AxisLineStyle(thickness: 30, color: Colors.lightBlueAccent), - showTicks: false, - pointers: [ - MarkerPointer(value: 30, enableDragging: true, - markerWidth: 30, markerHeight: 30, markerOffset: -15, - color: Colors.indigo) - ] - )], - ) - ), - ); - } - + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 30, + color: Colors.lightBlueAccent + ), + showTicks: false, + pointers: [ + MarkerPointer( + value: 30, + enableDragging: true, + markerWidth: 30, + markerHeight: 30, + markerOffset: -15, + color: Colors.indigo + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -77,41 +90,49 @@ Widget build(BuildContext context) { ## Event -[`onValueChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/onValueChangeStart.html) - Occurs whenever the pointer starts to drag. +[`onValueChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/onValueChangeStart.html) - Occurs when the pointer dragging begins. -[`onValueChanging`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/onValueChanging.html) - Occurs before the current drag value gets updated as pointer value. The [`cancel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/ValueChangingArgs/cancel.html) argument of [`ValueChangingArgs`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/ValueChangingArgs-class.html) allows to restrict the update of current drag value as pointer value. +[`onValueChanging`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/onValueChanging.html) - Occurs before the current drag value is updated as the pointer value. The [`cancel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/ValueChangingArgs/cancel.html) argument of [`ValueChangingArgs`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/ValueChangingArgs-class.html) allows you to prevent the current drag value from being applied to the pointer. -[`onValueChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/onValueChanged.html) - Occurs whenever the pointer value is changed while dragging. +[`onValueChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/onValueChanged.html) - Occurs whenever the pointer value changes during dragging. -[`onValueChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/onValueChangeEnd.html) - Occurs once the dragging of the pointer gets completed. +[`onValueChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/onValueChangeEnd.html) - Occurs when the pointer dragging is completed. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [ RangePointer(value: 30, + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 30, enableDragging: true, onValueChanging: onValueChanging, - onValueChanged: onvalueChanged)] - )], - ) - ), - ); - } - -void onValueChanging(ValueChangingArgs args){ - if(args.value > 60){ - args.cancel = true; + onValueChanged: onValueChanged + ) + ] + ) + ], + ) + ), + ); } -} -void onvalueChanged(double value){ + void onValueChanging(ValueChangingArgs args) { + // Restrict the pointer from moving beyond value 60 + if (args.value > 60) { + args.cancel = true; + } + } -} + void onValueChanged(double value) { + // Handle the value change + print('Pointer value changed to: $value'); + } {% endhighlight %} diff --git a/Flutter/radial-gauge/radial-gauge-title.md b/Flutter/radial-gauge/radial-gauge-title.md index 3ed177c91..e7da7b0f4 100644 --- a/Flutter/radial-gauge/radial-gauge-title.md +++ b/Flutter/radial-gauge/radial-gauge-title.md @@ -9,41 +9,50 @@ documentation: ug # Title in Flutter Radial Gauge (SfRadialGauge) -You can define and customize the gauge title using the [`title`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/title.html) property of [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/text.html) property of [`GaugeTitle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle-class.html) is used to set text to the title. +You can define and customize the gauge title using the [`title`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/title.html) property of [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/text.html) property of [`GaugeTitle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle-class.html) is used to set text content of the title. The following properties are used to customize the appearance of title, -* [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/backgroundColor.html) - Changes the background color. +* [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/backgroundColor.html) - Changes the background color of the title. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/borderWidth.html) – Changes the border width. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/borderWidth.html) – Changes the border width of the title.. -* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/borderColor.html) – Changes the border color. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/borderColor.html) – Changes the border color of the title. * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/textStyle.html) - Changes the text color, size, font family, fontStyle, and font weight. ## Text Alignment -You can align the title text content horizontally to the near, center, or far to the gauge using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/alignment.html) property of[`title`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle-class.html). +You can align the title text content horizontally to the near(left), center, or far(right) position relative to the gauge using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/alignment.html) property of[`title`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle-class.html). {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - title: GaugeTitle(text: 'SfRadialGauge', - backgroundColor: Colors.lightBlueAccent, - textStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic, - color: Colors.black, fontFamily: 'Times'), - borderColor: Colors.indigo, borderWidth: 3, - alignment: GaugeAlignment.near), - axes: [RadialAxis()],) - ), - ); -} - + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + title: GaugeTitle( + text: 'SfRadialGauge', + backgroundColor: Colors.lightBlueAccent, + textStyle: TextStyle( + fontSize: 15, + fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic, + color: Colors.black, + fontFamily: 'Times' + ), + borderColor: Colors.indigo, + borderWidth: 3, + alignment: GaugeAlignment.near + ), + axes: [ + RadialAxis() + ], + ) + ), + ); + } {% endhighlight %} diff --git a/Flutter/radial-gauge/range-pointer.md b/Flutter/radial-gauge/range-pointer.md index 982522ef6..409d1589b 100644 --- a/Flutter/radial-gauge/range-pointer.md +++ b/Flutter/radial-gauge/range-pointer.md @@ -13,18 +13,22 @@ A range pointer is an accenting line or shaded background range that can be plac {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [RangePointer(value: 30)] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer(value: 30) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -34,29 +38,35 @@ The following properties are used to customize the range pointer: * [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/color.html) – Customizes the color of range pointer. -* [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) - Specifies the width of pointer either in logical pixels or factor. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) - Specifies the width of the pointer either in logical pixels or factor. * [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) – Specifies whether the [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) and the [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) are defined in logical pixels or factor. -The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) of the pointer can be specified either in logical pixel or factor. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is specified as logicalPixel, then the range will be rendered based on the provided pixel value. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html)is set as factor, the provided factor value will be multiplied with axis radius. For example, if the width is set as 0.1, then 10% of axis radius is considered as range pointer width. +The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) of the pointer can be specified either in logical pixel or factor. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is specified as logicalPixel, then the range will be rendered based on the provided pixel value. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html)is set as factor, the provided factor value will be multiplied with axis radius. For example, if the width is set as 0.1, then 10% of axis radius is considered as the range pointer width. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [RangePointer(value: 30, width: 0.1, - color: Colors.indigo, sizeUnit: GaugeSizeUnit.factor - ) - ] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 30, + width: 0.1, + color: Colors.indigo, + sizeUnit: GaugeSizeUnit.factor + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -66,20 +76,25 @@ Widget build(BuildContext context) { **Dashed range pointer** - The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/dashArray.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) allows rendering the dashed range pointer line. + The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/dashArray.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) allows rendering the range pointer as a dashed line. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( + @override + Widget build(BuildContext context) { + return Scaffold( body: Center( child: SfRadialGauge( - axes: [ - RadialAxis(pointers: [ - RangePointer(value: 60, dashArray: [8, 2]) - ]) - ] + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 60, + dashArray: [8, 2] + ) + ] + ) + ] ), ), ); @@ -92,25 +107,32 @@ Widget build(BuildContext context) { **Gradient support** - The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/gradient.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) allows to specify the smooth color transition to pointer by specifying the different colors based on provided factor value. + The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/gradient.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) allows you to specify a smooth color transition for the pointer by defining different colors based on provided factor values. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( + @override + Widget build(BuildContext context) { + return Scaffold( body: Center( child: SfRadialGauge( - axes:[RadialAxis( - axisLineStyle: AxisLineStyle(thickness: 0.1, - thicknessUnit: GaugeSizeUnit.factor,), - pointers: [RangePointer( - value: 40, width: 0.1, sizeUnit: GaugeSizeUnit.factor, - gradient: const SweepGradient( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 0.1, + thicknessUnit: GaugeSizeUnit.factor, + ), + pointers: [ + RangePointer( + value: 40, + width: 0.1, + sizeUnit: GaugeSizeUnit.factor, + gradient: const SweepGradient( colors: [Color(0xFFCC2B5E), Color(0xFF753A88)], stops: [0.25, 0.75] - ), - )] + ), + ) + ] ), ] ), @@ -124,22 +146,29 @@ Widget build(BuildContext context) { **Corner customization** - The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/cornerStyle.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) specifies the corner type for pointer. The corners can be customized using the bothFlat, bothCurve, startCurve, and endCurve options. The default value of this property is bothFlat. + The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/cornerStyle.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) specifies the corner type for the pointer. The corners can be customized using the bothFlat, bothCurve, startCurve, and endCurve options. The default value of this property is bothFlat. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis(pointers:[RangePointer(value: 30, - cornerStyle: CornerStyle.bothCurve)] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 30, + cornerStyle: CornerStyle.bothCurve + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -147,22 +176,29 @@ Widget build(BuildContext context) { ## Position customization -The range pointer can be moved far or near to the axis line using the [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) property. The [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) can be set either in logical pixel or factor value using its [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html). The [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) property is common for both[`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) and [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) +The range pointer can be moved farther from or closer to the axis line using the [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) property. The [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) can be set either in logical pixel or factor value using its [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html). The [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) property is common for both[`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) and [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - pointers: [RangePointer(value: 30, pointerOffset: 50)] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 30, + pointerOffset: 50 + ) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -171,6 +207,3 @@ Widget build(BuildContext context) { When you set the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) as logical pixel, the pointer will be moved to the provided logical pixel value. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is specified as factor, the factor value will be multiplied with the axis radius. For example, if you set [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) as 0.1, then the pointer offset is considered as 10% of axis radius. - - - diff --git a/Flutter/radial-gauge/ranges.md b/Flutter/radial-gauge/ranges.md index 15b8f2e4a..edcb55bb6 100644 --- a/Flutter/radial-gauge/ranges.md +++ b/Flutter/radial-gauge/ranges.md @@ -9,7 +9,7 @@ documentation: ug # Ranges in Flutter Radial Gauge (SfRadialGauge) -Gauge range is a visual element that helps to quickly visualize where a value falls on the axis. The text can be easily annotated in range to improve the readability. +Gauge ranges are visual elements that help to quickly visualize where a value falls on the axis. Text can be easily annotated in ranges to improve readability. **Setting start and end value** @@ -17,21 +17,22 @@ The start and end values of ranges are set using the [`startValue`](https://pub. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - - child: SfRadialGauge( - axes: [RadialAxis( - ranges: [GaugeRange(startValue: 30, endValue: 65)] - ) - ], - ) - ), - ); - } - + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange(startValue: 30, endValue: 65) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -39,7 +40,7 @@ Widget build(BuildContext context) { ## Range Customization -The following properties are used for the range customization: +The following properties are used for range customization: * [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/color.html) – Specifies the color for the range. @@ -53,21 +54,27 @@ The following properties are used for the range customization: {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - ranges: [GaugeRange(startValue: 30, endValue: 65, - startWidth: 5, endWidth: 20 - )] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange( + startValue: 30, + endValue: 65, + startWidth: 5, + endWidth: 20 ) - ], - ) - ), - ); - } + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -83,25 +90,28 @@ If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/late {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( + @override + Widget build(BuildContext context) { + return Scaffold( body: Center( - child: SfRadialGauge( - axes: [RadialAxis( - ranges: [ - GaugeRange(startValue: 30, - endValue: 65, - gradient: const SweepGradient( - colors: [Color(0xFFBC4E9C), Color(0xFFF80759)], - stops: [0.25, 0.75]), - startWidth: 5, - endWidth: 20 - ) - ] + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange( + startValue: 30, + endValue: 65, + gradient: const SweepGradient( + colors: [Color(0xFFBC4E9C), Color(0xFFF80759)], + stops: [0.25, 0.75] + ), + startWidth: 5, + endWidth: 20 + ) + ] ) - ], - ) + ], + ) ), ); } @@ -121,22 +131,26 @@ The [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/ {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - - child: SfRadialGauge( - axes: [RadialAxis( - ranges: [GaugeRange(startValue: 30, endValue: 65, - rangeOffset: 50, - )] + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange( + startValue: 30, + endValue: 65, + rangeOffset: 50 ) - ], - ) - ), - ); - } + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -144,51 +158,75 @@ Widget build(BuildContext context) { ## Setting range color to axis elements -You can set range color to axis labels and ticks using the [`useRangeColorForAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/useRangeColorForAxis.html) property of axis. +You can apply range color to axis labels and ticks using the [`useRangeColorForAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/useRangeColorForAxis.html) property of the axis. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(showAxisLine: false, - ticksPosition: ElementsPosition.outside, - labelsPosition: ElementsPosition.outside, - startAngle: 270, endAngle: 270, useRangeColorForAxis: true, - interval: 10, - axisLabelStyle:GaugeTextStyle( - fontWeight: FontWeight.w500, - fontSize: 12), - majorTickStyle: MajorTickStyle(length: 0.15, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1), - minorTicksPerInterval: 4, labelOffset: 15, - minorTickStyle: MinorTickStyle(length: 0.04, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1), - ranges: [GaugeRange(startValue: 0, endValue: 35, - color: Color(0xFFF8B195), - sizeUnit: GaugeSizeUnit.factor, - rangeOffset: 0.06, - startWidth: 0.05, endWidth: 0.25), - GaugeRange(startValue: 35, endValue: 70, - rangeOffset: 0.06, - sizeUnit: GaugeSizeUnit.factor, - color: Color(0xFFC06C84), - startWidth: 0.05, endWidth: 0.25), - GaugeRange(startValue: 70, endValue: 100, - rangeOffset: 0.06, - sizeUnit: GaugeSizeUnit.factor, - color: Color(0xFF355C7D), - startWidth: 0.05, endWidth: 0.25),] - )], - ) - ), - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + showAxisLine: false, + ticksPosition: ElementsPosition.outside, + labelsPosition: ElementsPosition.outside, + startAngle: 270, + endAngle: 270, + useRangeColorForAxis: true, + interval: 10, + axisLabelStyle: GaugeTextStyle( + fontWeight: FontWeight.w500, + fontSize: 12 + ), + majorTickStyle: MajorTickStyle( + length: 0.15, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1 + ), + minorTicksPerInterval: 4, + labelOffset: 15, + minorTickStyle: MinorTickStyle( + length: 0.04, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1 + ), + ranges: [ + GaugeRange( + startValue: 0, + endValue: 35, + color: Color(0xFFF8B195), + sizeUnit: GaugeSizeUnit.factor, + rangeOffset: 0.06, + startWidth: 0.05, + endWidth: 0.25 + ), + GaugeRange( + startValue: 35, + endValue: 70, + rangeOffset: 0.06, + sizeUnit: GaugeSizeUnit.factor, + color: Color(0xFFC06C84), + startWidth: 0.05, + endWidth: 0.25 + ), + GaugeRange( + startValue: 70, + endValue: 100, + rangeOffset: 0.06, + sizeUnit: GaugeSizeUnit.factor, + color: Color(0xFF355C7D), + startWidth: 0.05, + endWidth: 0.25 + ), + ] + ) + ], + ) + ), + ); + } {% endhighlight %} @@ -196,43 +234,63 @@ Widget build(BuildContext context) { ## Range label -A text can be displayed on range using the [`label`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/label.html) property. The provided text can be customized using the [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/labelStyle.html) property. +Text can be displayed on a range using the [`label`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/label.html) property. The provided text can be customized using the [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/labelStyle.html) property. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[ - RadialAxis(showLabels: false, showAxisLine: false, showTicks: false, - minimum: 0, maximum: 99, - ranges: [GaugeRange(startValue: 0, endValue: 33, - color: Color(0xFFFE2A25), label: 'Slow', - sizeUnit: GaugeSizeUnit.factor, - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), - startWidth: 0.65, endWidth: 0.65 - ),GaugeRange(startValue: 33, endValue: 66, - color:Color(0xFFFFBA00), label: 'Moderate', - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), - startWidth: 0.65, endWidth: 0.65, sizeUnit: GaugeSizeUnit.factor, - ), - GaugeRange(startValue: 66, endValue: 99, - color:Color(0xFF00AB47), label: 'Fast', - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), - sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.65, endWidth: 0.65, - ), - - ], - pointers: [NeedlePointer(value: 60 - )] - ) - ], - ) - ), - ); - } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + showLabels: false, + showAxisLine: false, + showTicks: false, + minimum: 0, + maximum: 99, + ranges: [ + GaugeRange( + startValue: 0, + endValue: 33, + color: Color(0xFFFE2A25), + label: 'Slow', + sizeUnit: GaugeSizeUnit.factor, + labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), + startWidth: 0.65, + endWidth: 0.65 + ), + GaugeRange( + startValue: 33, + endValue: 66, + color: Color(0xFFFFBA00), + label: 'Moderate', + labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), + startWidth: 0.65, + endWidth: 0.65, + sizeUnit: GaugeSizeUnit.factor + ), + GaugeRange( + startValue: 66, + endValue: 99, + color: Color(0xFF00AB47), + label: 'Fast', + labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.65, + endWidth: 0.65 + ), + ], + pointers: [ + NeedlePointer(value: 60) + ] + ) + ], + ) + ), + ); + } {% endhighlight %} diff --git a/Flutter/radial-gauge/widget-pointer.md b/Flutter/radial-gauge/widget-pointer.md index 43ba6b30d..5c0d1bc9d 100644 --- a/Flutter/radial-gauge/widget-pointer.md +++ b/Flutter/radial-gauge/widget-pointer.md @@ -9,53 +9,65 @@ documentation: ug # Widget Pointer in Flutter Radial Gauge (SfRadialGauge) -[`WidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer-class.html) allows pointing the desired value with any widget in a scale. You can set the desired widget to its [`child`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/child.html) property to annotate the pointer value. +[`WidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer-class.html) allows you to point to a desired value with any Flutter widget in a gauge scale. You can set the desired widget to its [`child`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/child.html) property to annotate the pointer value. {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(pointers: [ - WidgetPointer( - value: 45, - child: Container( - height: 55, - width: 60, - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(15), - border: Border.all( - color: Colors.black, - style: BorderStyle.solid, - width: 1.0)), + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + WidgetPointer( + value: 45, + child: Container( + height: 55, + width: 60, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(15), + border: Border.all( + color: Colors.black, + style: BorderStyle.solid, + width: 1.0 + ) + ), child: Column( children: [ Container( - width: 40.00, - height: 30.00, - decoration: new BoxDecoration( - image: new DecorationImage( + width: 40.00, + height: 30.00, + decoration: BoxDecoration( + image: DecorationImage( image: ExactAssetImage('images/sun.png'), - fit: BoxFit.fitHeight, - ), - )), + fit: BoxFit.fitHeight, + ), + ) + ), Padding( padding: EdgeInsets.fromLTRB(0, 2, 0, 0), child: Container( - child: Text('45°F', - style: TextStyle( - fontWeight: FontWeight.bold, fontSize: 15)), - ), + child: Text( + '45°F', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15 + ) + ), + ) ) ], - ))) - ]) - ], - )), + ) + ) + ) + ] + ) + ], + ) + ), ); } @@ -70,55 +82,66 @@ The widget pointer can be moved near or far from its actual position using the [ When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) to logical pixel, then the widget pointer will be moved based on the logical pixel value. If you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) to factor, then provided factor will be multiplied with the axis radius value, and then the pointer will be moved to corresponding value. The default value of [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) is [`GaugeSizeUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit-class.html). {% highlight dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(pointers: [ - WidgetPointer( - value: 45, - offset: -27, - child: Container( + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + WidgetPointer( + value: 45, + offset: -27, + child: Container( height: 55, width: 60, decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(15), - border: Border.all( - color: Colors.black, - style: BorderStyle.solid, - width: 1.0, - )), + color: Colors.white, + borderRadius: BorderRadius.circular(15), + border: Border.all( + color: Colors.black, + style: BorderStyle.solid, + width: 1.0, + ) + ), child: Column( children: [ Container( - width: 40.00, - height: 30.00, - decoration: new BoxDecoration( - image: new DecorationImage( - image: ExactAssetImage('images/sun.png'), - fit: BoxFit.fitHeight, - ), - )), + width: 40.00, + height: 30.00, + decoration: BoxDecoration( + image: DecorationImage( + image: ExactAssetImage('images/sun.png'), + fit: BoxFit.fitHeight, + ), + ) + ), Padding( padding: EdgeInsets.fromLTRB(0, 2, 0, 0), child: Container( - child: Text('45°F', - style: TextStyle( - fontWeight: FontWeight.bold, fontSize: 15)), - ), + child: Text( + '45°F', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15 + ) + ), + ) ) ], - ))) - ]) - ], - )), + ) + ) + ) + ] + ) + ], + ) + ), ); } {% endhighlight %} ![widget pointer position](images/widget-pointer/widget_pointer_position.png) - From 8f10719ee054e9e4f9aaf5b28cfb80ecd8257a56 Mon Sep 17 00:00:00 2001 From: Hariram4428 Date: Wed, 28 May 2025 15:58:22 +0530 Subject: [PATCH 3/3] FLUT-958981-[feature]: Cleared review suggestions --- Flutter/linear-gauge/accessibility.md | 26 ++-- Flutter/linear-gauge/axis.md | 117 ++++++++-------- Flutter/linear-gauge/bar-pointer.md | 75 +++++----- Flutter/linear-gauge/getting-started.md | 40 +++--- Flutter/linear-gauge/interaction.md | 17 +-- Flutter/linear-gauge/labels.md | 35 ++--- Flutter/linear-gauge/range.md | 45 +++--- Flutter/linear-gauge/shape-marker-pointer.md | 132 ++++++++++-------- Flutter/linear-gauge/widget-marker-pointer.md | 89 ++++++------ Flutter/radial-gauge/axes.md | 30 ++-- 10 files changed, 320 insertions(+), 286 deletions(-) diff --git a/Flutter/linear-gauge/accessibility.md b/Flutter/linear-gauge/accessibility.md index 8ff661ef1..9a8a7fe14 100644 --- a/Flutter/linear-gauge/accessibility.md +++ b/Flutter/linear-gauge/accessibility.md @@ -16,19 +16,19 @@ The [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/la {% tabs %} {% highlight Dart %} -double _value = 50; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Semantics( - label: 'Syncfusion Flutter Linear Gauge', - value: _value.toString(), - child: - SfLinearGauge(markerPointers: [LinearShapePointer(value: _value)]), - ), - ); -} + double _value = 50; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Semantics( + label: 'Syncfusion Flutter Linear Gauge', + value: _value.toString(), + child: + SfLinearGauge(markerPointers: [LinearShapePointer(value: _value)]), + ), + ); + } {% endhighlight %} {% endtabs %} diff --git a/Flutter/linear-gauge/axis.md b/Flutter/linear-gauge/axis.md index fc216c248..eca77a098 100644 --- a/Flutter/linear-gauge/axis.md +++ b/Flutter/linear-gauge/axis.md @@ -44,7 +44,7 @@ The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/g return MaterialApp( home: Scaffold( body: Center( - child: SfLinearGauge(minimum: -50, maximum: 50) + child: SfLinearGauge(minimum: -50, maximum: 50), ), ), ); @@ -73,11 +73,11 @@ The following code sample demonstrates how to customize the [`thickness`](https: return MaterialApp( home: Scaffold( body: Center( - child: SfLinearGauge( - axisTrackStyle: LinearAxisTrackStyle(thickness: 15) - ), + child: SfLinearGauge( + axisTrackStyle: LinearAxisTrackStyle(thickness: 15), ), ), + ), ); } @@ -96,8 +96,9 @@ The code snippet below sets a solid color to the axis track: return MaterialApp( home: Scaffold( body: Center( - child: SfLinearGauge( - axisTrackStyle: LinearAxisTrackStyle(color: Colors.blue)) + child: SfLinearGauge( + axisTrackStyle: LinearAxisTrackStyle(color: Colors.blue), + ), ), ), ); @@ -122,18 +123,18 @@ The following code sample applies a gradient to the axis track. body: Center( child: Container( child: SfLinearGauge( - axisTrackStyle: LinearAxisTrackStyle( - gradient: LinearGradient( - colors: [Colors.purple, Colors.blue], - begin: Alignment.centerLeft, - end: Alignment.centerRight, - stops: [0.1, 0.5], - tileMode: TileMode.clamp - ) - ) + axisTrackStyle: LinearAxisTrackStyle( + gradient: LinearGradient( + colors: [Colors.purple, Colors.blue], + begin: Alignment.centerLeft, + end: Alignment.centerRight, + stops: [0.1, 0.5], + tileMode: TileMode.clamp, + ), ), ), ), + ), ), ); } @@ -150,21 +151,23 @@ The code snippet below sets a border to the axis track: {% highlight dart %} - @override + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: SfLinearGauge( - axisTrackStyle: LinearAxisTrackStyle( - // Sets axis thickness for the better visibility of border - thickness: 15, - // Hides axis axis color for the better visibility of border - color: Colors.transparent, - //Sets the border color - borderColor: Colors.blueGrey, - //Sets the border width - borderWidth: 2)) + axisTrackStyle: LinearAxisTrackStyle( + // Sets axis thickness for the better visibility of border + thickness: 15, + // Hides axis axis color for the better visibility of border + color: Colors.transparent, + //Sets the border color + borderColor: Colors.blueGrey, + //Sets the border width + borderWidth: 2, + ), + ), ), ), ); @@ -185,9 +188,12 @@ The [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest return MaterialApp( home: Scaffold( body: Center( - child: SfLinearGauge( - axisTrackStyle: LinearAxisTrackStyle( - thickness: 20, edgeStyle: LinearEdgeStyle.bothCurve)) + child: SfLinearGauge( + axisTrackStyle: LinearAxisTrackStyle( + thickness: 20, + edgeStyle: LinearEdgeStyle.bothCurve + ), + ), ), ), ); @@ -270,33 +276,33 @@ Linear gauge allows you to display a set of values along with a custom axis base {% highlight dart %} -double pointerValue = 50.0; - -// To return the label value based on interval -double _calculateLabelValue(num value) { - if (value == 0) { - return 0; - } else if (value == 1) { - return 2; - } else if (value == 2) { - return 5; - } else if (value == 3) { - return 10; - } else if (value == 4) { - return 20; - } else if (value == 5) { - return 30; - } else if (value == 6) { - return 50; - } else if (value == 7) { - return 100; - } else { - return 150; + double pointerValue = 50.0; + + // To return the label value based on interval + double _calculateLabelValue(num value) { + if (value == 0) { + return 0; + } else if (value == 1) { + return 2; + } else if (value == 2) { + return 5; + } else if (value == 3) { + return 10; + } else if (value == 4) { + return 20; + } else if (value == 5) { + return 30; + } else if (value == 6) { + return 50; + } else if (value == 7) { + return 100; + } else { + return 150; + } } -} -Widget _getLinearGauge() { - return Container( + Widget _getLinearGauge() { + return Container( child: SfLinearGauge( minimum: 0, maximum: 150.0, @@ -352,8 +358,9 @@ Widget _getLinearGauge() { height: 16) ], ), - margin: EdgeInsets.all(10)); -} + margin: EdgeInsets.all(10) + ); + } {% endhighlight %} diff --git a/Flutter/linear-gauge/bar-pointer.md b/Flutter/linear-gauge/bar-pointer.md index ccfeef021..067ea680f 100644 --- a/Flutter/linear-gauge/bar-pointer.md +++ b/Flutter/linear-gauge/bar-pointer.md @@ -54,7 +54,7 @@ The thickness can be changed by the [`thickness`](https://pub.dev/documentation/ barPointers: [ LinearBarPointer( value: 50, - thickness: 10 + thickness: 10, ) ], ), @@ -193,7 +193,7 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu {% highlight dart %} - @override + @override Widget build(BuildContext context) { return MaterialApp( color: Colors.white, @@ -202,16 +202,16 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu child: SfLinearGauge( barPointers: [ LinearBarPointer( - value: 100, - //Apply radial gradient - shaderCallback: (bounds) => RadialGradient( - radius: 30, - colors: [ - Colors.redAccent, - Colors.blueAccent, - Colors.greenAccent, - ], - ).createShader(bounds)) + value: 100, + //Apply radial gradient + shaderCallback: (bounds) => RadialGradient( + radius: 30, + colors: [ + Colors.redAccent, + Colors.blueAccent, + Colors.greenAccent, + ], + ).createShader(bounds)) ], ), ), @@ -242,10 +242,10 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu thickness: 10, //Apply linear gradient shaderCallback: (bounds) => LinearGradient( - begin: Alignment.centerLeft, - end: Alignment.centerRight, - colors: [Colors.redAccent, Colors.blueAccent]) - .createShader(bounds) + begin: Alignment.centerLeft, + end: Alignment.centerRight, + colors: [Colors.redAccent, Colors.blueAccent] + ).createShader(bounds) ), ], ), @@ -264,7 +264,7 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu {% highlight dart %} - @override + @override Widget build(BuildContext context) { return MaterialApp( color: Colors.white, @@ -273,20 +273,20 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu child: SfLinearGauge( barPointers: [ LinearBarPointer( - value: 100, - thickness: 10, - //Apply linear gradient - shaderCallback: (bounds) => SweepGradient( - startAngle: 0.1, - endAngle: 0.2, - colors: [ - Colors.blueAccent, - Colors.greenAccent, - Colors.orangeAccent, - ], - tileMode: TileMode.mirror, - center: Alignment.bottomRight, - ).createShader(bounds)) + value: 100, + thickness: 10, + //Apply linear gradient + shaderCallback: (bounds) => SweepGradient( + startAngle: 0.1, + endAngle: 0.2, + colors: [ + Colors.blueAccent, + Colors.greenAccent, + Colors.orangeAccent, + ], + tileMode: TileMode.mirror, + center: Alignment.bottomRight, + ).createShader(bounds)) ], ), ), @@ -313,10 +313,11 @@ The border can be customized with [`borderWidth`](https://pub.dev/documentation/ child: SfLinearGauge( barPointers: [ LinearBarPointer( - value: 80, - thickness: 10, - borderWidth: 3, - borderColor: Colors.cyanAccent) + value: 80, + thickness: 10, + borderWidth: 3, + borderColor: Colors.cyanAccent, + ), ], ), ), @@ -341,7 +342,7 @@ You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documenta home: Scaffold( body: Center( child: SfLinearGauge( - barPointers: [ + barPointers: [ LinearBarPointer( value: 20, position: LinearElementPosition.outside @@ -353,7 +354,7 @@ You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documenta position: LinearElementPosition.outside ), ], - ), + ), ), ), ); diff --git a/Flutter/linear-gauge/getting-started.md b/Flutter/linear-gauge/getting-started.md index 76419f8bb..4d3150c49 100644 --- a/Flutter/linear-gauge/getting-started.md +++ b/Flutter/linear-gauge/getting-started.md @@ -60,16 +60,16 @@ After the package has been imported, initialize the [`SfLinearGauge`](https://pu {% highlight dart %} - @override - Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child:SfLinearGauge() - ) - ) - ); - } + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child:SfLinearGauge() + ) + ) + ); + } {% endhighlight %} @@ -81,16 +81,16 @@ The Linear Gauge axis is a scale where a set of values can be plotted. You can s {% highlight dart %} - @override - Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfLinearGauge(minimum: 100, maximum: 200) - ) - ) - ); - } + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge(minimum: 100, maximum: 200) + ) + ) + ); + } {% endhighlight %} diff --git a/Flutter/linear-gauge/interaction.md b/Flutter/linear-gauge/interaction.md index cb0bec32d..993cbcfea 100644 --- a/Flutter/linear-gauge/interaction.md +++ b/Flutter/linear-gauge/interaction.md @@ -29,14 +29,15 @@ The following code sample demonstrates how to update a simple marker pointer val child: SfLinearGauge( markerPointers: [ LinearShapePointer( - value: shapePointerValue, - //Changes the value of shape pointer based on interaction - onChanged: (value) { - setState(() { - shapePointerValue = value; - }); - }, - color: Colors.blue[800]), + value: shapePointerValue, + //Changes the value of shape pointer based on interaction + onChanged: (value) { + setState(() { + shapePointerValue = value; + }); + }, + color: Colors.blue[800], + ), ], ), ), diff --git a/Flutter/linear-gauge/labels.md b/Flutter/linear-gauge/labels.md index f72dc4787..4a11548c2 100644 --- a/Flutter/linear-gauge/labels.md +++ b/Flutter/linear-gauge/labels.md @@ -54,15 +54,16 @@ The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/lates {% highlight dart %} -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfLinearGauge(showLabels: false)) - ) + body: Center( + child: SfLinearGauge(showLabels: false), + ), + ), ); -} + } {% endhighlight %} @@ -74,18 +75,18 @@ The [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/ {% highlight dart %} -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfLinearGauge( - interval: 20 - ) - ) - ) + body: Center( + child: SfLinearGauge( + interval: 20, + ), + ), + ), ); -} + } {% endhighlight %} diff --git a/Flutter/linear-gauge/range.md b/Flutter/linear-gauge/range.md index 11d35978f..3214ebec5 100644 --- a/Flutter/linear-gauge/range.md +++ b/Flutter/linear-gauge/range.md @@ -13,7 +13,7 @@ A range is a visual element that helps you quickly visualize where a range falls {% highlight dart %} -@override + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( @@ -152,8 +152,8 @@ The below code snippet demonstrates applying a linear gradient to the range. shaderCallback: (bounds) => LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, - colors: [Colors.greenAccent, Colors.blueAccent]) - .createShader(bounds) + colors: [Colors.greenAccent, Colors.blueAccent], + ).createShader(bounds) ) ], ), @@ -221,7 +221,8 @@ It is possible to position the ranges `inside`, `cross`, and `outside` the axis. //Here the range is positioned inside the axis. ranges: [ LinearGaugeRange(position: LinearElementPosition.inside) - ]), + ], + ), ), ), ); @@ -245,20 +246,23 @@ You can set range color to axis elements using the [`useRangeColorForAxis`](http axisTrackStyle: LinearAxisTrackStyle(thickness: 1), ranges: [ LinearGaugeRange( - startValue: 0, - endValue: 33, - position: LinearElementPosition.outside, - color: Color(0xffF45656)), + startValue: 0, + endValue: 33, + position: LinearElementPosition.outside, + color: Color(0xffF45656), + ), LinearGaugeRange( - startValue: 33, - endValue: 66, - position: LinearElementPosition.outside, - color: Color(0xffFFC93E)), + startValue: 33, + endValue: 66, + position: LinearElementPosition.outside, + color: Color(0xffFFC93E), + ), LinearGaugeRange( - startValue: 66, - endValue: 100, - position: LinearElementPosition.outside, - color: Color(0xff0DC9AB)), + startValue: 66, + endValue: 100, + position: LinearElementPosition.outside, + color: Color(0xff0DC9AB), + ), ], ) ) @@ -282,13 +286,16 @@ You can add multiple ranges for an axis. The below code example demonstrates add ranges: [ //First range. LinearGaugeRange( - startValue: 0, endValue: 50, color: Colors.blueAccent), + startValue: 0, endValue: 50, color: Colors.blueAccent, + ), //Second range. LinearGaugeRange( - startValue: 50, endValue: 70, color: Colors.redAccent), + startValue: 50, endValue: 70, color: Colors.redAccent, + ), //Third range. LinearGaugeRange( - startValue: 70, endValue: 100, color: Colors.greenAccent) + startValue: 70, endValue: 100, color: Colors.greenAccent, + ), ], ), ), diff --git a/Flutter/linear-gauge/shape-marker-pointer.md b/Flutter/linear-gauge/shape-marker-pointer.md index e0baabfe5..595a1020a 100644 --- a/Flutter/linear-gauge/shape-marker-pointer.md +++ b/Flutter/linear-gauge/shape-marker-pointer.md @@ -21,7 +21,7 @@ The following is the default appearance of default shape pointer. {% highlight dart %} - @override + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( @@ -98,10 +98,13 @@ The border can be customized by the [`borderColor`](https://pub.dev/documentatio color: Colors.white, home: Scaffold( body: Center( - child: SfLinearGauge(markerPointers: [ - LinearShapePointer( - value: 50, borderColor: Colors.redAccent, borderWidth: 2) - ]), + child: SfLinearGauge( + markerPointers: [ + LinearShapePointer( + value: 50, borderColor: Colors.redAccent, borderWidth: 2, + ) + ], + ), ), ), ); @@ -130,7 +133,8 @@ The elevation can be customized by the [`elevation`](https://pub.dev/documentati value: 50, shapeType: LinearShapePointerType.circle, elevation: 5, - elevationColor: Colors.blueGrey) + elevationColor: Colors.blueGrey, + ), ]), ), ), @@ -153,10 +157,14 @@ The marker pointer alignment can be changed by the [`markerAlignment`](https://p return MaterialApp( home: Scaffold( body: Center( - child: SfLinearGauge(axisTrackExtent: 30, markerPointers: [ - LinearShapePointer( - value: 0, markerAlignment: LinearMarkerAlignment.start) - ]), + child: SfLinearGauge( + axisTrackExtent: 30, + markerPointers: [ + LinearShapePointer( + value: 0, markerAlignment: LinearMarkerAlignment.start, + ), + ], + ), ), ), ); @@ -177,12 +185,15 @@ By default, the shape pointer is positioned `outside` the axis. This position ca return MaterialApp( home: Scaffold( body: Center( - child: SfLinearGauge(markerPointers: [ - LinearShapePointer( - value: 55, - shapeType: LinearShapePointerType.triangle, - position: LinearElementPosition.inside) - ]), + child: SfLinearGauge( + markerPointers: [ + LinearShapePointer( + value: 55, + shapeType: LinearShapePointerType.triangle, + position: LinearElementPosition.inside, + ), + ] + ), ), ), ); @@ -203,13 +214,16 @@ In addition to position the shape pointer, it is also possible to change the off return MaterialApp( home: Scaffold( body: Center( - child: SfLinearGauge(markerPointers: [ - LinearShapePointer( - value: 50, - offset: 25, - shapeType: LinearShapePointerType.triangle, - position: LinearElementPosition.inside) - ]), + child: SfLinearGauge( + markerPointers: [ + LinearShapePointer( + value: 50, + offset: 25, + shapeType: LinearShapePointerType.triangle, + position: LinearElementPosition.inside, + ), + ], + ), ), ), ); @@ -274,42 +288,42 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point {% highlight dart %} -double _firstPointer = 30; -double _secondPointer = 70; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfLinearGauge( - markerPointers: [ - LinearShapePointer( - value: _firstPointer, - height: 25, - width: 25, - shapeType: LinearShapePointerType.invertedTriangle, - dragBehavior: LinearMarkerDragBehavior.constrained, - onChanged: (double newValue) { - setState(() { - _firstPointer = newValue; - }); - }, - ), - LinearShapePointer( - value: _secondPointer, - height: 25, - width: 25, - shapeType: LinearShapePointerType.invertedTriangle, - dragBehavior: LinearMarkerDragBehavior.constrained, - onChanged: (double newValue) { - setState(() { - _secondPointer = newValue; - }); - }, - ), - ], - ), - ); -} + double _firstPointer = 30; + double _secondPointer = 70; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfLinearGauge( + markerPointers: [ + LinearShapePointer( + value: _firstPointer, + height: 25, + width: 25, + shapeType: LinearShapePointerType.invertedTriangle, + dragBehavior: LinearMarkerDragBehavior.constrained, + onChanged: (double newValue) { + setState(() { + _firstPointer = newValue; + }); + }, + ), + LinearShapePointer( + value: _secondPointer, + height: 25, + width: 25, + shapeType: LinearShapePointerType.invertedTriangle, + dragBehavior: LinearMarkerDragBehavior.constrained, + onChanged: (double newValue) { + setState(() { + _secondPointer = newValue; + }); + }, + ), + ], + ), + ); + } {% endhighlight %} diff --git a/Flutter/linear-gauge/widget-marker-pointer.md b/Flutter/linear-gauge/widget-marker-pointer.md index 69b338825..dff5823fb 100644 --- a/Flutter/linear-gauge/widget-marker-pointer.md +++ b/Flutter/linear-gauge/widget-marker-pointer.md @@ -44,13 +44,18 @@ The widget marker pointer's alignment can be changed by the [`markerAlignment`]( return MaterialApp( home: Scaffold( body: Center( - child: SfLinearGauge(axisTrackExtent: 30, markerPointers: [ - LinearWidgetPointer( - value: 0, - markerAlignment: LinearMarkerAlignment.center, - child: - Container(height: 14, width: 14, color: Colors.redAccent)), - ]), + child: SfLinearGauge( + axisTrackExtent: 30, + markerPointers: [ + LinearWidgetPointer( + value: 0, + markerAlignment: LinearMarkerAlignment.center, + child: Container( + height: 14, width: 14, color: Colors.redAccent, + ), + ), + ], + ), ), ), ); @@ -66,7 +71,7 @@ By default, the widget pointer is positioned `outside` the axis. This position c {% highlight dart %} - @override + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( @@ -172,40 +177,40 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point {% highlight dart %} -double _firstPointer = 30; -double _secondPointer = 70; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfLinearGauge( - markerPointers: [ - LinearWidgetPointer( - value: _firstPointer, - dragBehavior: LinearMarkerDragBehavior.constrained, - onChanged: (double newValue) { - setState(() { - _firstPointer = newValue; - }); - }, - position: LinearElementPosition.outside, - child: Icon(Icons.location_pin, color: Colors.blue, size: 30), - ), - LinearWidgetPointer( - value: _secondPointer, - position: LinearElementPosition.outside, - dragBehavior: LinearMarkerDragBehavior.constrained, - onChanged: (double newValue) { - setState(() { - _secondPointer = newValue; - }); - }, - child: Icon(Icons.location_pin, color: Colors.red, size: 30), - ), - ], - ), - ); -} + double _firstPointer = 30; + double _secondPointer = 70; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfLinearGauge( + markerPointers: [ + LinearWidgetPointer( + value: _firstPointer, + dragBehavior: LinearMarkerDragBehavior.constrained, + onChanged: (double newValue) { + setState(() { + _firstPointer = newValue; + }); + }, + position: LinearElementPosition.outside, + child: Icon(Icons.location_pin, color: Colors.blue, size: 30), + ), + LinearWidgetPointer( + value: _secondPointer, + position: LinearElementPosition.outside, + dragBehavior: LinearMarkerDragBehavior.constrained, + onChanged: (double newValue) { + setState(() { + _secondPointer = newValue; + }); + }, + child: Icon(Icons.location_pin, color: Colors.red, size: 30), + ), + ], + ), + ); + } {% endhighlight %} diff --git a/Flutter/radial-gauge/axes.md b/Flutter/radial-gauge/axes.md index 514cf4b9e..60d240ff0 100644 --- a/Flutter/radial-gauge/axes.md +++ b/Flutter/radial-gauge/axes.md @@ -864,22 +864,20 @@ The [`Radial Gauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/lat body: Center( child: SfRadialGauge( axes: [ RadialAxis(minimum: 0 , maximum: 100, interval: 10, - ticksPosition: ElementsPosition.outside, - labelsPosition: ElementsPosition.outside, - - minorTicksPerInterval: 5, - radiusFactor: 0.9, labelOffset: 15, - minorTickStyle: MinorTickStyle(thickness: 1.5, - color: Color.fromARGB(255, 143, 20, 2), - length: 0.07, lengthUnit: GaugeSizeUnit.factor), - majorTickStyle: MinorTickStyle(thickness: 1.5, - color: Color.fromARGB(255, 143, 20, 2), - length: 0.15, lengthUnit: GaugeSizeUnit.factor,), - axisLineStyle: AxisLineStyle( thickness: 3, - color: Color.fromARGB(255, 143, 20, 2), ), - axisLabelStyle: GaugeTextStyle(fontSize: 12, - color:Color.fromARGB(255, 143, 20, 2),),), - + ticksPosition: ElementsPosition.outside, + labelsPosition: ElementsPosition.outside, + minorTicksPerInterval: 5, + radiusFactor: 0.9, labelOffset: 15, + minorTickStyle: MinorTickStyle(thickness: 1.5, + color: Color.fromARGB(255, 143, 20, 2), + length: 0.07, lengthUnit: GaugeSizeUnit.factor), + majorTickStyle: MinorTickStyle(thickness: 1.5, + color: Color.fromARGB(255, 143, 20, 2), + length: 0.15, lengthUnit: GaugeSizeUnit.factor,), + axisLineStyle: AxisLineStyle( thickness: 3, + color: Color.fromARGB(255, 143, 20, 2), ), + axisLabelStyle: GaugeTextStyle(fontSize: 12, + color:Color.fromARGB(255, 143, 20, 2),),), RadialAxis(minimum: 0 , maximum: 60, interval: 10, radiusFactor: 0.6, labelOffset: 15, isInversed: true, minorTicksPerInterval: 5,