叠加组件，可以悬浮在其他组件上边，我们通常使用他开发Toast、PopupWindow弹窗等

虽然可以直接创建Overlay ，但最常见的是在WidgetsApp或MaterialApp中使用导航器创建的叠加层。

使用方法

 

//获取实例

OverlayState overlayState = Overlay.of(_context);

//创建OverlayEntry

OverlayEntry overlayEntry = OverlayEntry(builder);

//显示到屏幕上

overlayState.insert(_overlayEntry);

//移除屏幕

overlayEntry.remove();

代码示例

一个透明渐变的 Toast Demo 代码片段，点击查看完整代码

 

//显示 文本 Toast 透明渐变 代码片段

static void _makeTextShowOpacity() async {

 

_showing = true;

 

//创建OverlayEntry

_overlayEntry = OverlayEntry(

builder: (BuildContext context) => Positioned(

//top值，可以改变这个值来改变toast在屏幕中的位置

top: _top,

child: Container(

alignment: Alignment.center,//居中

width: MediaQuery.of(context).size.width,//Container 宽

child: AnimatedOpacity(

//目标透明度

opacity: _showing ? 1.0 : 0.0,

//执行时间

duration: _showing ? Duration(milliseconds: _millisecondsShow) : Duration(milliseconds: _millisecondsHide),

child: _toastWidget,

),

),

)

);

//显示到屏幕上

Overlay.of(_context).insert(_overlayEntry);

//等待两秒

await Future.delayed(Duration(milliseconds: _milliseconds));

 

//2秒后 到底消失不消失

if (DateTime.now().difference(_startedTime).inMilliseconds >= _milliseconds) {

_showing = false;

//重新绘制UI，类似setState

_overlayEntry.markNeedsBuild();

//等待动画执行

await Future.delayed(Duration(milliseconds: _millisecondsHide));

if(!_showing){

_overlayEntry.remove();

_overlayEntry = null;

}

}

}

效果图

添加曲线和不添加曲线效果对比

     

完整代码

查看完整代码