overlayentry_layoutbuilder_example.dart

import 'package:flutter/material.dart';

const overlaySize = 150.0;

void main() {
  runApp(const MaterialApp(home: App()));
}

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  OverlayEntry? overlayEntry;
  final GlobalKey _buttonKey = GlobalKey();

  @override
  void dispose() {
    super.dispose();
    _clearOverlay();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          key: _buttonKey,
          onPressed: () => _showOverlay(),
          child: const Text('Show'),
        ),
      ),
    );
  }

  _showOverlay() {
    _clearOverlay();

    overlayEntry = OverlayEntry(builder: (context) {
      return GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: _clearOverlay,
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            final RenderBox buttonRenderBox = _buttonKey.currentContext?.findRenderObject() as RenderBox;
            final buttonSize = buttonRenderBox.size;
            final buttonPosition = buttonRenderBox.localToGlobal(Offset.zero);
            return Stack(
              children: [
                Positioned(
                  top: buttonPosition.dy + buttonSize.height,
                  left: buttonPosition.dx + buttonSize.height,
                  child: SizedBox(
                    width: overlaySize,
                    height: overlaySize,
                    child: Container(
                      alignment: Alignment.center,
                      color: Colors.blue,
                      child: const Text(
                        'Hello',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.0,
                          decoration: TextDecoration.none,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            );
          },
        ),
      );
    });

    // Add the OverlayEntry to the Overlay.
    Overlay.of(context, debugRequiredFor: widget).insert(overlayEntry!);
  }

  _clearOverlay() {
    overlayEntry?.remove();
    overlayEntry = null;
  }

}