Render Metrics

Build Status Coverage Status Pub Version Pub Likes Flutter Platform

This package is part of the SurfGear toolkit made by Surf.

SurfGear

About

This package helps retrieve the current positioning coordinates of any widget in a widgets tree in your Flutter application.

Currently supported features

  • Retrieve the full set of positioning coordinates of the desired widget at any time;
  • Calculate the difference in positioning between two widgets and use it the way you need.

Usage

Getting widget's coordinates

Instantiate RenderParametersManager object. You can set a special type for the widget's unique identifier or leave it dynamic.

final renderManager = RenderParametersManager<dynamic>();

Wrap the desired widget in a RenderMetricsObject. The id parameter is the widget’s unique identifier.

RenderMetricsObject(
    id: "uniqueWidgetId",
    manager: renderManager,
    child: Container(
        ...
    ),
),

Get a bundle with the positioning coordinates of the wrapped widget.

RenderData data = renderManager.getRenderData("uniqueWidgetId");

Calculating the difference in positioning between two widgets

Wrap the widgets you want to compare in RenderMetricsObjects. Specify two different ids for each of them. Please note, that the manager parameter of both widgets should contain the link to the same RenderParametersManager instance.

RenderMetricsObject(
    id: "rowWidgetId",
    manager: renderManager,
    child: Row(
        ...
    ),
),
RenderMetricsObject(
    id: "columnWidgetId",
    manager: renderManager,
    child: Column(
        ...
    ),
),

Specify two unique widget identifiers when using the getDiffById() function and extract a bundle with the relative difference in positioning coordinates between the widgets.

ComparisonDiff diff =
    renderManager.getDiffById("rowWidgetId", "columnWidgetId");

What metrics can I get?

RenderData

RenderData instance contains a complete set of properties that characterize any widget in a two-dimensional space.

All metrics positioning coordinates are global, meaning they are relative to the entire screen coordinate space.

RenderData

RenderData also provides you an ability to get all widget keypoint XY-coordinates by calling one of special getters.

RenderData

ComparisonDiff

You can get the comparison relative results for each widget keypoint from the ComparisonDiff instance.

An additional set of special getters can help you calculate the difference between two adjacent sides of two different widgets (e.g. right to left, top to bottom, etc.).

RenderData

Installation

Add Render Metrics to your pubspec.yaml file:

dependencies:
  render_metrics: version

You can use both stable and dev versions of the package listed above in the badges bar.

Changelog

All notable changes to this project will be documented in this file.

Issues

For issues, file directly in the main SurfGear repo.

Contribute

If you would like to contribute to the package (e.g. by improving the documentation, solving a bug or adding a cool new feature), please review our contribution guide first and send us your pull request.

You PRs are always welcome.

How to reach us

Please feel free to ask any questions about this package. Join our community chat on Telegram. We speak English and Russian.

Telegram

License

Apache License, Version 2.0

Libraries

render_metrics