Skip to content

FLUT-958981 - [Feature] Cleared grammatical issues for linear and radial gauges #1216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 28, 2025
Merged

FLUT-958981 - [Feature] Cleared grammatical issues for linear and radial gauges #1216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7189eda
FLUT-958981-[feature]: Cleared grammatical errors for linear gauges
Hariram-SF4428 May 21, 2025
dbddb70
FLUT-958981-[feature]: Cleared grammatical errors for radial gauge pages
Hariram-SF4428 May 22, 2025
8f10719
FLUT-958981-[feature]: Cleared review suggestions
Hariram-SF4428 May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions Flutter/linear-gauge/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,31 @@ 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 %}

double _value = 50;
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)]),
),
);
}
@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 %}

## 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)
Expand All @@ -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.
16 changes: 8 additions & 8 deletions Flutter/linear-gauge/animation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand All @@ -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 %}

Expand All @@ -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`
Expand All @@ -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 %}

Expand All @@ -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

Expand Down
Loading