Flutter Overlay、OverlayState、OverlayEntry 叠加 Toast Demo

叠加组件，可以悬浮在其他组件上边，我们通常使用他开发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;}}}

效果图

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

完整代码

查看完整代码