CODEWITHSUNDEEP
flutter
lsaudon
lsaudon

Reputation: 1458

Get the position of one widget in relation to another

Is there a better way to get the position of one widget in relation to another?

GlobalKey _key = GlobalKey();
GlobalKey _keyRoot = GlobalKey();
RenderBox box = _key.currentContext.findRenderObject();
Offset position = box.localToGlobal(Offset.zero);
RenderBox box2 = _keyRoot.currentContext.findRenderObject();
Offset position2 = box2.localToGlobal(Offset.zero);
double x = position.dx - position2.dx;
double y = position.dy - position2.dy;

In addition, I would like the position to be given by the bottom left corner.

Have you done this before?

Upvotes: 1

Views: 4571

Answers (2)

lsaudon
lsaudon

Reputation: 1458

I put my solution in external class

class Utils {
  static Offset getPositionBottomLeft(GlobalKey parentKey, GlobalKey childKey) {
    final parentBox =
        parentKey.currentContext!.findRenderObject() as RenderBox?;
    if (parentBox == null) {
      throw Exception();
    }
    final childBox = childKey.currentContext!.findRenderObject() as RenderBox?;
    if (childBox == null) {
      throw Exception();
    }

    final parentPosition = parentBox.localToGlobal(Offset.zero);
    final parentHeight = parentBox.size.height;

    final childPosition = childBox.localToGlobal(Offset.zero);
    final childHeight = childBox.size.height;

    final x = childPosition.dx - parentPosition.dx;
    final y =(childPosition.dy + childHeight - parentPosition.dy - parentHeight).abs();

    return Offset(x, y);
  }
}

Upvotes: 2

Alex Domenici
Alex Domenici

Reputation: 769

You can create an extension of GlobalKey to return the position of a widget:

extension GlobalKeyEx on GlobalKey {
  Offset get globalPosition {
    final RenderBox box = currentContext?.findRenderObject();
    return box?.localToGlobal(Offset.zero);
  }
}

Then you compute your distance similarly to what you have already written:

double x = _key1.globalPosition.dx - _key2.globalPosition.dx;
double y = _key1.globalPosition.dy - _key2.globalPosition.dy;

Here's a sample app to demostrate it:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {@override
  createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final key1 = GlobalKey();
  final key2 = GlobalKey();
  var message = "Tap the button";
  
  @override
  Widget build(BuildContext context) {       
    return Stack(
      children: <Widget>[
        Positioned(
          key: key1,
          top: 120,
          left: 40,
          child: Text("Widget 1"),
        ),
        Positioned(
          key: key2,
          top: 150,
          left: 100,
          child: Text("Widget 2"),
        ),
        Positioned(
          top: 200,
          left: 10,
          child: RaisedButton(            
            child: Text("Tap me"),
            onPressed: () {
              // Compute the distance between the two widgets
              var x = key1.globalPosition.dx - key2.globalPosition.dx;
              var y = key1.globalPosition.dy - key2.globalPosition.dy;
              
              // we show the absolute distance between the widgets
              setState(() => message = "The distance is X: ${x.abs()}, Y: ${y.abs()}");
            },
          ),
        ),
        Positioned(
          top: 250,
          left: 10,
          child: Text(message),
        ),
      ],
    ); 
  }
}

extension GlobalKeyEx on GlobalKey {
  Offset get globalPosition {
    final RenderBox box = currentContext?.findRenderObject();
    return box?.localToGlobal(Offset.zero);
  }
}

Upvotes: 0

Related Questions