Cách lấy tọa độ X và Y của Widget trong Flutter

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách lấy vị trí hoặc tọa độ x và y của tất cả các góc, tức là trên cùng bên trái, trên cùng bên phải, dưới cùng bên trái và dưới cùng bên phải của bất kỳ tiện ích con nào trong Flutter. Độ lệch X và Y của tiện ích là một yếu tố quan trọng của tiện ích.

1: Đầu tiên, Đặt Khóa cho Widget:

Trước tiên, bạn cần thêm khóa vào từng tiện ích mà bạn muốn nhận vị trí x và y trong thời gian chạy.

final mywidgetkey = GlobalKey();

Container(
    key:mywidgetkey
)

2: Nhận Độ lệch Vị trí X và Y:

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

Ở đây, x và y là tọa độ của góc trên cùng bên trái của tiện ích. Bạn cũng có thể lấy tọa độ của các góc khác như bên dưới:

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

Ở đây, chúng tôi có tọa độ góc trên cùng bên phải, dưới cùng bên trái và dưới cùng bên phải.

Mã đầy đủ Ví dụ:

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")
              )
          ]
        )
      ),
    );
  }
}

Đầu ra:

Mã hóa vui vẻ !!!