Flutter 中悬浮窗口Widget之Overlay

在开发中常常需要一个悬浮窗口来做各种筛选，实现悬浮控件需要知道悬浮控件应该出现在什么位置以及窗口的大小，而获取悬浮控件的所需的位置需要知道父控件的position。在flutter 中通过BuildContext findRenderObject获取widget的position和size。

bool _isShow = false;
OverlayEntry _overlay;
//触发事件控件的全局key ，通过key可以获取到key对应的控件
GlobalKey _tapWidget = Globalkey();

OverlayEntry _createSelectViewWithContext(BuildContext context){
    //屏幕宽高
    RenderBox  renderBox = context.findRenderObject();
    var screenSize = renderBox.size;
    //触发事件的控件的位置和大小
    renderBox = _tapWidget.findRenderObject();
    var parentSize = renderBox.size;
    var parentPosition = renderBox.localToGlobal(Offset.zero);
    //正式创建Overlay
    return OverlayEntry(
        builder: (context) => Positioned (
            top: parentPosition.dy + parentSize.height,
            width: screenSize.width,
            height:screenSize.height-parentPosition.dy-parentPosition.height,
            child:Stack(
                children:[
                    GestureDetctor(//黑色 26透明度背景
                        onTap:(){
                            setState( () {
                             _isShow = false;
                            });
                            //点击背景 隐藏窗口
                            _showOverlay(_isShow);
                        },
                        child: Container(
                            height: screenSize.height-parentPosition.dy-parentPosition.height,
                            width:screenSize.width,
                            color:Colors.black26,
                        ),
                    ),
                    Container( height:100),//悬浮窗口自定义
                ]
            ),      
        )
    );
    
}
//现实显示具体方法 在需要的地方掉用即可
_showOverlay(bool isShow) {
    if (isShow) {
        _overlay = _createSelectViewWithContext(context);
        Overlay.of(context).inset(_overlay);
    } else {
        _overlay.remove();
    }
}

看到有人问，当页面返回时，overlay没有消失。这里说明一下overlay是Stack，是在整个app页面最上层，所以返回不会随页面消失。可以在页面的dispose()方法中掉用_overlay.remove()