使用Flutter实现Toast效果

先上个效果图:

Toast1.gif

最近在看Draggable源码,在其中有这么一段:

class _DragAvatar<T> extends Drag {
  _DragAvatar({
    @required this.overlayState,
    this.data,
    this.axis,
    Offset initialPosition,
    this.dragStartPoint = Offset.zero,
    this.feedback,
    this.feedbackOffset = Offset.zero,
    this.onDragEnd,
    @required this.ignoringFeedbackSemantics,
  }) : assert(overlayState != null),
       assert(ignoringFeedbackSemantics != null),
       assert(dragStartPoint != null),
       assert(feedbackOffset != null) {
    _entry = OverlayEntry(builder: _build);//在这里创建一个Entry
    overlayState.insert(_entry);//将Entry添加到OverlayState中
    _position = initialPosition;
    updateDrag(initialPosition);
  }
}
_DragAvatarDraggable 中的私有类,主要作用是当识别到拖拽事件的时候,在屏幕上绘制相应的Widget跟随手指移动。

可以看到,绘制跟随手指移动的Widget的关键代码是创建一个 OverlayEntry ,然后将其添加到 OverlayState 中。那么问题来了 OverlayState 是什么呢?
事实上有一个 Overlay 的Widge,它是一个 StatefullWidget ,它的 createState 方法获取的就是 OverlayState 对象。
Overlay 可以认为是一个UI上面的蒙版/浮空层,使用起来类似 Stack ,如何使用:
通过 Overlay.of 获得 OverlayState 对象,调用 OverlayState.insert 添加 OverlayEntry ,当不需要的时候,通过 OverlayEntry.remove 移除 OverlayEntry

OverlayState使用示例:
    //获取OverlayState
    OverlayState overlayState = Overlay.of(context);
    //创建OverlayEntry
    OverlayEntry _overlayEntry = OverlayEntry(
        builder: (BuildContext context) => Positioned(
              child: Icon(Icons.check_circle),
            ));
    //显示到屏幕上。
    overlayState.insert(_overlayEntry);

这样就可以在屏幕上显示一个Icon。
我能可以通过修改 Positionedleft , top , right , bottom 等值来修改它在屏幕中的位置;最后,可以通过 _overlayEntry.remove(); 来移除它,让它在屏幕上消失。

例如我们做一个出现2秒后消失的Icon。
  void _addOverlay(BuildContext context) async {
    //获取OverlayState
    OverlayState overlayState = Overlay.of(context);
    //创建OverlayEntry
    OverlayEntry _overlayEntry = OverlayEntry(
        builder: (BuildContext context) => Positioned(
              child: Icon(Icons.check_circle),
            ));
    //显示到屏幕上。
    overlayState.insert(_overlayEntry);
    //等待2秒
    await Future.delayed(Duration(seconds: 2));
    //移除
    _overlayEntry.remove();
  }

当做到这里,思路就很清晰了。稍微修改一下 OverlayEntrybuild 方法返回一个符合要求的toast,然后加个渐变透明的动画。基本上就能满足我们的需求啦。

最终Toast类代码如下:
///
/// @author tsing
/// @time 2018/10/15 下午2:33
/// @email shuqing.li@merculet.io
///
class Toast {
  static OverlayEntry _overlayEntry; //toast靠它加到屏幕上
  static bool _showing = false; //toast是否正在showing
  static DateTime _startedTime; //开启一个新toast的当前时间,用于对比是否已经展示了足够时间
  static String _msg;
  static void toast(
    BuildContext context,
    String msg,
  ) async {
    assert(msg != null);
    _msg = msg;
    _startedTime = DateTime.now();
    //获取OverlayState
    OverlayState overlayState = Overlay.of(context);
    _showing = true;
    if (_overlayEntry == null) {
      _overlayEntry = OverlayEntry(
          builder: (BuildContext context) => Positioned(
                //top值,可以改变这个值来改变toast在屏幕中的位置
                top: MediaQuery.of(context).size.height * 2 / 3,
                child: Container(
                    alignment: Alignment.center,
                    width: MediaQuery.of(context).size.width,
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 80.0),
                      child: AnimatedOpacity(
                        opacity: _showing ? 1.0 : 0.0, //目标透明度
                        duration: _showing
                            ? Duration(milliseconds: 100)
                            : Duration(milliseconds: 400),
                        child: _buildToastWidget(),
                      ),
                    )),
              ));
      overlayState.insert(_overlayEntry);
    } else {
      //重新绘制UI,类似setState
      _overlayEntry.markNeedsBuild();
    }
    await Future.delayed(Duration(milliseconds: 2000)); //等待两秒

    //2秒后 到底消失不消失
    if (DateTime.now().difference(_startedTime).inMilliseconds >= 2000) {
      _showing = false;
      _overlayEntry.markNeedsBuild();
    }
  }

  //toast绘制
  static _buildToastWidget() {
    return Center(
      child: Card(
        color: Colors.black26,
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
          child: Text(
            _msg,
            style: TextStyle(
              fontSize: 14.0,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

上篇中提到的 DragAndDropList 是通过重写Draggable实现的拖动动画效果,就是在我们今天用到的 _DragAvatar 中的 update 方法中获取的每次移动的Offset。在得到这个回调值后,就可以做很作骚操作了。