How to create a height calculator using Flutter Linear Gauge?

This article demonstrates how to create a height calculator using the Flutter Linear Gauge widget.

To achieve the desired visualization of height calculator using Linear Gauge utilizes the Syncfusion® Flutter Gauges package. Here, the vertical linear gauge will be acting as a height calculator which allows us to visually display the height of an object. The gauge features custom labels, colors, and marker pointers, making it both visually appealing and interactive.

The following steps outline how to create a height calculator using Linear Gauge:

Step: 1 Importing packages

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

Step: 2 Initialize required values

1. _pointerValue: The initial height value set to 130 cm.
2. _maximumLevel: Defines maximum range of the linear gauge (200cm).
3. _generateLabels: Method to create a custom list of labels for the linear gauge using LinearAxisLabel.

  double _pointerValue = 130;
  final double _maximumLevel = 200;

  List<LinearAxisLabel> _generateLabels() {
    return [
      const LinearAxisLabel(text: '0 cm', value: 0),
      const LinearAxisLabel(text: '25 cm', value: 25),
      const LinearAxisLabel(text: '50 cm', value: 50),
      const LinearAxisLabel(text: '75 cm', value: 75),
      const LinearAxisLabel(text: '100 cm', value: 100),
      const LinearAxisLabel(text: '125 cm', value: 125),
      const LinearAxisLabel(text: '150 cm', value: 150),
      const LinearAxisLabel(text: '175 cm', value: 175),
      const LinearAxisLabel(text: '200 cm', value: 200),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      margin: const EdgeInsets.all(150),
      child: _buildHeightCalculator(context),
    );
  }

Step: 3 Building the Linear Gauge for height calculator

SfLinearGauge is a widget with orientation property which sets the gauge orientation to vertical (Default horizontal), maximum property used to set maximum(i.e., end value of guage) value of the linear gauge, tickPosition and labelPosition used to position the ticks and labels outside the gauge.

You can also specify the minor ticks count per interval in an axis with the help of minorTicksPerInterval property, interval which is used to set major intervals. We can modify the labels for the gauge using onGenerateLabels callback.

Axis Track Style and Marker Pointers

1. axisTrackStyle: Customizes the style of the axis line.

2. markerPointers: Adds a list of gauge shape and widget pointer to the linear gauge.

   • LinearShapePointer: Which creates a shape marker pointer for linear axis.
   • LinearWidgetPointer: Which creates a widget marker pointer.

Gauge Ranges

1. ranges: Defines visual ranges on the gauge.
2. LinearGaugeRange: Which is used to customize linear gauge range.

  Widget _buildHeightCalculator(BuildContext context) {
    return SfLinearGauge(
      orientation: LinearGaugeOrientation.vertical,
      maximum: _maximumLevel,
      tickPosition: LinearElementPosition.outside,
      labelPosition: LinearLabelPosition.outside,
      minorTicksPerInterval: 5,
      interval: 25,
      onGenerateLabels: _generateLabels,
      axisTrackStyle: const LinearAxisTrackStyle(color: Color(0xffBC5A94)),
      markerPointers: <LinearMarkerPointer>[
        LinearShapePointer(
          value: _pointerValue,
          enableAnimation: false,
          onChanged: (dynamic value) {
            setState(() {
              _pointerValue = value as double;
            });
          },
          shapeType: LinearShapePointerType.rectangle,
          color: const Color(0xff134B70),
          height: 2,
          width: 350,
        ),
        _buildLinearWidgetPointer(
          value: _pointerValue,
          offset: 0,
          child: SizedBox(
            width: 24,
            height: 16,
            child: Image.asset(
              'asset/rectangle_pointer.png',
              color: const Color(0xff134B70),
            ),
          ),
        ),
        _buildLinearWidgetPointer(
          value: _pointerValue,
          offset: 350,
          position: LinearElementPosition.outside,
          child: Container(
            width: 60,
            height: 25,
            decoration: BoxDecoration(
              color: const Color(0xffFFFFFF),
              boxShadow: const <BoxShadow>[
                BoxShadow(
                  color: Colors.grey,
                  offset: Offset(0.0, 1.0),
                  blurRadius: 6.0,
                ),
              ],
              borderRadius: BorderRadius.circular(4),
            ),
            child: Center(
              child: Text(
                '${_pointerValue.toStringAsFixed(0)}cm',
              ),
            ),
          ),
        ),
      ],
      ranges: <LinearGaugeRange>[
        LinearGaugeRange(
          endValue: _pointerValue,
          startWidth: 400,
          midWidth: 400,
          endWidth: 450,
          color: Colors.transparent,
          child: Image.asset(
            width: 30,
            height: 60,
            'asset/person_walking.png',
            fit: BoxFit.fitHeight,
          ),
        ),
      ],
    );
  }

  LinearWidgetPointer _buildLinearWidgetPointer({
    required double value,
    required Widget child,
    LinearElementPosition position = LinearElementPosition.cross,
    double offset = 0,
  }) {
    return LinearWidgetPointer(
      value: value,
      enableAnimation: false,
      onChanged: (dynamic value) {
        setState(() {
          _pointerValue = value as double;
        });
      },
      offset: offset,
      position: position,
      child: child,
    );
  }

By following these steps, you can create a functional and visually appealing height calculator using Flutter and the Syncfusion® Flutter Gauges package:

View the sample in GitHub.

Conclusion

I hope you enjoyed learning about how to create a height calculator using Flutter Linear Gauge.

You can refer to our Flutter Linear Gauge tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!