flutter自定义弹窗(一)：overlay_flutter 弹出层

lzyprime 博客 (github)
创建时间：2020.08.20
qq及邮箱：2383518170

λ:

当前flutter版本：1.20.2

需求如图(画的示意图)，点击按钮弹出菜单区域，点击另外按钮时，关闭当前菜单同时打开对应菜单。

按说下拉菜单应该用 DropDownButton 或者 PopupMenuButton之类的, 但是有几个条件满足不了：

1. 菜单宽度占满屏幕。
2. 其他按钮可以响应点击。

尺寸，这两个按钮实现太难或者不可，底层做了尺寸限制。

点击效果，这两个按钮弹出效果用的PopupRoute, 就像平时跳新页面时Navigator.of(context).push(MaterialPageRoute(...)) 一个道理，差别是PopupRoute是透过的，下层的Widget仍可见。这一效果是因为成员变量opaque为false。
所以当点击 “第二个按钮所在位置” 时，并不会响应，顶多关闭当前菜单，因为按钮属于下层Widget，点击时其实是点击的“菜单所在页面”的空白区域。

Dialog 弹窗也是用这个实现的。底层通过Navigator.of(...).push<T>(_DialogRoute<T>(...)) 显示Dialog, _DialogRoute 继承自PopupRoute

Route 是另外的知识点，另作总结。

overlay

看了看Tooltips的实现，底层用的Overlay。因为Tooltips<