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;
      }
    }
  }

效果图

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

     

完整代码

查看完整代码