How to Get X and Y Coordinates of Widget in Flutter

In this example, we are going to show you how to get the x and y position or coordinates of all corners i.e, top left, top right, bottom left, and bottom right of any widget in Flutter. X and Y offset of the widget is a crucial factor of a widget.

final mywidgetkey = GlobalKey();

Container(
    key:mywidgetkey
)

First, you need to add the key to each widget of which you want to get x and y positions during runtime.

RenderBox renderbox = mywidgetkey.currentContext!.findRenderObject() as RenderBox;
Offset position = renderbox.localToGlobal(Offset.zero);
double x = position.dx;
double y = position.dy;

//Top left Corner
print(x); //20.0
print(y); //112.36363636363637

Here, x and y is the coordinates of the top left corner of the widget. You can also get coordinates of other corners like below:

double width = renderbox.size.width;
double height = renderbox.size.height;

print(width); //352.72727272727275
print(height); //100.0

//top right corner
print(x + width); //372.72727272727275
print(y); //112.36363636363637

//bottom left corner
print(x); //20.0
print(y + height); //212.36363636363637

  //bottom right corner
print(x + width); //372.72727272727275
print(y + height); //212.36363636363637

Here, we got the top right, bottom left, and bottom right corner coordinates.

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {

    final mywidgetkey = GlobalKey();

    return  Scaffold(
      appBar: AppBar( 
          title: Text("Get Widget Offsets"),
          backgroundColor: Colors.deepPurpleAccent,
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        alignment: Alignment.topCenter,
        child:Column(
          children: [
              //button A
              Container(
                key:mywidgetkey,
                height: 100,
                color: Colors.redAccent,
              ),

               //Button B
               ElevatedButton(
                onPressed: () async {
                  
                    RenderBox renderbox = mywidgetkey.currentContext!.findRenderObject() as RenderBox;
                    Offset position = renderbox.localToGlobal(Offset.zero);
                    double x = position.dx;
                    double y = position.dy;

                    //Top left Corner
                    print(x); //20.0
                    print(y); //112.36363636363637

                    double width = renderbox.size.width;
                    double height = renderbox.size.height;

                    print(width); //352.72727272727275
                    print(height); //100.0

                    //top right corner
                    print(x + width); //372.72727272727275
                    print(y); //112.36363636363637

                    //bottom left corner
                    print(x); //20.0
                    print(y + height); //212.36363636363637

                     //bottom right corner
                    print(x + width); //372.72727272727275
                    print(y + height); //212.36363636363637
                  
                }, 
                child: Text("Get X and Y Positon of Container")
              )
          ]
        )
      ),
    );
  }
}