[flutter] 위젯의 x 좌표를 구하는 다른 방법

04 Dec 2023

flutter

Flutter에서는 다양한 방법을 사용하여 위젯의 좌표를 구할 수 있습니다. 기본적으로는 RenderBox 클래스를 사용하여 좌표를 얻을 수 있지만, 이 외에도 다른 방법을 사용할 수 있습니다.

1. GlobalKey를 사용하여 좌표 얻기

GlobalKey _widgetKey = GlobalKey();
...
Widget build(BuildContext context) {
  return Container(
    key: _widgetKey,
    child: ...
  );
}
...
void _getWidgetPosition() {
  final RenderBox renderBox = _widgetKey.currentContext?.findRenderObject();
  final position = renderBox.localToGlobal(Offset.zero);
  final x = position.dx;
  print("Widget X 좌표: $x");
}

위 코드에서는 GlobalKey를 사용하여 Widget의 키를 설정하고, _getWidgetPosition 함수를 통해 위젯의 x 좌표를 얻습니다. RenderBox 클래스의 localToGlobal 메서드를 사용하여 위젯의 좌표를 전역 좌표로 변환한 후, dx 값으로 x 좌표를 얻을 수 있습니다.

2. WidgetsBindingObserver를 사용하여 좌표 얻기

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

class _MyWidgetState extends State<MyWidget> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance?.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    WidgetsBinding.instance?.addPostFrameCallback((_) {
      final renderBox = context.findRenderObject() as RenderBox;
      final position = renderBox.localToGlobal(Offset.zero);
      final x = position.dx;
      print("Widget X 좌표: $x");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ...
    );
  }
}

위 코드에서는 WidgetsBindingObserver를 사용하여 위젯의 변화를 감지하고, didChangeMetrics를 재정의하여 위젯의 좌표를 얻는 방법입니다. addPostFrameCallback를 사용하여 현재 프레임이 렌더링 된 후 좌표를 얻을 수 있습니다.

3. GestureDetector를 사용하여 좌표 얻기

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapUp: (TapUpDetails details) {
        final x = details.localPosition.dx;
        print("Widget X 좌표: $x");
      },
      child: Container(
        child: ...
      ),
    );
  }
}

위 코드에서는 GestureDetector를 사용하여 위젯의 터치 이벤트를 감지하고, onTapUp 콜백을 통해 터치된 위치의 x 좌표를 얻습니다. localPosition을 사용하여 터치 위치를 가져올 수 있습니다.

위의 세 가지 방법을 사용하여 Flutter 위젯의 x 좌표를 간단히 구할 수 있습니다. 각 방법은 상황에 맞게 사용할 수 있으니, 필요에 따라 선택하여 사용하면 됩니다.