diff --git a/Flutter/linear-gauge/bar-pointer.md b/Flutter/linear-gauge/bar-pointer.md new file mode 100644 index 0000000..ec76949 --- /dev/null +++ b/Flutter/linear-gauge/bar-pointer.md @@ -0,0 +1,364 @@ +--- +layout: post +title: Bar Pointer in Flutter Linear Gauge widget | Syncfusion +description: Learn here all about adding and customizing Bar Pointer of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more. +platform: flutter +control: SfLinearGauge +documentation: ug +--- + +# Bar Pointer in Fluter Linear Gauge (SfLinearGauge) + +A bar pointer is an accenting line or shaded background that can be placed on a Linear Gauge to mark any current value in the axis track. The bar pointers always start from the minimum value of the axis and end with the specified value. So the [`value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/value.html) property is a required parameter for creating a bar pointer. + +## Default bar pointer + +The following code sample creates a default bar pointer with the value 50. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [ + LinearBarPointer( + value: 50 + ) + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![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. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + color: Colors.white, + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [ + LinearBarPointer( + value: 50, + thickness: 10 + ) + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![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`. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + color: Colors.white, + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [ + LinearBarPointer( + value: 50, + // Changed the thickness to make the curve visible + thickness: 10, + //Updated the edge style as curve at end position + edgeStyle: LinearEdgeStyle.endCurve + ) + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![Change the bar pointer edge style](images/bar-pointer/edge_style.png) + +## Customize the position + +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. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [ + LinearBarPointer( + value: 50, + position: LinearElementPosition.inside + ) + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![Customize linear gauge for bar pointer position](images/bar-pointer/bar_pointer_change_position.png) + +## Customize the offset + +In addition to position the bar pointer, it is also possible to change the offset of the bar pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/offset.html) is the distance from the axis and it cannot be negative and the cross positioned elements will not get affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/offset.html) value. The following code sample demonstrates how to change the offset value of the bar pointer. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + color: Colors.white, + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [ + LinearBarPointer( + value: 50, + position: LinearElementPosition.outside, + offset: 5 + ) + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![Customize linear gauge bar pointer offset](images/bar-pointer/bar_pointer_offset.png) + +## 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. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + color: Colors.white, + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [ + LinearBarPointer( + value: 50, + //Change the color + color: Colors.redAccent + ) + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![Apply color to bar pointer](images/bar-pointer/bar_color.png) + +## Apply radial gradient + +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. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + color: Colors.white, + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [ + LinearBarPointer( + value: 100, + //Apply radial gradient + shaderCallback: (bounds) => RadialGradient( + radius: 30, + colors: [ + Colors.redAccent, + Colors.blueAccent, + Colors.greenAccent, + ], + ).createShader(bounds)) + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![Apply radial gradient to bar pointer](images/bar-pointer/radial_gradient_bar.png) + +## Apply linear gradient + +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. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + color: Colors.white, + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [ + LinearBarPointer( + value: 100, + thickness: 10, + //Apply linear gradient + shaderCallback: (bounds) => LinearGradient( + begin: Alignment.centerLeft, + end: Alignment.centerRight, + colors: [Colors.redAccent, Colors.blueAccent]) + .createShader(bounds) + ), + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![Apply linear gradient to bar pointer](images/bar-pointer/linear_gradient_bar.png) + +## Apply sweep gradient + +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. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + color: Colors.white, + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [ + LinearBarPointer( + value: 100, + thickness: 10, + //Apply linear gradient + shaderCallback: (bounds) => SweepGradient( + startAngle: 0.1, + endAngle: 0.2, + colors: [ + Colors.blueAccent, + Colors.greenAccent, + Colors.orangeAccent, + ], + tileMode: TileMode.mirror, + center: Alignment.bottomRight, + ).createShader(bounds)) + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![Apply sweep gradient to bar pointer](images/bar-pointer/sweep_gradient_bar.png) + + +## Customize border + +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. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [ + LinearBarPointer( + value: 80, + thickness: 10, + borderWidth: 3, + borderColor: Colors.cyanAccent) + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![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`](). The bar pointers by default will overlap each other. So while adding a bar pointer offset value is needed to be specified. The below code example demonstrates adding two bar pointer with different offset + +{% highlight dart %} + +@override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [ + LinearBarPointer( + value: 20, + position: LinearElementPosition.outside + ), + LinearBarPointer( + value: 40, + // Setting offset to move the bar from previos one + offset: 10, + position: LinearElementPosition.outside + ), + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![Add multiple bar pointers in a linear gauge](images/bar-pointer/multiple_bar_pointer.PNG) \ No newline at end of file diff --git a/Flutter/linear-gauge/interaction.md b/Flutter/linear-gauge/interaction.md new file mode 100644 index 0000000..acc739f --- /dev/null +++ b/Flutter/linear-gauge/interaction.md @@ -0,0 +1,168 @@ +--- +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 +control: SfLinearGauge +documentation: ug +--- + +# Interaction in Fluter Linear Gauge (SfLinearGauge) + +The shape and widget marker pointers in a Linear Gauge can be moved from one value to another by swiping or drag gestures. + +## Interaction with marker pointers + +The [`onValueChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onValueChanged.html) call back is used to change the value of the marker pointer at run-time. + +The following code sample demonstrates how to update simple marker pointer value based on swipe or drag gestures. + +{% highlight dart %} + +double shapePointerValue = 25; + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + markerPointers: [ + LinearShapePointer( + value: shapePointerValue, + //Changes the value of shape pointer based on interaction + onValueChanged: (value) { + setState(() { + shapePointerValue = value; + }); + }, + color: Colors.blue[800]), + ], + ), + ), + ), + ); + } + +{% endhighlight %} + +![Simple pointer interaction in linear gauge](images/interaction/simple_interaction.gif) + +The following code sample demonstrates how to update multiple marker pointer values based on swipe or drag gesture. + +{% highlight dart %} + + double shapePointerValue = 85; + double barPointerValue = 85; + double widgetPointerValue = 26; + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Column( + children: [ + SfLinearGauge( + barPointers: [LinearBarPointer(value: shapePointerValue)], + markerPointers: [ + LinearShapePointer( + value: shapePointerValue, + onValueChanged: (value) { + setState(() { + shapePointerValue = value; + }); + }, + color: Colors.blue[800] + ), + ], + ), + + SizedBox(height: 30), + SfLinearGauge( + barPointers: [LinearBarPointer(value: barPointerValue)], + markerPointers: [ + LinearWidgetPointer( + position: LinearElementPosition.outside, + value: barPointerValue, + onValueChanged: (value) { + setState(() { + barPointerValue = value; + }); + }, + child: Container( + height: 20, + width: 20, + decoration: BoxDecoration( + color: Colors.orange[500], shape: BoxShape.circle) + ), + ), + ], + ), + SizedBox(height: 25), + SfLinearGauge( + axisTrackStyle: LinearAxisTrackStyle( + thickness: 10 + ), + markerPointers: [ + LinearShapePointer( + value: widgetPointerValue, + shapeType: LinearShapePointerType.invertedTriangle, + position: LinearElementPosition.cross, + onValueChanged: (value) { + setState(() { + widgetPointerValue = value; + }); + }, + color: widgetPointerValue < 40 + ? Colors.green + : widgetPointerValue < 80 + ? Colors.orange + : Colors.red + ), + LinearWidgetPointer( + value: widgetPointerValue, + onValueChanged: (value) { + setState(() { + widgetPointerValue = value; + }); + }, + child: Container( + width: 55, + height: 45, + child: Center( + child: Text( + widgetPointerValue.toStringAsFixed(0), + style: TextStyle( + fontWeight: FontWeight.w500, + fontSize: 20, + color: widgetPointerValue < 40 + ? Colors.green + : widgetPointerValue < 80 + ? Colors.orange + : Colors.red + ), + ), + ), + ), + position: LinearElementPosition.outside, + ), + ], + ranges: [ + LinearGaugeRange( + endValue: widgetPointerValue, + color: widgetPointerValue < 40 + ? Colors.green + : widgetPointerValue < 80 + ? Colors.orange + : Colors.red, + position: LinearElementPosition.cross) + ], + ), + ], + mainAxisAlignment: MainAxisAlignment.center + )), + ) +); + +{% endhighlight %} + +![Shape pointer interaction in linear gauge](images/interaction/interaction.gif) \ No newline at end of file diff --git a/Flutter/linear-gauge/shape-marker-pointer.md b/Flutter/linear-gauge/shape-marker-pointer.md new file mode 100644 index 0000000..ffb872a --- /dev/null +++ b/Flutter/linear-gauge/shape-marker-pointer.md @@ -0,0 +1,219 @@ +--- +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 +control: SfLinearGauge +documentation: ug +--- + +# Shape Marker Pointer in Fluter Linear Gauge (SfLinearGauge) + +The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) have the following pre-defined shapes to mark a specific value. The default shape pointer is `invertedTriangle`. + +1. `Triangle` +2. `Inverted Triangle` +3. `Circle` +4. `Diamond` +5. `Rectangle` + +The following is the default appearance of default shape pointer. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + markerPointers: [LinearShapePointer(value: 50)] + ), + ), + ), + ); + } + +{% endhighlight %} + +![Initialize linear gauge for shape pointer](images/shape-pointer/default_shape_pointer.png) + +## Change the size + +The size of the marker pointer can be changed by the [`height`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/height.html) and [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/width.html) properties of [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html). The following code sample demonstrates how to change the size of a shape pointer. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + color: Colors.white, + home: Scaffold( + body: Center( + child: SfLinearGauge(markerPointers: [ + LinearShapePointer(value: 50, height: 25, width: 25) + ]), + ), + ), + ); + } + +{% endhighlight %} + +![Set size of linear gauge shape pointer](images/shape-pointer/shape_pointer_size.png) + +## Customize color + +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 %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + color: Colors.white, + home: Scaffold( + body: Center( + child: SfLinearGauge(markerPointers: [ + LinearShapePointer(value: 50, color: Colors.redAccent) + ]), + ), + ), + ); + +{% endhighlight %} + +![Change shape pointer color](images/shape-pointer/shape_pointer_color.png) + +## Customize the border + +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 %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + color: Colors.white, + home: Scaffold( + body: Center( + child: SfLinearGauge(markerPointers: [ + LinearShapePointer( + value: 50, borderColor: Colors.redAccent, borderWidth: 2) + ]), + ), + ), + ); + } + +{% endhighlight %} + +![Customize shape pointer border](images/shape-pointer/shape_border.png) + +## Customize the elevation + +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 %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + color: Colors.white, + home: Scaffold( + body: Center( + child: Container( + color: Colors.white, + child: SfLinearGauge(markerPointers: [ + LinearShapePointer( + value: 50, + shapeType: LinearShapePointerType.circle, + elevation: 5, + elevationColor: Colors.blueGrey) + ]), + ), + ), + ), + ); + } + +{% endhighlight %} + +![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`. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge(axisTrackExtent: 30, markerPointers: [ + LinearShapePointer( + value: 0, markerAlignment: LinearMarkerAlignment.start) + ]), + ), + ), + ); + } + +{% endhighlight %} + +![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. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge(markerPointers: [ + LinearShapePointer( + value: 55, + shapeType: LinearShapePointerType.triangle, + position: LinearElementPosition.inside) + ]), + ), + ), + ); + } + +{% endhighlight %} + +![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. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge(markerPointers: [ + LinearShapePointer( + value: 50, + offset: 25, + shapeType: LinearShapePointerType.triangle, + position: LinearElementPosition.inside) + ]), + ), + ), + ); + } + +{% endhighlight %} + +![Customize linear gauge bar pointer offset](images/shape-pointer/shape_pointer_offset.png) diff --git a/Flutter/linear-gauge/widget-marker-pointer.md b/Flutter/linear-gauge/widget-marker-pointer.md new file mode 100644 index 0000000..8579bd1 --- /dev/null +++ b/Flutter/linear-gauge/widget-marker-pointer.md @@ -0,0 +1,120 @@ +--- +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 +control: SfLinearGauge +documentation: ug +--- + +# Widget Marker Pointer in Fluter Linear Gauge (SfLinearGauge) + +The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/LinearWidgetPointer.html) in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/SfLinearGauge.html) allows to use any Flutter widget as marker pointer. The following code sample uses a [`container`](https://api.flutter.dev/flutter/widgets/Container-class.html) as marker widget. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge(markerPointers: [ + LinearWidgetPointer( + value: 50, + child: Container(height: 14, width: 14, color: Colors.redAccent), + ), + ]), + ), + ), + ); + } + +{% endhighlight %} + +![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`. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge(axisTrackExtent: 30, markerPointers: [ + LinearWidgetPointer( + value: 0, + markerAlignment: LinearMarkerAlignment.center, + child: + Container(height: 14, width: 14, color: Colors.redAccent)), + ]), + ), + ), + ); + } + +{% endhighlight %} + +![Customize size of widget pointer](images/widget-pointer/widget_alignment.png) + +## Change the position + +By default, the shape pointer is positioned `outside` the axis. This position can be changed by the [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/position.html) property of a [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/position.html). It is possible to position the shape pointer `inside`, `cross`, or `outside` the axis. The following code sample demonstrates how to change the shape pointer position to `inside` the axis. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge(markerPointers: [ + LinearWidgetPointer( + value: 55, + position: LinearElementPosition.inside, + child: Container(height: 14, width: 14, color: Colors.redAccent), + ), + ]), + ), + ), + ); + } + +{% endhighlight %} + +![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 get affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/offset.html) value. The following code sample demonstrates how to change the offset value of the shape pointer. + +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge(markerPointers: [ + LinearWidgetPointer( + value: 50, + offset: 25, + position: LinearElementPosition.inside, + child: Container( + height: 14, + width: 14, + color: Colors.redAccent + ), + ), + ]), + ), + ), + ); + } + +{% endhighlight %} + +![Customize linear gauge bar pointer offset](images/widget-pointer/widget_pointer_offset.png) \ No newline at end of file