ย ยทย Full stack and low code

How to get widget coordinates?

Anyone know how to get the coordinates of a widget (x,y) during runtime?

Could we use GlobalKey?

If so, how do you assign a key to a widget and then access that key within a custom function or custom action?

Got the following start from ChatGPT:

In Flutter, you can obtain the position and size of a widget using the GlobalKey in combination with RenderBox. Here's a step-by-step guide:

1. Use GlobalKey: Create a GlobalKey for your widget. This will help you later retrieve the RenderBox (which contains the size and position information) of the widget.

2. Get the RenderBox: Once your widget is built and rendered, you can use the key to get the RenderBox of the widget.

3. Obtain the position: Using the RenderBox, you can obtain the position of the widget.

Here's a function that returns the Offset representing the top-left position of the widget:

```dart

import 'package:flutter/material.dart';

Offset getWidgetPosition(GlobalKey key) {

final RenderBox renderBox = key.currentContext?.findRenderObject() as RenderBox;

return renderBox.localToGlobal(Offset.zero); // top-left point of the widget

}

void main() {

final GlobalKey widgetKey = GlobalKey();

runApp(

MaterialApp(

home: Scaffold(

appBar: AppBar(title: Text('Widget Position')),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

ElevatedButton(

key: widgetKey,

onPressed: () {

final position = getWidgetPosition(widgetKey);

print('Position: $position');

},

child: Text('Click me'),

),

],

),

),

),

),

);

}

```

In this example, we've created a button with a GlobalKey. When you press the button, it'll print its top-left position on the screen.

Remember that the returned Offset (x,y) is relative to the top-left corner of the screen. Adjustments may be necessary if you want relative positions to other widgets or contexts.

Note: Overusing GlobalKey can be costly in terms of performance. Make sure to use it only when necessary.

1
9 replies