Flutter Overlay、OverlayState、OverlayEntry 叠加 Toast Demo

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

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

使用方法

1. //获取实例

2. OverlayState overlayState = Overlay.of(_context);

3. //创建OverlayEntry

4. OverlayEntry overlayEntry = OverlayEntry(builder);

5. //显示到屏幕上

6. overlayState.insert(_overlayEntry);

7. //移除屏幕

8. overlayEntry.remove();

代码示例

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

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

2. static void _makeTextShowOpacity() async {

3.  

4. _showing = true;

5.  

6. //创建OverlayEntry

7. _overlayEntry = OverlayEntry(

8. builder: (BuildContext context) => Positioned(

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

10. top: _top,

11. child: Container(

12. alignment: Alignment.center,//居中

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

14. child: AnimatedOpacity(

15. //目标透明度

16. opacity: _showing ? 1.0 : 0.0,

17. //执行时间

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

19. child: _toastWidget,

20. ),

21. ),

22. )

23. );

24. //显示到屏幕上

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

26. //等待两秒

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

28.  

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

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

31. _showing = false;

32. //重新绘制UI，类似setState

33. _overlayEntry.markNeedsBuild();

34. //等待动画执行

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

36. if(!_showing){

37. _overlayEntry.remove();

38. _overlayEntry = null;

39. }

40. }

41. }

效果图

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

     

完整代码

查看完整代码