Shape Marker Pointer in Fluter Linear Gauge (SfLinearGauge)

23 Apr 20218 minutes to read

The LinearShapePointer in SfLinearGauge 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.

  • dart
  • @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Center(
              child: SfLinearGauge(
                markerPointers: [LinearShapePointer(value: 50)]
              ),
            ),
          ),
        );
      }

    Initialize linear gauge for shape pointer

    Change the size

    The size of the marker pointer can be changed by the height and width properties of LinearShapePointer. The following code sample demonstrates how to change the size of a shape pointer.

  • 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)
              ]),
            ),
          ),
        );
      }

    Set size of linear gauge shape pointer

    Customize color

    The color of the shape pointer can be changed by the color property. The following code example demonstrates the same.

  • dart
  • @override
      Widget build(BuildContext context) {
        return MaterialApp(
          color: Colors.white,
          home: Scaffold(
            body: Center(
              child: SfLinearGauge(markerPointers: [
                LinearShapePointer(value: 50, color: Colors.redAccent)
              ]),
            ),
          ),
        );

    Change shape pointer color

    Customize the border

    The border can be customized by the borderColor and borderWidth properties of the LinearShapePointer.

  • 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)
              ]),
            ),
          ),
        );
      }

    Customize shape pointer border

    Customize the elevation

    The elevation can be customized by the elevation and elevationColor properties.

  • 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)
                ]),
              ),
            ),
          ),
        );
      }

    Change shape pointer elevation

    Change marker alignment

    The marker pointer alignment can be changed by the markerAlignment property of LinearShapePointer.The available marker pointer alignments are start, end, and center.

  • dart
  • @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Center(
              child: SfLinearGauge(axisTrackExtent: 30, markerPointers: [
                LinearShapePointer(
                    value: 0, markerAlignment: LinearMarkerAlignment.start)
              ]),
            ),
          ),
        );
      }

    Change shape pointer alignment

    Customize position

    By default, the shape pointer is positioned outside the axis. This position can be changed by the position property of a LinearShapePointer. 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.

  • dart
  • @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: Center(
              child: SfLinearGauge(markerPointers: [
                LinearShapePointer(
                    value: 55,
                    shapeType: LinearShapePointerType.triangle,
                    position: LinearElementPosition.inside)
              ]),
            ),
          ),
        );
      }

    Change shape pointer position

    Customize offset

    In addition to position the shape pointer, it is also possible to change the offset of the shape pointer. The offset is the distance from the axis and it cannot be negative and The cross positioned elements will not get affected by the offset value. The following code sample demonstrates how to change the offset value of the shape pointer.

  • 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)
              ]),
            ),
          ),
        );
      }

    Customize linear gauge bar pointer offset