Skip to content

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

Open

Description

@om-ha

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.

Activity

  1. changed the title [-]FEAT: `show-guidelines` provide numeric values[/-] [+]FEAT(`show-guidelines`): provide numeric values for overlay guidelines[/+] on Oct 15, 2021
  2. om-ha commented on Oct 15, 2021

    @om-ha
    Author

    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.
  3. added this to the Backlog milestone on May 5, 2022
  4. added
    P3issues we think are valid but not important
    cost: mediumMedium engineering cost to implement
    on Aug 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions