FlutterでウィジェットのX座標とY座標を取得する方法

このチュートリアルでは、Flutter のウィジェットのすべての角 (つまり、左上、右上、左下、右下) の x および y 位置または座標を取得する方法を学びます。ウィジェットの X および Y オフセットは、ウィジェットの重要な要素です。

1:まず、ウィジェットにキーを設定します。

まず、実行時に x 位置と y 位置を取得する各ウィジェットにキーを追加する必要があります。

final mywidgetkey = GlobalKey();

Container(
    key:mywidgetkey
)

2: X および 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

ここで、x と y はウィジェットの左上隅の座標です。以下のように他のコーナーの座標を取得することもできます。

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

ここでは、右上、左下、右下の角の座標を取得しました。

完全なコード例:

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

出力：