FEAT(`show-guidelines`): provide numeric values for overlay guidelines

We have show-guidelines, which is a superb feature on its own.

Improvement (what?)

However on top of this feature. What could be even better is the ability to toggle display of numeric values of the overlay lines themselves. This numeric value would show within the flutter app overlay and not editor.

Motivation (why?)

This helps a lot as it guides the app developer to understand if the computed runtime constraints/width/height/spacers do actually match the UI file provided by the app designer.

As most of the times, there is a designer who provides UI for the developer to follow via apps/services such as AdobeXD, Figma, Zeplin, InVision, Adobe Illustrator, and the list goes on. (not affiliated with any)

Developer-Facing Interaction (how?)

This toggle could happen:

A. Within the widget inspector controls, similar to how show-guidelines feature is toggled. This shows all numeric values for all lines on the screen. This is the verbose way to do it.
B. Because option A. may be too verbose and pollute the UI with lots of numbers, another mechanism of showing numeric values is a simple hover. By hovering over the respective line on the app overlay, widget inspector can show numeric value of the length of the line being hovered over, while hiding numeric values of other lines. Of course this option is not mutually exclusive with option A and both can be useful to implement.

What guidelines overlay show

show_guidelines_cramped_lines

Actual UI design program

show_guidelines_cramped_lines_ui

Challenges

1. Cramped Space

The above picture is an example of a cramped space. This proves that (option B.) is more suitable than the verbose (option A.)
There is no space to show all values for all lines at once (option A.)
Therefore showing length value of one line at a time as the developer hovers over the line is better suited (option B.)

2. Overlapped lines

You might have overlapping lines on top of each other related to different widgets.
Because of this issue, there could be an improvement over the outcome of the first challenge.
The improvement is that hovering over the widget itself would show numeric values of all its related lines, pertaining to this hovered-over widget only. In practice, this last line is the only good implementable outcome of this whole issue.

flutter / devtools