くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Flutter > FlutterのWidgetの位置情報を取得する(RenderBox)

FlutterのWidgetの位置情報を取得する(RenderBox)

Flutter

FlutterでWidgetの位置情報(Position)を取得したいと思い、
いろいろ調べてみたときの備忘録(*´ω｀*)

位置情報はRenderBoxから取得できるっぽい。

使い方

自分自身の位置情報はこんな感じ。
RenderBoxはBuildContextから取得できる。

class FooWidget extends HookConsumerWidget {
  const FooWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // contextからRenderBoxの取得。RenderObjectなのでcastが必要。
    final RenderBox? renderBox = context.findRenderObject() as RenderBox?;
    
    // Widgetのサイズ
    final Size? size = renderBox?.size;
    
    // Widgetの位置: ローカルでの位置から画面全体での位置に変換
    final Offset? offset = renderBox?.localToGlobal(Offset.zero);
    
    
    return Container(/* ... */);
  }
}

左上が原点(0,0)なので、画面全体の位置情報を取得したい場合は、
localToGlobal(Offset.zero)で取得できる。

Global Keyを使った特定Widgetの参照

子のWidgetなどの場合は、GlobalKeyを使って取得すればOK

class FooWidget extends HookConsumerWidget {
  const FooWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final GlobalKey targetKey = GlobalKey();
    
    
    getOffset() {
      // GlobalKeyでContainerのBuildContextを取得
      final BuildContext? targetContext = targetKey.currentContext;
      
      // targetContextからRenderBoxの取得。RenderObjectなのでcastが必要。
      final RenderBox? renderBox = targetContext?.findRenderObject() as RenderBox?;

      // Widgetのサイズ
      final Size? size = renderBox?.size;

      // Widgetの位置: ローカルでの位置から画面全体での位置に変換
      final Offset? offset = renderBox?.localToGlobal(Offset.zero);
      
      debugPrint("Offset: ${offset}")
    }
    
    return Scaffold(
      body: Container(
        key: targetKey,
        child: ElevatedButton(
          onPressed: () => getOffset(),
          child: Text("TARGET"),
        ),
      ),
    );
  }
}

以上!! これでいろいろできるようになるぞ(*´ω｀*)

参考にしたサイトさま