Widget Marker Pointer in Fluter Linear Gauge (SfLinearGauge)

23 Apr 20215 minutes to read

The LinearWidgetPointer in SfLinearGauge allows to use any Flutter widget as marker pointer. The following code sample uses a container as marker widget.

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

    Initialize linear gauge for widget pointer

    Change marker alignment

    The widget marker pointer’s alignment can be changed by the markerAlignment property of LinearWidgetPointer. The available marker positions are start, end, and center.

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

    Customize size of widget pointer

    Change the position

    By default, the shape pointer is positioned outside the axis. This position can be changed by the position property of a LinearWidgetPointer. 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: [
                LinearWidgetPointer(
                  value: 55,
                  position: LinearElementPosition.inside,
                  child: Container(height: 14, width: 14, color: Colors.redAccent),
                ),
              ]),
            ),
          ),
        );
      }

    Change widget pointer position

    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 is the distance from the axis and it cannot be negative. 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: [
                LinearWidgetPointer(
                  value: 50,
                  offset: 25,
                  position: LinearElementPosition.inside,
                  child: Container(
                    height: 14,
                    width: 14,
                    color: Colors.redAccent
                  ),
                ),  
              ]),
            ),
          ),
        );
      }

    Customize linear gauge bar pointer offset