疊加元件，可以懸浮在其他元件上邊，我們通常使用他開發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. }

效果圖

新增曲線和不新增曲線效果對比

     

完整程式碼

檢視完整程式碼