Add ability to add custom overlay

[aqwert]

Just came across this project and it does almost everything that I needed it for. Only thing is that I want to have it render an overlay widget when focused. Played around with the ode and all it needs is this...

Define callback

typedef OverlayBuilder = Widget Function(
  BuildContext context,
  Rect parentRect,
);

Add a field in FocusWidget settable from the constructor and static builder

final OverlayBuilder? overlayBuilder;

Then where you have defined the children, it can be called.

     final overlayBuilder = widget.overlayBuilder;
      final children = <Widget>[
        Listener(
          <removed for brevity>
        ),
        if (overlayBuilder != null) overlayBuilder(context, rect),
      ];

I am using it this way which seems to work...

return FocusWidget.builder(
      context,
      overlayBuilder: (context, rect) {
        final offset = Alignment.bottomRight.withinRect(rect);
        return Positioned(
          top: offset.dy,
          left: offset.dx - 200,
          child: Material(
            child: Container(
              color: Colors.yellow,
              child: ConstrainedBox(
                constraints: BoxConstraints(minWidth: 200),
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('One'),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Two'),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Three'),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
      builder: (context, focusNode) => GestureDetector(
        onTapDown: (_) async {
          FocusScope.of(context).requestFocus(focusNode);
        },
        child: Text('Open Overlay'),
      ),
    );

This will open an overlay pinned to the bottom right of the widget

[gzlock]

Using an overlay to detect tap where is the worst solution, so I'm going to use FocusManager to achieve the same functionality.

[aqwert]

Sure, tried that and it did not work. Can look into it again

[aqwert]

Still, without using a GestureDetector (can be replaced with the Focus widget) there needs a way to add a custom overlay.