title: Flutter Custom Overlay
body: <p>I am working on an app that requires a custom overlay that is positioned based on the click co-ordinates. The overlay should then fill the rest of the space from the position. The fill space direction bases on the distance from the click point to the top or bottom the direction with the larger distance is used and should close on click outside it's surface.</p>
  
  <p>I have looked at the <a href="https://docs.flutter.io/flutter/widgets/Overlay-class.html" rel="nofollow noreferrer">Overlay Widget</a> however i don't seem to understand how i can use it to achieve the described property.</p>
  
  <p>So far i have created a StatefulWidget which contains the Overlay description.</p>
  
  <pre><code>   class ScriptureDisplay extends StatefulWidget {
    @override
    _ScriptureDisplayState createState() =&gt; _ScriptureDisplayState();
  }
  
  class _ScriptureDisplayState extends State&lt;ScriptureDisplay&gt; {
  
    OverlayEntry _overlayEntry;
  
  
    OverlayEntry _createOverlayEntry() {
      RenderBox renderBox = context.findRenderObject();
      var size = renderBox.size;
      var offset = renderBox.localToGlobal(Offset.zero);
  
      return OverlayEntry(
          builder: (context) =&gt; Positioned(
                left: offset.dx,
                top: offset.dy + size.height + 5.0,
                width: size.width,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: &lt;Widget&gt;[
                    nip(),
                    body(context, offset.dy),
                  ],
                ),
              ));
    }
  
    @override
    Widget build(BuildContext context) {
  
    return RaisedButton(
      child: Text("Click Me"),
      onPressed: (){
        this._overlayEntry = this._createOverlayEntry();
        Overlay.of(context).insert(this._overlayEntry);
      },
    );
    }
  
    Widget body(BuildContext context, double offset) {
      return Material(
        borderRadius: BorderRadius.all(
          Radius.circular(8.0),
        ),
  //      color: this.color,
        elevation: 4.0,
        child: Container(
          width: MediaQuery.of(context).size.width,
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: ListView(
            padding: EdgeInsets.zero,
            shrinkWrap: true,
            children: ["First", "Second", "Third"]
                .map((String s) =&gt; ListTile(
                      subtitle: Text(s),
                    ))
                .toList(growable: false),
          ),
        ),
      );
    }
  
    Widget nip() {
      return FittedBox(
        child: Container(
          height: 20.0,
          width: 20.0,
          margin: EdgeInsets.only(left:10),
          child: CustomPaint(
            painter: OpenPainter(),
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>So how do i pickup and calculate current click point relative to the entire screen so i can make the decision for the Overlay direction.
  <a href="https://i.stack.imgur.com/rLOjB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rLOjB.jpg" alt="Sample Overlay"></a></p>