document_measure 0.0.1+2

Flutter Android iOS

This package lets you measure distances in documents. The main use will probabily be technical documents and floorplans, but you are welcome to experiment with it.

document_measure #

Pub Version GitHub

This plugin provides a widget in which you can display another widget, for example, a floor plan of your flat in an image and measure distances between points in your flat.

Showcase of Features

Getting Started #

To use this plugin simply include document_measure in your pubspec.yaml and then include it in your code

include: 'package:document_measure/document_measure.dart'

Usage Overview #

Functional Usage #

Using all defaults #

Widget build(BuildContext context) {
  return ...
    Measurements(
      child: Image.asset(
        "assets/images/your-document.png",
      ),
    ),
}

This will assume that the paper size of your-document.png is A4 (210mm x 297mm) and the content is on a scale of 1:1. You can place points, move them and see the distance between them in the view.

Example with defaults

Setting custom paper size, scale and unit of measurement #

Widget build(BuildContext context) {
  return ...
    Measurements(
      child: Image.asset(
        "assets/images/your-document.png",
      ),
      measurementInformation: MeasurementInformation(
        scale: 1 / 50.0,
        documentWidthInLengthUnits: Millimeter(448),
        documentHeightInLengthUnits: Millimeter(449),
        targetLengthUnit: Meter.asUnit(),
      ),
    ),
}

your-document.png should now contain a document that is 11in x 17in and has a scale of 1:2. The distances will be displayed in foot. You can pick a measurement unit by setting targetLengthUnit to
Meter.asUnit() for meters,
Millimeter.asUnit() for millimeters,
Inch.asUnit() for inches and
Foot.asUnit() for foot.

The document size can also be described with the above units by using the default constructor with the amount.
Meter(x.y) for meter
Millimeter(x.y) for millimeter
Inch(x.y) for inches
Foot(x.y) for foot

Example with custom size

Toggle between measuring and movement #

You can switch between setting points for measuring and zooming/moving by changing the measure parameter.

bool measure = true;

void toggle() {
  setState(() {
    measure = !measure;
  });
}

Widget build(BuildContext context) {
  return ...
    Measurements(
      child: Image.asset(
        "assets/images/your-document.png",
      ),
      measure: measure,
    ),
}

Example with panning and zooming

Show and hide distances in the widget #

As with the measure parameter, you can also toggle the distances on the lines between the points on and off.

bool showDistances = true;

void toggle() {
  setState(() {
    showDistances = !showDistances;
  });
}

Widget build(BuildContext context) {
  return ...
    Measurements(
      child: Image.asset(
        "assets/images/your-document.png",
      ),
      showDistanceOnLine: showDistances,
    ),
}

Example with and without distances

Getting the distances in code #

Since not seeing the distances defeats the purpose of the widget you can still access them by passing a MeasurementController which lets you access the distances between the points and the tolerance of the measurement. You can listen to the stream of measurements or access the distances and tolerance separately through the MeasurementController.

MeasurementController controller = MeasurementController();

void setupController() {
  controller.measurements.listen((measurement) {
    print("Distances: ${measurement.distances}");
    print("Tolerance: ${measurement.tolerance}");
  });
}

void accessValues() {
  final distances = controller.distances;
  final tolerance = controller.tolerance;

  ...
}

Widget build(BuildContext context) {
  return ...
    Measurements(
      child: Image.asset(
        "assets/images/your-document.png",
      ),
      controller: controller,
    ),
}

Display your drawing in life-size #

For smaller parts, you can use the MeasurementController to zoom your document to life-size. (The maximal magnification is 10, which might not be sufficient for larger documents or bigger scales) Simply call MeasurementController::zoomToLifeSize to set the magnification accordingly and MeasurementController::resetZoom to reset the magnification to 1.

MeasurementController controller = MeasurementController();

void zoomToLifeSize() {
  controller.zoomToLifeSize();
}

void resetZoom() {
  controller.resetZoom();
}

Widget build(BuildContext context) {
  return ...
    Measurements(
      child: Image.asset(
        "assets/images/your-document.png",
      ),
      controller: controller,
    ),
}

Example with life-size

Customizability #

Deleting points #

By default, an icon will be displayed at the bottom centre which will remove a point when it is being dragged into the icon and released there. But you can also set your own custom widget by passing a widget to the deleteChild parameter and align it by setting deleteChildAlignment accordingly.

Widget build(BuildContext context) {
  return ...
    Measurements(
      child: Image.asset(
        "assets/images/your-document.png",
      ),
      deleteChild: Container(
        width: 100,
        height: 150,
        color: Color.fromARGB(100, 200, 0, 0),
      ),
      deleteChildAlignment: Alignment.topCenter,
    ),
}

Example with custom delete region

Customizing the magnification glass #

When you place your finger on the screen to set a point you hide the position with your finger, too bad, but that's why we have a magnification glass build in and you can even customize it. Change the magnification factor by setting magnificationZoomFactor and to change the appearance of the magnification glass set magnificationStyle with your style.

Widget build(BuildContext context) {
  return ...
    Measurements(
      child: Image.asset(
        "assets/images/your-document.png",
      ),
      magnificationZoomFactor: 5.0,
      magnificationStyle: MagnificationStyle(
        magnificationColor: Color.fromARGB(255, 200, 50, 80),
        magnificationRadius: 100,
        outerCircleThickness: 5,
        crossHairThickness: 2,
      ),
    ),
}

Example with custom magnification glass

Customize the shown distances #

You can change how many decimal places you want to be displayed on the lines, whether the tolerance should be shown and which color the distance should the drawn in.

Widget build(BuildContext context) {
  return ...
    Measurements(
      child: Image.asset(
        "assets/images/your-document.png",
      ),
      distanceStyle: DistanceStyle(
        textColor: Color.fromARGB(255, 200, 50, 80),
        numDecimalPlaces: 4,
        showTolerance: true,
      ),
    ),
}

Example with custom distances

Customize the points and lines #

The size and color of the points and lines can be changed with the pointStyle parameter. You can choose between a solid line by using

SolidLine(double lineWidth, Color lineColor)

and a dashed line by using

DashedLine(double dashWidth, double dashLength, double dashDistance, Color lineColor)
Widget build(BuildContext context) {
  return ...
    Measurements(
      child: Image.asset(
        "assets/images/your-document.png",
      ),
      pointStyle: PointStyle(
        dotColor: Color.fromARGB(255, 200, 50, 80),
        dotRadius: 10,
        lineType: DashedLine(
          dashWidth: 4,
          dashLength: 10,
          dashDistance: 2,
          lineColor: Color.fromARGB(255, 50, 200, 80),
        ),
      ),
    ),
}

Example with custom lines

License #

This project is licensed under the MIT-License.

5
likes
90
pub points
31%
popularity

This package lets you measure distances in documents. The main use will probabily be technical documents and floorplans, but you are welcome to experiment with it.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

c.navolskyi@gmail.com

License

MIT (LICENSE)

Dependencies

equatable, flutter, flutter_bloc, get_it, path_provider, rxdart

More

Packages that depend on document_measure