surfstudio/flutter-render-metrics

Render Metrics

https://raw.githubusercontent.com/surfstudio/flutter-open-source/main/assets/logo_black.png#gh-light-mode-only https://raw.githubusercontent.com/surfstudio/flutter-open-source/main/assets/logo_white.png#gh-dark-mode-only

Made by Surf 🏄‍♂️🏄‍♂️🏄‍♂️

Build Status Coverage Status Pub Version Pub Likes Pub popularity Flutter Platform

Overview

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.

Example

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: $currentVersion$

At this moment, the current version of render_metrics is render_metrics version.

Changelog

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

Issues

To report your issues, submit them directly in the Issues section.

Contribute

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

Your 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