Widget Marker Pointer in Flutter Linear Gauge (SfLinearGauge)

18 Nov 201817 minutes to read

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

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: 50,
              child: Container(height: 14, width: 14, color: Colors.redAccent),
            ),
          ]),
        ),
      ),
    );
  }
}

Initialize linear gauge for widget pointer

Change marker alignment

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

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(
            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 widget pointer is positioned outside the axis. This position can be changed by the position property of a LinearWidgetPointer. 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.

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: 55,
              position: LinearElementPosition.inside,
              child: Container(height: 14, width: 14, color: Colors.redAccent),
            ),
          ]),
        ),
      ),
    );
  }
}

Change widget pointer position

Change the offset

In addition to positioning the widget marker pointer, it is also possible to change the offset of the widget pointer. The offset is the distance from the axis and it cannot be negative. Cross-positioned elements will not be affected by the offset value. The following code sample demonstrates how to change the offset value of the widget pointer.

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: 50,
              offset: 25,
              position: LinearElementPosition.inside,
              child: Container(
                height: 14,
                width: 14,
                color: Colors.redAccent
              ),
            ),  
          ]),
        ),
      ),
    );
  }
}

Customize linear gauge bar pointer offset

Drag behavior

You can drag the pointers freely to any position when adding multiple pointers by setting the dragBehavior property to LinearMarkerDragBehavior.free.

The LinearMarkerDragBehavior.constrained can be used to limit the active pointer dragging beyond the other pointers.

Free

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;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfLinearGauge(
        markerPointers: [
          LinearWidgetPointer(
            value: _firstPointer,
            dragBehavior: LinearMarkerDragBehavior.free,
            onChanged: (double newValue) {
              setState(() {
                _firstPointer = newValue;
              });
            },
            position: LinearElementPosition.outside,
            child: Icon(Icons.location_pin, color: Colors.blue, size: 30),
          ),
          LinearWidgetPointer(
            value: _secondPointer,
            position: LinearElementPosition.outside,
            dragBehavior: LinearMarkerDragBehavior.free,
            onChanged: (double newValue) {
              setState(() {
                _secondPointer = newValue;
              });
            },
            child: Icon(Icons.location_pin, color: Colors.red, size: 30),
          ),
        ],
      ),
    );
  }
}

Pointers drag behavior

Constrained

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;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfLinearGauge(
        markerPointers: [
          LinearWidgetPointer(
            value: _firstPointer,
            dragBehavior: LinearMarkerDragBehavior.constrained,
            onChanged: (double newValue) {
              setState(() {
                _firstPointer = newValue;
              });
            },
            position: LinearElementPosition.outside,
            child: Icon(Icons.location_pin, color: Colors.blue, size: 30),
          ),
          LinearWidgetPointer(
            value: _secondPointer,
            position: LinearElementPosition.outside,
            dragBehavior: LinearMarkerDragBehavior.constrained,
            onChanged: (double newValue) {
              setState(() {
                _secondPointer = newValue;
              });
            },
            child: Icon(Icons.location_pin, color: Colors.red, size: 30),
          ),
        ],
      ),
    );
  }
}

Pointers drag behavior

Handle onChangeStart, onChanged, and onChangeEnd callbacks

The LinearWidgetPointer provides the onChangeStart, onChanged, and onChangeEnd callbacks. The onChangeStart callback will be called when the user starts dragging the pointer. The onChanged callback will be called when dragging the pointer. The onChangeEnd callback will be called when the user stops dragging the pointer.

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
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfLinearGauge(
        markerPointers: [
          LinearWidgetPointer(
            value: _value,
            onChangeStart: (double newValue) {
              _value = newValue;
            },
            onChanged: (double newValue) {
              setState(() {
                _value = newValue;
              });
            },
            onChangeEnd: (double newValue) {
              _value = newValue;
            },
            child: Container(height: 14, width: 14, color: Colors.redAccent),
          ),
        ],
      ),
    );
  }
}

Animation completed callback

The onAnimationCompleted callback in the LinearWidgetPointer will be triggered when the widget pointer animation is completed. The default value of the onAnimationCompleted callback is null.

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(
                onAnimationCompleted: () {
                  // Widget Pointer animation is completed
                  debugPrint('Widget Pointer animation is completed');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}