How to get (x,y) coordinate of instances present on screen

Custom Code

Hi All. Want to say FlutterFlow is a triumph and the developers should be very proud of what they've created. That said, I think it fails to meet my needs, though I'd very much like to be proven wrong.

In general, this principal seems to apply: "It makes 90% of what you need super easy, and the rest impossible." This is the specific example that has me throwing in the towel:

I have "things" in rows. The things are all instances of the same custom widget, for which I need to know the screen position of each. I poke around for the x, y coordinates in the properties panel. Most UI frameworks have this.

ROADBLOCK 1: Seems this isn't exposed.

No problem, I'll use some custom code. This looks like what I need. I'll write a custom function that takes in the widget "key", and returns the x,y coordinates.

ROADBLOCK 2: The key isn't exposed.

Ok, a custom function seems not the right tool for the job. Maybe an Action. Actions give access to a build 'context' from which I can get the widget.key.

ROADBLOCK 3: The key is not of the required GlobalKey type and in any case always comes back null. But even if this worked, I'd need to return the action result to a global app variable before I can make use if it. In fact, I'd need a slew of global variables to hold the location for each of the many widgets. This just feels wrong for a thing that should naturally a property of the widget itself.

Ok, Actions are out, but what about a Custom Widget? I'll create a wrapper widget which serves the purpose of setting a reliable 'key' and then exposing the x,y coordinates as an external property. I'll call it a "Locatable" and my real custom widget will be a child of the Locatable so I can know where it is. I could even re-use this Locatable widget elsewhere. Modular code FTW!

ROADBLOCK 4: Custom widgets can't write to properties that can be read from "outside" the widget. Wait they can, but the only way to do this is to pass a callback function to the widget which serves to retrieve the needed value from inside widget and return that to an outside global variable. Yuck. But okay, I'm desperate now.

ROADBLOCK 5: Custom widgets can't have children. At least you can't set their children in the FF editor. So once you make a custom widget -- like my Locatable -- everything you might want as a child beneath it must also be custom coded as part of the same widget. I really want to "drop down" to custom code as needed, then "step back up" to the FF screen builder to work with it. The screen builder is the magic. Otherwise I'm better off with VSCode .

At this point I've spent days hitting various FF limitation and all I wanted was a coordinate. All the time I saved with the drag and drop has been chewed up on some critical but impossible piece of what I need.

Now prior to all this I used FlutterFlow to create a toy app and it was brilliant. But my feeling now is that I can't step off the beaten path or I'll be stuck with no workarounds. Maybe that's just the unavoidable tradeoff. But it feels so close!

Is there some good approach to having modular custom code that doesn't abandon the benefits of the visual builder? It feels like I'm missing something.

What have you tried so far?

see above

Did you check FlutterFlow's Documentation for this topic?
Yes
1 reply