I’m working on a Flutter project where I need to create a feature similar to what you see in design tools like Figma. Basically, I want to show visual measurements and distances between different widgets when users interact with them.
Right now I have a Stack widget containing multiple child widgets, and I need to track their positions dynamically. When a user selects or hovers over a widget, I want to display lines and measurements showing the spacing between elements, just like how design software works.
Does anyone know if there’s an existing Flutter package that handles this kind of functionality? I’ve been searching but haven’t found anything that does exactly what I need. If there isn’t a ready-made solution, what would be the best approach to build this from scratch?
Also, if you’ve seen any Flutter apps or websites that have implemented similar measurement visualization features, I’d love to hear about them as examples.
Built something like this for our internal design tool last year. You’ll need RenderBox methods plus custom painters. Use findRenderObject() to grab widget positions and sizes at runtime, then localToGlobal() to convert everything to the same coordinate system. For the visual stuff, I made a separate widget using OverlayEntry that sits on top of your main content. That way you can draw measurement lines without messing up the UI underneath. Custom painters handle the actual graphics pretty well. The annoying part is getting coordinate transformations right - especially with nested scrollable widgets or complex layouts. Spent way too much time debugging positioning bugs when widgets were inside transformed containers.
Honestly, building this from scratch sounds like a nightmare lol. Check out flutter_ruler or measurement_widget packages - they might not do exactly what you need but could give you a head start. Or you could use GestureDetector with a custom overlay and calculate distances manually with basic math. Either way, expect lots of trial and error.