FLUT-1020062: Enhanced Flutter Linear Gauge UG documentation- #1509

Flutter/linear-gauge/accessibility.md

@@ -1,8 +1,8 @@
 ---
 layout: post
-title:  Accessibility in Flutter Linear Gauge widget | Syncfusion
+title: Accessibility in Flutter Linear Gauge widget | Syncfusion
 description: Learn here all about the accessibility support in Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and how to customize it.
-platform: Flutter
+platform: flutter
 control: SfLinearGauge
 documentation: ug
 ---
@@ -14,21 +14,33 @@ documentation: ug
 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 %}
+{% highlight dart %}
 
-  double _value = 50;
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatelessWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
 
   @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;
+    return MaterialApp(
+      title: 'Linear Gauge Demo',
+      home: Scaffold(
+        body: Semantics(
+          label: 'Syncfusion Flutter Linear Gauge',
+          value: value.toString(),
+          child: SfLinearGauge(
+            markerPointers: [LinearShapePointer(value: value)],
+          ),
+        ),
       ),
     );
   }
+}
 
 {% endhighlight %}
 {% endtabs %}

Flutter/linear-gauge/animation.md

@@ -2,7 +2,7 @@
 layout: post
 title: Animation in Flutter Linear Gauge widget | Syncfusion
 description: Learn here all about adding and customizing animation of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
-platform: Flutter
+platform: flutter
 control: SfLinearGauge
 documentation: ug
 ---
@@ -15,8 +15,17 @@ All Linear Gauge elements such as axis (along with ticks and labels), range, bar
 
 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. 
 
+{% tabs %}
 {% highlight dart %}
 
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatelessWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
+
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
@@ -30,17 +39,28 @@ The [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/late
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Animate axis in linear gauge](images/animation/animation-axis-range/animation-axis.gif)
 
 ## 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) 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. 
 
+{% tabs %}
 {% highlight dart %}
 
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatelessWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
+
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
@@ -54,10 +74,12 @@ The [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/lat
       ),
     );
   }
+}
 
-  {% endhighlight %}
+{% endhighlight %}
+{% endtabs %}
 
-  ![Animate range in linear gauge](images/animation/animation-axis-range/animation-range.gif)
+![Animate range in linear gauge](images/animation/animation-axis-range/animation-range.gif)
 
 ## Pointer animation
 
@@ -83,7 +105,16 @@ The [`animationType`](https://pub.dev/documentation/syncfusion_flutter_gauges/la
 
 The following code example demonstrates how to customize the animation for bar pointer:
 
-{% highlight dart %} 
+{% tabs %}
+{% highlight dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatelessWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -103,13 +134,52 @@ The following code example demonstrates how to customize the animation for bar p
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Animate marker pointers (Shape and Widget Pointers)
 
 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
 
+The following code example demonstrates how to animate a shape marker pointer with `bounceOut` animation type:
+
+{% tabs %}
+{% highlight dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatelessWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: Center(
+          child: SfLinearGauge(
+            markerPointers: [
+              LinearShapePointer(
+                value: 60,
+                animationType: LinearAnimationType.bounceOut,
+                animationDuration: 2000,
+                enableAnimation: true,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ![Animate marker pointer in linear gauge](images/animation/shape-pointer/bounceout.gif)