Configure PDF measurements in Flutter

Bridging of measurement configuration in Nutrient Flutter SDK was introduced in version 3.6.0, adding support to store multiple scales in a document and improving the calibration tool. To measure distance and area in your app, contact the Sales team to add the Measurement Tools component to your license, or run the SDK in trial mode.

Configure measurements in one of the following ways:

The configuration for scale and precision is stored in a document, and it persists when you close and reopen the document on any device. The configuration for snapping isn’t stored in the document, and it persists only when you close and reopen the document on your own device.

The snapping setting persists over app restarts, but it isn’t stored in the document like scale and precision are.

Configuring scale and precision

The scale determines the size of an object on a page relative to the size of a corresponding real-world object. For example, a document shows the floor plan of a house where one centimeter on the floor plan represents two meters in the house.

A scale is stored within a MeasurementValueConfiguration, which also includes an optional name for the scale and the precision.

The precision determines the number of decimal places or fractions displayed in the measured value. You can select fractional precision for inches, feet, and yards. The fractional value in the measurement displays fractions of an inch.

There can be multiple scales stored in the document.

Configure scale in one of the following ways:

Configuring scale and precision using the built-in UI

You can configure the precision of each measurement individually. Configuring the precision on one measurement sets the initial precision value for all future measurements.

You can configure the scale and precision of each measurement individually or make multiple annotations use the same one. Configuring the scale and precision on one measurement sets the initial scale value for all future measurements. The measurement displays a maximum of four decimal places.

For more detailed instructions on configuring the scale and precision using the built-in UI, refer to the corresponding platform-specific guides:

Configuring scale and precision programmatically

To configure the scale and precision programmatically, use the MeasurementValueConfiguration class. This allows setting the scale using the MeasurementScale class and setting the precision using the MeasurementPrecision enum. It also has an optional name parameter for the scale. Setting the precision only affects the visible value label.

The example below configures the scale so that one centimeter in a floor plan document represents two meters in a house and configures precision so that four decimal values are displayed:

var scale = MeasurementScale(
        unitFrom: UnitFrom.cm,
        valueFrom: 1.0,
        unitTo: UnitTo.m,
        valueTo: 2);

    var precision = MeasurementPrecision.fourDP;

    var measurementValueConfiguration = MeasurementValueConfiguration(
        name: 'Custom Scale', scale: scale, precision: precision);

After setting up the MeasurementValueConfiguration, you can then incorporate it into the configuration object as follows:

PspdfkitWidget(
    documentPath: widget.documentPath,
       webConfiguration: PdfWebConfiguration(
        toolbarItems: [
        ...Pspdfkit.defaultWebToolbarItems,
        PspdfkitWebToolbarItem(
            type: PspdfkitWebToolbarItemType.measurements)
        ]));

Disabling snapping

By default, Nutrient snaps measurements to existing drawings on a page. This helps you make precise measurements. A built-in magnifier displays the zoomed-in view of the currently drawn measurement.

To disable snapping in a document using the built-in UI, check out the corresponding platform-specific guides:

Enabling and disabling measurement tools

By default, measurement tools are enabled on iOS and Android if your license includes the Measurement Tools component. However, on Web, measurement tools are disabled by default. You can enable or disable measurement tools using the PspdfkitWidget’s configuration property as shown below:

PspdfkitWidget(
    documentPath: widget.documentPath,
    configuration: PdfConfiguration(
        enableMeasurementTools: true,
        webConfiguration: PdfWebConfiguration(
        toolbarItems: [
        ...Pspdfkit.defaultWebToolbarItems,
        PspdfkitWebToolbarItem(
            type: PspdfkitWebToolbarItemType.measurements)
        ])
    ));

To remove measurement tools from the annotation toolbar, refer to the guide on customizing the annotation toolbar in Flutter.