diff --git a/Flutter/linear-gauge/accessibility.md b/Flutter/linear-gauge/accessibility.md
index 9a8a7fe14..18f9a04ea 100644
--- a/Flutter/linear-gauge/accessibility.md
+++ b/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 %}
diff --git a/Flutter/linear-gauge/animation.md b/Flutter/linear-gauge/animation.md
index 8bd99cdc5..5cfc03de0 100644
--- a/Flutter/linear-gauge/animation.md
+++ b/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,8 +39,10 @@ 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)
 
@@ -39,8 +50,17 @@ The [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/late
 
 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,8 +134,10 @@ The following code example demonstrates how to customize the animation for bar p
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Animate marker pointers (Shape and Widget Pointers)
 
@@ -112,4 +145,41 @@ Both the shape and widget marker pointers have the same set of properties and be
 
 ### 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)
diff --git a/Flutter/linear-gauge/axis.md b/Flutter/linear-gauge/axis.md
index eca77a098..a2ee5d3ef 100644
--- a/Flutter/linear-gauge/axis.md
+++ b/Flutter/linear-gauge/axis.md
@@ -2,9 +2,8 @@
 layout: post
 title: Axis in Flutter Linear Gauge widget | Syncfusion
 description: Learn here all about adding and customizing Axis of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
-platform: Flutter
+platform: flutter
 control: SfLinearGauge
-
 documentation: ug
 ---
 
@@ -14,10 +13,19 @@ The Linear Gauge axis is a scale where a set of values can be plotted. An axis c
 
 ## Default axis
 
-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:
+By default, the axis will have a [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) value of 0 and a [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) value of 100. Without any customization, the default axis of the Linear Gauge will be displayed as follows:
 
+{% 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(
@@ -28,17 +36,28 @@ By default axis will have a [`minimum`](https://pub.dev/documentation/syncfusion
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Initialize linear gauge for axis](images/getting-started/default_linear_gauge.png)
 
 ## 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 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.  
+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 from -50 to a [`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.
 
+{% 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(
@@ -49,8 +68,10 @@ The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/g
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Update linear gauge for axis scale](images/axis/minmax_axis_linear_gauge.png)
 
@@ -89,8 +110,17 @@ The following code sample demonstrates how to customize the [`thickness`](https:
 
 The code snippet below sets a solid color to the axis track:
 
+{% 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(
@@ -103,10 +133,12 @@ The code snippet below sets a solid color to the axis track:
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
-![Apply color to axis in linear guage](images/axis/axis_solid_color.png)
+![Apply color to axis in linear gauge](images/axis/axis_solid_color.png)
 
 ## Apply gradient
 
@@ -114,23 +146,30 @@ The [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gau
 
 The following code sample applies a gradient to the axis track.
 
+{% 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: 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,
-                ),
+          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,
               ),
             ),
           ),
@@ -138,10 +177,12 @@ The following code sample applies a gradient to the axis track.
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
-![Apply color to axis in linear guage](images/axis/axis_gradient.png)
+![Apply color to axis in linear gauge](images/axis/axis_gradient.png)
 
 ## Customize borders
 
@@ -149,8 +190,17 @@ The [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/late
 
 The code snippet below sets a border to the axis track:
 
+{% 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(
@@ -160,7 +210,7 @@ The code snippet below sets a border to the axis track:
             axisTrackStyle: LinearAxisTrackStyle(
               // Sets axis thickness for the better visibility of border
               thickness: 15,
-              // Hides axis axis color for the better visibility of border
+              // Hides axis color for the better visibility of border
               color: Colors.transparent,
               //Sets the border color
               borderColor: Colors.blueGrey,
@@ -172,8 +222,10 @@ The code snippet below sets a border to the axis track:
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize axis track border](images/axis/axis_border.png)
 
@@ -181,8 +233,17 @@ The code snippet below sets a border to the axis track:
 
 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`.
 
+{% 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(
@@ -198,18 +259,28 @@ The [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Change axis track edge style](images/axis/axis_corner_style.png)
 
 ## Inverse the axis
 
-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.
+The direction of the 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.
 
+{% 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(
@@ -220,8 +291,10 @@ When the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gau
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 You can see that the axis values are displayed from 100 to 0 as the axis track is inversed.
 
@@ -229,23 +302,34 @@ 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 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: 
+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:
 
+{% 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(
       color: Colors.white,
       home: Scaffold(
         body: Center(
-          child: child: SfLinearGauge(maximum: 50, axisTrackExtent: 50),
+          child: SfLinearGauge(maximum: 50, axisTrackExtent: 50),
         ),
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Extend linear gauge axis tack](images/axis/extend_axis.png)
 
@@ -253,8 +337,17 @@ The axis track can be extended using the [`axisTrackExtent`](https://pub.dev/doc
 
 You can hide the axis track by setting the [`showAxisTrack`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/showAxisTrack.html) property to false. The default value of this property is true.
 
+{% 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(
@@ -265,17 +358,33 @@ You can hide the axis track by setting the [`showAxisTrack`](https://pub.dev/doc
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Hide linear gauge axis track](images/axis/hide_axis_track.png)
 
 ## Customize axis values
 
-Linear gauge allows you to display a set of values along with a custom axis based on your business logic by using the [`onGenerateLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/onGenerateLabels.html) and [`valueToFactorCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/valueToFactorCallback.html) callbacks.
+Linear Gauge allows you to display a set of values along with a custom axis based on your business logic using the [`onGenerateLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/onGenerateLabels.html) and [`valueToFactorCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/valueToFactorCallback.html) callbacks. The `valueToFactorCallback` allows you to convert axis values into a factor between 0 and 1, while `onGenerateLabels` enables you to define custom labels for specific intervals.
 
+{% tabs %}
 {% highlight dart %} 
 
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatefulWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
+
+  @override
+  State<LinearGaugeDemo> createState() => _LinearGaugeDemoState();
+}
+
+class _LinearGaugeDemoState extends State<LinearGaugeDemo> {
   double pointerValue = 50.0;
 
   // To return the label value based on interval
@@ -302,66 +411,76 @@ Linear gauge allows you to display a set of values along with a custom axis base
   }
 
   Widget _getLinearGauge() {
-    return Container(
-      child: SfLinearGauge(
-        minimum: 0,
-        maximum: 150.0,
-        interval: 18.75,
-        animateAxis: true,
-        animateRange: true,
-        labelPosition: LinearLabelPosition.outside,
-        tickPosition: LinearElementPosition.outside,
-        valueToFactorCallback: (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;
-          }
-        },
-        onGenerateLabels: () {
-          final List<LinearAxisLabel> _visibleLabels = <LinearAxisLabel>[];
-          for (num i = 0; i < 9; i++) {
-            final double _value = _calculateLabelValue(i);
-            final LinearAxisLabel label = LinearAxisLabel(
-                text: _value.toInt().toString(),
-                value: (i * 18.75).toDouble());
-            _visibleLabels.add(label);
-          }
-
-          return _visibleLabels;
-        },
-        markerPointers: [
-          LinearShapePointer(
-              value: pointerValue,
-              onChanged: (value) =>
-              {
-                setState(() => {pointerValue = value})
-              },
-              color: Color(0xff06589C),
-              width: 24,
-              position: LinearElementPosition.cross,
-              shapeType: LinearShapePointerType.triangle,
-              height: 16)
-        ],
+    return SfLinearGauge(
+      minimum: 0,
+      maximum: 150.0,
+      interval: 18.75,
+      animateAxis: true,
+      animateRange: true,
+      labelPosition: LinearLabelPosition.outside,
+      tickPosition: LinearElementPosition.outside,
+      valueToFactorCallback: (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;
+        }
+      },
+      onGenerateLabels: () {
+        final List<LinearAxisLabel> _visibleLabels = <LinearAxisLabel>[];
+        for (num i = 0; i < 9; i++) {
+          final double _value = _calculateLabelValue(i);
+          final LinearAxisLabel label = LinearAxisLabel(
+              text: _value.toInt().toString(),
+              value: (i * 18.75).toDouble());
+          _visibleLabels.add(label);
+        }
+        return _visibleLabels;
+      },
+      markerPointers: [
+        LinearShapePointer(
+            value: pointerValue,
+            onChanged: (value) {
+              setState(() {
+                pointerValue = value;
+              });
+            },
+            color: Color(0xff06589C),
+            width: 24,
+            position: LinearElementPosition.cross,
+            shapeType: LinearShapePointerType.triangle,
+            height: 16)
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: Center(
+          child: _getLinearGauge(),
+        ),
       ),
-      margin: EdgeInsets.all(10)
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Custom axis track](images/axis/custom_axis.png)
\ No newline at end of file
diff --git a/Flutter/linear-gauge/bar-pointer.md b/Flutter/linear-gauge/bar-pointer.md
index 9f994b1ab..1831aaa6a 100644
--- a/Flutter/linear-gauge/bar-pointer.md
+++ b/Flutter/linear-gauge/bar-pointer.md
@@ -13,10 +13,19 @@ A bar pointer is an accenting line or shaded background that can be placed on a
 
 ## Default bar pointer
 
-The following code sample creates a default bar pointer with the value 50. 
+The following code sample creates a default bar pointer with the value 50.
 
+{% 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(
@@ -33,17 +42,28 @@ The following code sample creates a default bar pointer with the value 50.
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Initialize linear gauge for bar pointer](images/bar-pointer/default_bar_pointer.png)
 
 ## Customize bar pointer thickness
 
-The thickness can be changed by the [`thickness`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/thickness.html) property of the bar pointer. The following code sample demonstrates the same. 
+The thickness can be changed by the [`thickness`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/thickness.html) property of the bar pointer. The following code sample demonstrates the same.
 
+{% 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(
@@ -62,17 +82,28 @@ The thickness can be changed by the [`thickness`](https://pub.dev/documentation/
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Change the bar pointer thickness](images/bar-pointer/bar_thickness.png)
 
 ## Customize edge style
 
-The edge style can be changed with the [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/edgeStyle.html) property of the bar pointer. The edge style can be any of the `startCurve`, `endCurve`, `bothCurve`, and `bothFlat` options.The default value is `bothFlat`.
+The edge style can be changed with the [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/edgeStyle.html) property of the bar pointer. The edge style can be any of the `startCurve`, `endCurve`, `bothCurve`, and `bothFlat` options. The default value is `bothFlat`.
 
+{% 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(
@@ -94,8 +125,10 @@ The edge style can be changed with the [`edgeStyle`](https://pub.dev/documentati
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Change the bar pointer edge style](images/bar-pointer/edge_style.png)
 
@@ -103,8 +136,17 @@ The edge style can be changed with the [`edgeStyle`](https://pub.dev/documentati
 
 By default, the bar pointer is positioned cross to the axis. This position can be changed by the [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/position.html) property of a bar pointer. It is possible to position the bar pointer `inside`, `cross`, or `outside` the axis. The following code sample demonstrates how to change the bar pointer position to inside the axis.
 
+{% 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(
@@ -122,17 +164,28 @@ By default, the bar pointer is positioned cross to the axis. This position can b
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize linear gauge for bar pointer position](images/bar-pointer/bar_pointer_change_position.png)
 
 ## Customize the offset
 
-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. 
+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.
 
+{% 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(
@@ -152,17 +205,28 @@ In addition to positioning the bar pointer, it is also possible to change the of
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize linear gauge bar pointer offset](images/bar-pointer/bar_pointer_offset.png)
 
-## Change the color of bar pointer 
+## Change the color of bar pointer
 
-The color of the bar pointer can be changed by the [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/color.html) property. The following code sample demonstrates the same. 
+The color of the bar pointer can be changed by the [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/color.html) property. The following code sample demonstrates the same.
 
+{% 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(
@@ -182,8 +246,10 @@ The color of the bar pointer can be changed by the [`color`](https://pub.dev/doc
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Apply color to bar pointer](images/bar-pointer/bar_color.png)
 
@@ -191,8 +257,17 @@ The color of the bar pointer can be changed by the [`color`](https://pub.dev/doc
 
 The gradient can be applied by using the [`shaderCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/shaderCallback.html) property of bar pointer. The following code sample demonstrates how to apply a radial gradient to the bar pointer.
 
+{% 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(
@@ -205,21 +280,23 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu
                 value: 100,
                 //Apply radial gradient
                 shaderCallback: (bounds) => RadialGradient(
-                radius: 30,
-                colors: [
-                  Colors.redAccent,
-                  Colors.blueAccent,
-                  Colors.greenAccent,
-                ],
-              ).createShader(bounds))
+                  radius: 30,
+                  colors: [
+                    Colors.redAccent,
+                    Colors.blueAccent,
+                    Colors.greenAccent,
+                  ],
+                ).createShader(bounds))
             ],
           ),
         ),
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Apply radial gradient to bar pointer](images/bar-pointer/radial_gradient_bar.png)
 
@@ -227,8 +304,17 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu
 
 The gradient can be applied by using the [`shaderCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/shaderCallback.html) property of bar pointer. The following code sample demonstrates how to apply a linear gradient to the bar pointer.
 
+{% 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(
@@ -253,8 +339,10 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Apply linear gradient to bar pointer](images/bar-pointer/linear_gradient_bar.png)
 
@@ -262,8 +350,17 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu
 
 The gradient can be applied by using the [`shaderCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/shaderCallback.html) property of the bar pointer. The following code sample demonstrates how to apply a sweep gradient to the bar pointer.
 
+{% 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(
@@ -275,26 +372,28 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu
               LinearBarPointer(
                 value: 100,
                 thickness: 10,
-                //Apply linear gradient
+                //Apply sweep 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))
+                  startAngle: 0.1,
+                  endAngle: 0.2,
+                  colors: [
+                    Colors.blueAccent,
+                    Colors.greenAccent,
+                    Colors.orangeAccent,
+                  ],
+                  tileMode: TileMode.mirror,
+                  center: Alignment.bottomRight,
+                ).createShader(bounds))
             ],
           ),
         ),
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Apply sweep gradient to bar pointer](images/bar-pointer/sweep_gradient_bar.png)
 
@@ -303,8 +402,17 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu
 
 The border can be customized with [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/borderWidth.html) and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/borderColor.html) properties of the bar pointer. The following code examples demonstrates the same.
 
+{% 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(
@@ -324,19 +432,30 @@ The border can be customized with [`borderWidth`](https://pub.dev/documentation/
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize linear gauge bar pointer border](images/bar-pointer/bar_border.png)
 
 
 ## Add multiple bar pointers
 
-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:
+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. When adding multiple bar pointers, specify an offset value to separate them. Use an offset value greater than the bar pointer thickness to avoid overlap. The below code example demonstrates adding two bar pointers with different offsets:
 
+{% tabs %}
 {% highlight dart %} 
 
-@override
+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(
@@ -349,7 +468,7 @@ You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documenta
               ),
               LinearBarPointer(
                 value: 40,
-                // Setting offset to move the bar from previos one
+                // Setting offset to move the bar from previous one
                 offset: 10,
                 position: LinearElementPosition.outside
               ),
@@ -359,8 +478,10 @@ You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documenta
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Add multiple bar pointers in a linear gauge](images/bar-pointer/multiple_bar_pointer.PNG)
 
@@ -368,8 +489,17 @@ You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documenta
 
 The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/onAnimationCompleted.html) callback in the [`LinearBarPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer-class.html) will be triggered when the bar pointer animation is completed. The default value of the [onAnimationCompleted](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/onAnimationCompleted.html) callback is `null`.
 
+{% 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(
@@ -379,7 +509,8 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga
             barPointers:[
               LinearBarPointer(
                 onAnimationCompleted: () {
-                  print("Bar Pointer animation is completed");
+                  // Bar Pointer animation is completed
+                  debugPrint('Bar Pointer animation is completed');
                 },
               ),
             ],
@@ -388,5 +519,7 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Flutter/linear-gauge/getting-started.md b/Flutter/linear-gauge/getting-started.md
index 6ad5b9dd2..4a4eb1d89 100644
--- a/Flutter/linear-gauge/getting-started.md
+++ b/Flutter/linear-gauge/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Flutter Linear Gauge Getting Started (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 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. It also covers the basic features needed to get started with the Linear Gauge widget.
 
 To get started quickly with our Flutter Linear Gauge widget, you can check out this video:
 
@@ -24,13 +24,14 @@ Create a simple project using the instructions given in the [Getting Started wit
 
 Add the Syncfusion<sup>&reg;</sup> Flutter Gauge dependency to your pubspec.yaml file.
 
+{% tabs %}
 {% highlight dart %} 
 
-    dependencies:
-
-    syncfusion_flutter_gauges: ^xx.x.xx
+dependencies:
+  syncfusion_flutter_gauges: ^xx.x.xx
 
 {% endhighlight %}
+{% endtabs %}
 
 N> Here **xx.x.xx** denotes the current version of the [`Syncfusion Flutter Gauge`](https://pub.dev/packages/syncfusion_flutter_gauges/versions) package.
 
@@ -38,40 +39,55 @@ N> Here **xx.x.xx** denotes the current version of the [`Syncfusion Flutter Gaug
 
 Run the following command to get the required packages.
 
+{% tabs %}
 {% highlight dart %} 
 
-    $ flutter pub get
+flutter pub get
 
 {% endhighlight %}
+{% endtabs %}
 
 **Import package**
 
 Import the following package in your Dart code.
 
+{% tabs %}
 {% highlight dart %} 
 
-    import 'package:syncfusion_flutter_gauges/gauges.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
 
 {% endhighlight %}
+{% endtabs %}
 
 ## 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 a container widget.
 
+{% 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()
+          child: SfLinearGauge()
         )
       )      
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Initialize linear gauge](images/getting-started/default_linear_gauge.png)
 
@@ -79,8 +95,17 @@ After the package has been imported, initialize the [`SfLinearGauge`](https://pu
 
 The Linear Gauge axis is a scale where a set of values can be plotted. You can specify the minimum and maximum values of the axis using 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 as demonstrated in the following code sample.
 
+{% 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(
@@ -91,8 +116,10 @@ The Linear Gauge axis is a scale where a set of values can be plotted. You can s
       )      
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Add axis to linear gauge](images/getting-started/add_axis.png)
 
@@ -100,32 +127,72 @@ The Linear Gauge axis is a scale where a set of values can be plotted. You can s
 
 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.
 
+{% tabs %}
 {% highlight dart %} 
 
-  SfLinearGauge(
-    orientation: LinearGaugeOrientation.vertical
-  ),
+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(
+            orientation: LinearGaugeOrientation.vertical
+          )
+        )
+      )      
+    );
+  }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Update Orientation of linear gauge](images/getting-started/vertical_orientation.png)
 
 ## 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 see where a value 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.
 
+{% tabs %}
 {% highlight dart %} 
 
-  SfLinearGauge(
-    ranges: <LinearGaugeRange>[
-      //First range
-      LinearGaugeRange(startValue: 0, endValue: 50, color: Colors.green),
-      //Second range
-      LinearGaugeRange(startValue: 50, endValue: 100, color: Colors.blue)
-    ]
-  )
+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(
+            ranges: <LinearGaugeRange>[
+              //First range
+              LinearGaugeRange(startValue: 0, endValue: 50, color: Colors.green),
+              //Second range
+              LinearGaugeRange(startValue: 50, endValue: 100, color: Colors.blue)
+            ]
+          )
+        )
+      )      
+    );
+  }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Add ranges to a linear gauge](images/getting-started/add_ranges.png)
 
@@ -135,34 +202,74 @@ The Linear Gauge supports two marker pointers - shape pointer and widget pointer
 
 The following code sample demonstrates how to add a shape pointer:
 
+{% tabs %}
 {% highlight dart %} 
 
-  SfLinearGauge(
-    markerPointers: [LinearShapePointer(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 MaterialApp(
+      home: Scaffold(
+        body: Center(
+          child: SfLinearGauge(
+            markerPointers: [LinearShapePointer(value: 50)]
+          )
+        )
+      )      
+    );
+  }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Add shape pointer in linear gauge](images/getting-started/add_shape_pointer.png)
 
 The following code sample demonstrates how to add a widget pointer.
 
+{% tabs %}
 {% highlight dart %} 
 
-  SfLinearGauge(
-    markerPointers: [
-      LinearWidgetPointer(
-        value: 40,
-        child: Container(
-          height: 20,
-          width: 20,
-          decoration: BoxDecoration(color: Colors.blueAccent)
-        ),
-      ),
-    ],
-  ),
+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: [
+              LinearWidgetPointer(
+                value: 40,
+                child: Container(
+                  height: 20,
+                  width: 20,
+                  decoration: BoxDecoration(color: Colors.blueAccent)
+                ),
+              ),
+            ],
+          )
+        )
+      )      
+    );
+  }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Add widget pointer in linear gauge](images/getting-started/add_widget_pointer.png)
 
@@ -170,65 +277,89 @@ The following code sample demonstrates how to add a widget 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.
 
+{% tabs %}
 {% highlight dart %} 
 
-  SfLinearGauge(
-    barPointers: [LinearBarPointer(value: 40)]
-  ),
+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(
+            barPointers: [LinearBarPointer(value: 40)]
+          )
+        )
+      )      
+    );
+  }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![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:
 
+{% tabs %}
 {% highlight dart %} 
 
-  import 'package:flutter/material.dart';
-  import 'package:syncfusion_flutter_gauges/gauges.dart';
-
-  void main() => runApp(LinearGaugeDemo());
-
-  class LinearGaugeDemo extends StatelessWidget {
-    @override
-    Widget build(BuildContext context) {
-      return MaterialApp(
-        home: Scaffold(
-          body: Center(
-            child: SfLinearGauge(
-              ranges: <LinearGaugeRange>[
-                //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)
-                  ),
+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(
+            ranges: <LinearGaugeRange>[
+              //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 %}
+{% endtabs %}
 
 ![A Linear gauge](images/getting-started/all_basic_elements.png)
\ No newline at end of file
diff --git a/Flutter/linear-gauge/how-to/custom-widget-on-flutterflow.md b/Flutter/linear-gauge/how-to/custom-widget-on-flutterflow.md
index c4fa38d98..21d1e24b8 100644
--- a/Flutter/linear-gauge/how-to/custom-widget-on-flutterflow.md
+++ b/Flutter/linear-gauge/how-to/custom-widget-on-flutterflow.md
@@ -7,7 +7,7 @@ control: SfLinearGauge
 documentation: ug
 ---
 
-# How to add Syncfusion<sup>&reg;</sup> Linear Gauge widget in FlutterFlow?
+# How to add Syncfusion® Linear Gauge widget in FlutterFlow?
 
 ## Overview
 
@@ -35,7 +35,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
 ![Version](how-to-section-images/copy-version.png)
 3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it.
 
->**Note**: The live version of [Syncfusion<sup>&reg;</sup> Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion<sup>&reg;</sup> Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility).
+>**Note**: The current version of [Syncfusion<sup>&reg;</sup> Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion<sup>&reg;</sup> Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility).
 
 ![Dependency](how-to-section-images/dependency.png)
 
@@ -52,12 +52,12 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
 
 ### Add widget code snippet in code editor
 
-1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_gauges/example) tab in [Syncfusion<sup>&reg;</sup> Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) and copy the widget specific codes.
+1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_gauges/example) tab in [Syncfusion<sup>&reg;</sup> Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) and copy the widget-specific code samples.
 ![Code](how-to-section-images/code-snippet.png)
 2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it.
-![Code snippet](how-to-section-images/Adding-code-snippent.png)
+![Code snippet](how-to-section-images/Adding-code-snippet.png)
 
-### Compiling the codes
+### Compiling the code
 
 1. Click the 'Compile Code' button located in the top right corner.
 2. If there are no errors, save the process. If errors are present, fix them and compile the code again. Once the code has been successfully compiled, save the process.
diff --git a/Flutter/linear-gauge/how-to/how-to-section-images/Adding-code-snippent.png b/Flutter/linear-gauge/how-to/how-to-section-images/Adding-code-snippet.png
similarity index 100%
rename from Flutter/linear-gauge/how-to/how-to-section-images/Adding-code-snippent.png
rename to Flutter/linear-gauge/how-to/how-to-section-images/Adding-code-snippet.png
diff --git a/Flutter/linear-gauge/interaction.md b/Flutter/linear-gauge/interaction.md
index 993e9e221..99b176755 100644
--- a/Flutter/linear-gauge/interaction.md
+++ b/Flutter/linear-gauge/interaction.md
@@ -2,7 +2,7 @@
 layout: post
 title: Interaction in Flutter Linear Gauge widget | Syncfusion
 description: Learn here all about the interactions in Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more
-platform: Flutter
+platform: flutter
 control: SfLinearGauge
 documentation: ug
 ---
@@ -17,8 +17,18 @@ The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest
 
 The following code sample demonstrates how to update a simple marker pointer value based on swipe or drag gestures:
 
+{% tabs %}
 {% highlight dart %}
 
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+class LinearGaugeDemo extends StatefulWidget {
+  @override
+  State<LinearGaugeDemo> createState() => _LinearGaugeDemoState();
+}
+
+class _LinearGaugeDemoState extends State<LinearGaugeDemo> {
   double shapePointerValue = 25;
 
   @override
@@ -44,15 +54,27 @@ The following code sample demonstrates how to update a simple marker pointer val
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![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 gestures:
 
+{% tabs %}
 {% highlight dart %}
 
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+class LinearGaugeDemo extends StatefulWidget {
+  @override
+  State<LinearGaugeDemo> createState() => _LinearGaugeDemoState();
+}
+
+class _LinearGaugeDemoState extends State<LinearGaugeDemo> {
   double shapePointerValue = 85;
   double barPointerValue = 85;
   double widgetPointerValue = 26;
@@ -169,7 +191,9 @@ The following code sample demonstrates how to update multiple marker pointer val
       )
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Shape pointer interaction in linear gauge](images/interaction/interaction.gif)
\ No newline at end of file
diff --git a/Flutter/linear-gauge/labels.md b/Flutter/linear-gauge/labels.md
index 4a11548c2..9cde0bdaa 100644
--- a/Flutter/linear-gauge/labels.md
+++ b/Flutter/linear-gauge/labels.md
@@ -2,7 +2,7 @@
 layout: post
 title: Labels in Flutter Linear Gauge widget | Syncfusion
 description: Learn here all about adding and customizing Labels of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
-platform: Flutter
+platform: flutter
 control: SfLinearGauge
 documentation: ug
 ---
@@ -23,7 +23,16 @@ Axis labels can be customized using the [`axisLabelStyle`](https://pub.dev/docum
 * `fontWeight` – Allows you to specify the font weight for labels.
 * `fontSize` – Allows you to specify the font size for labels.
 
-{% 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) {
@@ -43,8 +52,10 @@ Axis labels can be customized using the [`axisLabelStyle`](https://pub.dev/docum
       )
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize linear gauge axis label style](images/axis-labels/customize_label_style.png)
 
@@ -52,7 +63,16 @@ Axis labels can be customized using the [`axisLabelStyle`](https://pub.dev/docum
 
 The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/showLabels.html) property of [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) allows you to show or hide the visibility of axis labels. The default value of this property is true.
 
-{% 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) {
@@ -64,8 +84,10 @@ The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/lates
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Change visibility](images/axis-labels/axis_label_visibility.png)
 
@@ -73,7 +95,16 @@ The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/lates
 
 The [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/interval.html) between labels can be customized using the [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/interval.html) property of [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html). The major ticks are generated based on this interval property.
 
-{% 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) {
@@ -87,8 +118,10 @@ The [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Set label interval in axis track](images/axis-labels/axis_label_interval.png)
 
@@ -96,7 +129,16 @@ The [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/
 
 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 %} 
+{% 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) {
@@ -111,8 +153,10 @@ The linear axis allows you to position the labels either `inside` or `outside` t
       )
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Set linear gauge label position](images/axis-labels/label-placement.png)
 
@@ -121,7 +165,16 @@ The linear axis allows you to position the labels either `inside` or `outside` t
 
 The [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/labelOffset.html) property allows you to adjust the distance between the tick-end and the labels. 
 
-{% 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) {
@@ -135,8 +188,10 @@ The [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/late
       )
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Set linear gauge label offset](images/axis-labels/label_offset.png)
 
@@ -144,7 +199,16 @@ The [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/late
 
 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 %} 
+{% 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) {
@@ -158,8 +222,10 @@ By default, a maximum of three labels is displayed for every 100 logical pixels
       )
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Set maximum number of labels in axis track](images/axis-labels/axis_label_visibility.png)
 
@@ -167,24 +233,44 @@ By default, a maximum of three labels is displayed for every 100 logical pixels
 
 You can format or change the whole numeric label text using the [`labelFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/labelFormatterCallback.html).
 
+{% tabs %}
 {% highlight dart %}
 
-  SfLinearGauge(
-    labelFormatterCallback: (label) {
-      if (label == '0') {
-        return 'Start';
-      }
-      if (label == '50') {
-        return 'Mid';
-      }
-      if (label == '100') {
-        return 'End';
-      }
-      return label;
-    }
-  )
+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(
+            labelFormatterCallback: (label) {
+              if (label == '0') {
+                return 'Start';
+              }
+              if (label == '50') {
+                return 'Mid';
+              }
+              if (label == '100') {
+                return 'End';
+              }
+              return label;
+            }
+          )
+        )
+      )
+    );
+  }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize Label Text in axis track](images/axis-labels/custom_label_text.png)
 
@@ -192,13 +278,33 @@ You can format or change the whole numeric label text using the [`labelFormatter
 
 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.
 
-
+{% tabs %}
 {% highlight dart %}
 
-  SfLinearGauge(
-    numberFormat: NumberFormat("\$")
-  ),
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+import 'package:intl/intl.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(
+            numberFormat: NumberFormat("\$")
+          )
+        )
+      )
+    );
+  }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize Label Format in Axis Label](images/axis-labels/axis_label_number_format.png)
\ No newline at end of file
diff --git a/Flutter/linear-gauge/mirror-linear-gauge.md b/Flutter/linear-gauge/mirror-linear-gauge.md
index ad61f7b81..28116c3c7 100644
--- a/Flutter/linear-gauge/mirror-linear-gauge.md
+++ b/Flutter/linear-gauge/mirror-linear-gauge.md
@@ -2,7 +2,7 @@
 layout: post
 title: Mirror in Flutter Linear Gauge widget | Syncfusion
 description: Learn here about mirroring the Syncfusion Flutter Linear Gauge (SfLinearGauge) widget with isMirrored property
-platform: Flutter
+platform: flutter
 control: SfLinearGauge
 documentation: ug
 ---
@@ -11,16 +11,33 @@ documentation: ug
 
 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.
 
+{% 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 Center(
-      child: SfLinearGauge(isMirrored: true)
+    return MaterialApp(
+      title: 'Linear Gauge Demo',
+      theme: ThemeData(primarySwatch: Colors.blue),
+      home: const Scaffold(
+        body: Center(
+          child: SfLinearGauge(isMirrored: true),
+        ),
+      ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Mirror linear gauge](images/mirrored/mirrored.png)
 
diff --git a/Flutter/linear-gauge/overview.md b/Flutter/linear-gauge/overview.md
index bb59b0d58..1690c8e2b 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<sup>&reg;</sup> 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.
+Syncfusion<sup>&reg;</sup> 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 application 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 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** -  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.
+* **[Orientation](orientation.md)** - The Linear Gauge supports both vertical and horizontal orientations, giving you flexibility in your layout design.
+* **[Axis](axis.md)** - 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](labels.md)** - Axis elements such as labels, major ticks, and minor ticks can be styled in various ways to match your application's design.
+* **[Ranges](range.md)** - 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](shape-marker-pointer.md)** - 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](mirror-linear-gauge.md)** - 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](animation.md)** - Add visually appealing animations to gauge elements when they load or when their values change.
+* **[Interaction](interaction.md)** - 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 9978c2357..bc481d0fb 100644
--- a/Flutter/linear-gauge/range.md
+++ b/Flutter/linear-gauge/range.md
@@ -2,7 +2,7 @@
 layout: post
 title: Range in Flutter Linear Gauge widget | Syncfusion
 description: Learn here all about adding and customizing Range of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
-platform: Flutter
+platform: flutter
 control: SfLinearGauge
 documentation: ug
 ---
@@ -11,7 +11,16 @@ documentation: ug
 
 A range is a visual element that helps you quickly visualize where a range falls on the axis track. Multiple ranges with different styles can be added to a linear gauge. The default style of range will be as below. 
 
-{% 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) {
@@ -30,8 +39,10 @@ A range is a visual element that helps you quickly visualize where a range falls
       ),
     );
   }
-	
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Initialize linear gauge for range](images/gauge-range/default-range.png)
 
@@ -42,7 +53,16 @@ A Linear Gauge range has three values to draw a range - [`startValue`](https://p
 
 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 %} 
+{% 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) {
@@ -66,8 +86,10 @@ However, to draw concave, convex and exponential-like shapes the [`midValue`](ht
       ),
     );
   }
-	
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Draw linear gauge concave range](images/gauge-range/range-concave.png)
 
@@ -77,7 +99,16 @@ The [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest
 
 The default value is `bothFlat`.
 
-{% 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) {
@@ -104,8 +135,10 @@ The default value is `bothFlat`.
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Change the gauge range edge style](images/gauge-range/edge_style.png)
 
@@ -113,7 +146,16 @@ The default value is `bothFlat`.
 
 The color of a range can be changed by setting the [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/color.html) property of a range. The below code example demonstrates changing the color property of the range.
 
-{% 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) {
@@ -130,8 +172,10 @@ The color of a range can be changed by setting the [`color`](https://pub.dev/doc
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Set linear gauge range color](images/gauge-range/color_range.png)
 
@@ -139,7 +183,16 @@ The color of a range can be changed by setting the [`color`](https://pub.dev/doc
 
 The gradient can be applied by using the [`shaderCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/shaderCallback.html) property of a range. The below code example demonstrates applying a radial gradient to the range.
 
-{% 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) {
@@ -166,16 +219,27 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
-![Apply radial gradient to linear guage range](images/gauge-range/radial_gardient_range.png)
+![Apply radial gradient to linear gauge range](images/gauge-range/radial_gardient_range.png)
 
 ## Apply linear gradient to a range
 
 The below code snippet demonstrates applying a linear gradient to the range.
 
-{% 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) {
@@ -199,16 +263,27 @@ The below code snippet demonstrates applying a linear gradient to the range.
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
-![Apply linear gradient to linear guage range](images/gauge-range/linear_gardient_range.png)
+![Apply linear gradient to linear gauge range](images/gauge-range/linear_gardient_range.png)
 
 ## Apply sweep gradient to a range
 
 The below code snippet demonstrates applying a sweep gradient to the range.
 
-{% 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) {
@@ -238,16 +313,27 @@ The below code snippet demonstrates applying a sweep gradient to the range.
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
-![Apply sweep gradient to linear guage range](images/gauge-range/sweep_gradient_range.png)
+![Apply sweep gradient to linear gauge range](images/gauge-range/sweep_gradient_range.png)
 
 ## Customize range position
 
 It is possible to position the ranges `inside`, `cross`, and `outside` the axis. By default, the range will be positioned `outside` the axis. The [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/position.html) property of the range is used to position the range. The below code snippet demonstrates the same.
 
-{% 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) {
@@ -265,8 +351,10 @@ It is possible to position the ranges `inside`, `cross`, and `outside` the axis.
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Position the linear gauge range](images/gauge-range/range_position.png)
 
@@ -274,38 +362,58 @@ It is possible to position the ranges `inside`, `cross`, and `outside` the 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>[
-        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),
+{% 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: Container(
+            child: SfLinearGauge(
+              minorTicksPerInterval: 4,
+              useRangeColorForAxis: true,
+              animateAxis: true,
+              axisTrackStyle: LinearAxisTrackStyle(thickness: 1),
+              ranges: <LinearGaugeRange>[
+                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 %}
+{% endtabs %}
 
 ![Set range color to axis element](images/gauge-range/range_userangeforaxis.png)
 
@@ -313,7 +421,16 @@ You can set range color to axis elements using the [`useRangeColorForAxis`](http
 
 You can add multiple ranges for an axis. The below code example demonstrates adding three ranges in a Linear Gauge.
 
-{% 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) {
@@ -340,7 +457,9 @@ You can add multiple ranges for an axis. The below code example demonstrates add
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Add multiple ranges in a linear gauge](images/gauge-range/multiple_ranges.png)
\ No newline at end of file
diff --git a/Flutter/linear-gauge/shape-marker-pointer.md b/Flutter/linear-gauge/shape-marker-pointer.md
index 6282a5974..837bbc187 100644
--- a/Flutter/linear-gauge/shape-marker-pointer.md
+++ b/Flutter/linear-gauge/shape-marker-pointer.md
@@ -2,7 +2,7 @@
 layout: post
 title: Shape Marker Pointer in Flutter Linear Gauge widget | Syncfusion
 description: Learn here all about adding and customizing Shape Marker Pointer of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
-platform: Flutter
+platform: flutter
 control: SfLinearGauge
 documentation: ug
 ---
@@ -17,9 +17,18 @@ The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gaug
 4. `Diamond`
 5. `Rectangle`
 
-The following is the default appearance of default shape pointer.
+The following is the default appearance of the default shape 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) {
@@ -33,8 +42,10 @@ The following is the default appearance of default shape pointer.
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Initialize linear gauge for shape pointer](images/shape-pointer/default_shape_pointer.png)
 
@@ -42,7 +53,16 @@ The following is the default appearance of default 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 %} 
+{% 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) {
@@ -57,8 +77,10 @@ The size of the marker pointer can be changed by the [`height`](https://pub.dev/
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Set size of linear gauge shape pointer](images/shape-pointer/shape_pointer_size.png)
 
@@ -66,7 +88,16 @@ The size of the marker pointer can be changed by the [`height`](https://pub.dev/
 
 The color of the shape pointer can be changed by the [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/color.html) property. The following code example demonstrates the same.
 
-{% 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) {
@@ -81,8 +112,10 @@ The color of the shape pointer can be changed by the [`color`](https://pub.dev/d
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Change shape pointer color](images/shape-pointer/shape_pointer_color.png)
 
@@ -90,7 +123,16 @@ The color of the shape pointer can be changed by the [`color`](https://pub.dev/d
 
 The border can be customized by the [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/borderColor.html) and [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/borderWidth.html) properties of the [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html).
 
-{% 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) {
@@ -109,8 +151,10 @@ The border can be customized by the [`borderColor`](https://pub.dev/documentatio
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize shape pointer border](images/shape-pointer/shape_border.png)
 
@@ -118,7 +162,16 @@ The border can be customized by the [`borderColor`](https://pub.dev/documentatio
 
 The elevation can be customized by the [`elevation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/elevation.html) and [`elevationColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/elevationColor.html) properties.
 
-{% 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) {
@@ -141,16 +194,27 @@ The elevation can be customized by the [`elevation`](https://pub.dev/documentati
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Change shape pointer elevation](images/shape-pointer/pointer_elevation.png)
 
 ## Change marker alignment
 
-The marker pointer alignment can be changed by the [`markerAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/markerAlignment.html) property of [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html).The available marker pointer alignments are `start`, `end`, and `center`.
+The marker pointer alignment can be changed by the [`markerAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/markerAlignment.html) property of [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html). The available marker pointer alignments are `start`, `end`, and `center`.
+
+{% tabs %}
+{% highlight dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
 
-{% highlight dart %} 
+class LinearGaugeDemo extends StatelessWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -169,16 +233,27 @@ The marker pointer alignment can be changed by the [`markerAlignment`](https://p
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Change shape pointer alignment](images/shape-pointer/shape_marker_alignment.png)
 
 ## Customize 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/LinearShapePointer/position.html) property of a [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.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 shape pointer is positioned `outside` the axis. This position can be changed by the [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/position.html) property of a [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html). It is possible to position the shape pointer `inside`, `cross`, or `outside` the axis. The following code sample demonstrates how to position the shape pointer inside the axis.
+
+{% tabs %}
+{% highlight dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
 
-{% highlight dart %} 
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatelessWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -198,16 +273,27 @@ By default, the shape pointer is positioned `outside` the axis. This position ca
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Change shape pointer position](images/shape-pointer/shape_pointer_position.png)
 
 ## Customize offset
 
-In addition to position the shape pointer, it is also possible to change the offset of the shape pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/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/LinearShapePointer/offset.html) value. The following code sample demonstrates how to change the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/offset.html) value of the shape pointer. 
+In addition to positioning the shape pointer, it is also possible to change the offset of the shape pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/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/LinearShapePointer/offset.html) value. The following code sample demonstrates how to change the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/offset.html) value of the shape pointer.
+
+{% tabs %}
+{% highlight dart %}
 
-{% 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) {
@@ -228,8 +314,10 @@ In addition to position the shape pointer, it is also possible to change the off
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize linear gauge bar pointer offset](images/shape-pointer/shape_pointer_offset.png)
 
@@ -241,8 +329,22 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point
 
 ### Free
 
+{% tabs %}
 {% highlight dart %}
 
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatefulWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
+
+  @override
+  State<LinearGaugeDemo> createState() => _LinearGaugeDemoState();
+}
+
+class _LinearGaugeDemoState extends State<LinearGaugeDemo> {
   double _firstPointer = 30;
   double _secondPointer = 70;
 
@@ -279,15 +381,31 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Pointers drag behavior](images/shape-pointer/free-drag-behavior.gif)
 
 ### Constrained
 
+{% tabs %}
 {% highlight dart %}
 
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatefulWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
+
+  @override
+  State<LinearGaugeDemo> createState() => _LinearGaugeDemoState();
+}
+
+class _LinearGaugeDemoState extends State<LinearGaugeDemo> {
   double _firstPointer = 30;
   double _secondPointer = 70;
 
@@ -324,17 +442,33 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Pointers drag behavior](images/shape-pointer/constraint-drag-behavior.gif)
 
 ## Handle onChangeStart, onChanged, and onChangeEnd callbacks
 
-The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) provides the [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeStart.html), [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChanged.html), and [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeEnd.html) callbacks. The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeStart.html) callback will be called when the user start dragging the pointer, the [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChanged.html) callback will be called when dragging the pointer and the [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeEnd.html) callback will be called when the user stops the pointer dragging.
+The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) provides the [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeStart.html), [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChanged.html), and [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeEnd.html) callbacks. The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeStart.html) callback will be called when the user starts dragging the pointer. The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChanged.html) callback will be called when dragging the pointer. The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeEnd.html) callback will be called when the user stops dragging the pointer.
 
+{% tabs %}
 {% highlight dart %}
 
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatefulWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
+
+  @override
+  State<LinearGaugeDemo> createState() => _LinearGaugeDemoState();
+}
+
+class _LinearGaugeDemoState extends State<LinearGaugeDemo> {
   double _value = 50;
 
   @override
@@ -361,15 +495,26 @@ The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gaug
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Animation completed callback
 
 The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onAnimationCompleted.html) callback in the [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) will be triggered when the shape pointer animation is completed. The default value of the [onAnimationCompleted](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onAnimationCompleted.html) callback is `null`.
 
+{% 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(
@@ -379,7 +524,8 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga
             markerPointers:[
               LinearShapePointer(
                 onAnimationCompleted: () {
-                  print("Shape Pointer animation is completed");
+                  // Shape Pointer animation is completed
+                  debugPrint('Shape Pointer animation is completed');
                 },
               ),
             ],
@@ -388,5 +534,7 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Flutter/linear-gauge/ticks.md b/Flutter/linear-gauge/ticks.md
index 90717f54d..adcf03cbb 100644
--- a/Flutter/linear-gauge/ticks.md
+++ b/Flutter/linear-gauge/ticks.md
@@ -2,7 +2,7 @@
 layout: post
 title: Ticks in Flutter Linear Gauge widget | Syncfusion
 description: Learn here all about adding and customizing Ticks of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
-platform: Flutter
+platform: flutter
 control: SfLinearGauge
 documentation: ug
 ---
@@ -15,12 +15,20 @@ 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:
+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. Refer to the [labels](labels.md) documentation to understand how to customize axis labels alongside ticks. 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 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.
+* [`length`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/length.html) – Specifies the length of ticks.
 
-{% 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) {
@@ -35,8 +43,9 @@ There are two types of ticks in the Flutter Linear Gauge namely major and minor
       )
     );
   }
-
+}
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize the linear gauge axis tick style](images/axis-ticks/axis-tick-style.png)
 
@@ -44,20 +53,29 @@ There are two types of ticks in the Flutter Linear Gauge namely major and minor
 
 The major ticks are generated based on the [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/interval.html) property which is documented in `Customize the interval between labels` topic. The minor ticks are calculated using the [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minorTicksPerInterval.html) property of [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html). By default, the value of this property is 1.
 
-{% 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) {
     return MaterialApp(
       home: Scaffold(
-        body: Center(             
-          child: SfLinearGauge(minorTicksPerInterval: 4)         
+        body: Center(
+          child: SfLinearGauge(minorTicksPerInterval: 4)
         )
       )
     );
   }
-
+}
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize linear gauge ticks per interval](images/axis-ticks/minor-ticks-per-interval.png)
 
@@ -65,7 +83,15 @@ The major ticks are generated based on the [`interval`](https://pub.dev/document
 
 The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/showTicks.html) property of the axis is used to enable or disable the visibility of both the major and the minor ticks. The default value of this property is true.
 
-{% 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) {
@@ -79,8 +105,9 @@ The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest
       )
     );
   }
-
+}
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize linear gauge ticks visibility](images/axis-ticks/linear-gauge-tick-visibility.png)
 
@@ -88,7 +115,15 @@ The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest
 
 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 %} 
+{% 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,8 +138,9 @@ The linear axis allows positioning the ticks either inside or outside the axis t
       )
     );
   }
-
+}
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize linear gauge ticks placement](images/axis-ticks/tick-placement.png)
 
@@ -113,7 +149,15 @@ The linear axis allows positioning the ticks either inside or outside the axis t
 
 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 %} 
+{% 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) {
@@ -125,8 +169,9 @@ The ticks can be moved near or far from the axis line using the [`tickOffset`](h
       )
     );
   }
-
+}
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize linear gauge ticks offset from axis](images/axis-ticks/customize-tick-offset.png)
 
diff --git a/Flutter/linear-gauge/widget-marker-pointer.md b/Flutter/linear-gauge/widget-marker-pointer.md
index a2510e3e1..16f9012f5 100644
--- a/Flutter/linear-gauge/widget-marker-pointer.md
+++ b/Flutter/linear-gauge/widget-marker-pointer.md
@@ -2,16 +2,25 @@
 layout: post
 title: Widget Marker Pointer in Flutter Linear Gauge widget | Syncfusion
 description: Learn here all about adding and customizing Widget Marker Pointer of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
-platform: Flutter
+platform: flutter
 control: SfLinearGauge
 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 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.
+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 a marker widget.
 
-{% 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) {
@@ -28,16 +37,27 @@ The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gau
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Initialize linear gauge for widget pointer](images/widget-pointer/default_widget_pointer.png)
 
 ## Change marker alignment
 
-The widget marker pointer's alignment can be changed by the [`markerAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/markerAlignment.html) property of [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html). The available marker positions are `start`, `end`, and `center`. 
+The widget marker pointer alignment can be changed by the [`markerAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/markerAlignment.html) property of [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html). The available marker positions are `start`, `end`, and `center`.
 
-{% 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) {
@@ -60,16 +80,27 @@ The widget marker pointer's alignment can be changed by the [`markerAlignment`](
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize size of widget pointer](images/widget-pointer/widget_alignment.png)
 
 ## Change the position
 
-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. 
+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 widget pointer `inside`, `cross`, or `outside` the axis. The following code sample demonstrates how to position the widget pointer inside the axis.
 
-{% 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) {
@@ -87,16 +118,27 @@ By default, the widget pointer is positioned `outside` the axis. This position c
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Change widget pointer position](images/widget-pointer/widget_pointer_position.png)
 
 ## 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 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. 
+In addition to positioning the widget marker pointer, it is also possible to change the offset of the widget 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. 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 widget pointer.
+
+{% tabs %}
+{% highlight dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
 
-{% highlight dart %} 
+class LinearGaugeDemo extends StatelessWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -119,8 +161,10 @@ In addition to position the widget marker pointer, it is also possible to change
       ),
     );
   }
-  
+}
+
 {% endhighlight %}
+{% endtabs %}
 
 ![Customize linear gauge bar pointer offset](images/widget-pointer/widget_pointer_offset.png)
 
@@ -132,8 +176,22 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point
 
 ### Free
 
+{% tabs %}
 {% highlight dart %}
 
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatefulWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
+
+  @override
+  State<LinearGaugeDemo> createState() => _LinearGaugeDemoState();
+}
+
+class _LinearGaugeDemoState extends State<LinearGaugeDemo> {
   double _firstPointer = 30;
   double _secondPointer = 70;
 
@@ -168,15 +226,31 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Pointers drag behavior](images/widget-pointer/free-drag-behavior.gif)
 
 ### Constrained
 
+{% tabs %}
 {% highlight dart %}
 
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatefulWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
+
+  @override
+  State<LinearGaugeDemo> createState() => _LinearGaugeDemoState();
+}
+
+class _LinearGaugeDemoState extends State<LinearGaugeDemo> {
   double _firstPointer = 30;
   double _secondPointer = 70;
 
@@ -211,17 +285,33 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ![Pointers drag behavior](images/widget-pointer/constraint-drag-behavior.gif)
 
 ## Handle onChangeStart, onChanged, and onChangeEnd callbacks
 
-The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html) provides the [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeStart.html), [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChanged.html), and [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeEnd.html) callbacks. The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeStart.html) callback will be called when the user start dragging the pointer, the [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChanged.html) callback will be called when dragging the pointer and the [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeEnd.html) callback will be called when the user stops the pointer dragging.
+The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html) provides the [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeStart.html), [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChanged.html), and [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeEnd.html) callbacks. The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeStart.html) callback will be called when the user starts dragging the pointer. The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChanged.html) callback will be called when dragging the pointer. The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeEnd.html) callback will be called when the user stops dragging the pointer.
 
+{% tabs %}
 {% highlight dart %}
 
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
+
+void main() => runApp(const LinearGaugeDemo());
+
+class LinearGaugeDemo extends StatefulWidget {
+  const LinearGaugeDemo({Key? key}) : super(key: key);
+
+  @override
+  State<LinearGaugeDemo> createState() => _LinearGaugeDemoState();
+}
+
+class _LinearGaugeDemoState extends State<LinearGaugeDemo> {
   double _value = 50;
 
   @override
@@ -248,15 +338,26 @@ The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gau
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Animation completed callback
 
 The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onAnimationCompleted.html) callback in the [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html) will be triggered when the widget pointer animation is completed. The default value of the [onAnimationCompleted](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onAnimationCompleted.html) callback is `null`.
 
+{% 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(
@@ -266,7 +367,8 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga
             markerPointers:[
               LinearWidgetPointer(
                 onAnimationCompleted: () {
-                  print("Widget Pointer animation is completed");
+                  // Widget Pointer animation is completed
+                  debugPrint('Widget Pointer animation is completed');
                 },
               ),
             ],
@@ -275,5 +377,7 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga
       ),
     );
   }
+}
 
 {% endhighlight %}
+{% endtabs %}