Flutter通过Overlay实现下拉筛选菜单效果

一、效果图

二、 实现方式

• 在必要体现筛选菜单的页面build中包裹一个Overlay组件
  
• 获取固定在顶部筛选头部Widget在屏幕上的位置和它的高度
  
• 在弹窗中通过获取到的高度举行内容体现地区定位
  
• 巧用AnimatedContainer组件实现下拉动画效果
  
• 末了在底部加上玄色蒙层
  

1. _overlayEntry = OverlayEntry(builder: (_) {
2.       return Padding(
3.         padding: EdgeInsets.only(top: startY),
4.         child: Column(
5.           children: [
6.             ColoredBox(
7.               color: Colors.white,
8.               child: Column(
9.                 children: [
10.                   Container(
11.                     height: 1,
12.                     margin: const EdgeInsets.symmetric(horizontal: 16),
13.                     color: const Color(0xfff6f7f9).withOpacity(0.8),
14.                   ),
15.                   ValueListenableBuilder<double>(
16.                     valueListenable: _notifier,
17.                     builder: (context, value, child) {
18.                       return AnimatedContainer(
19.                         height: value,
20.                         curve: Curves.fastEaseInToSlowEaseOut,
21.                         duration: const Duration(milliseconds: 300),
22.                         child: child,
23.                       );
24.                     },
25.                     child: widget.content,
26.                   ),
27.                 ],
28.               ),
29.             ),
30.             Expanded(
31.               child: GestureDetector(
32.                 onTap: () => widget.controller.close(),
33.                 behavior: HitTestBehavior.opaque,
34.                 child: Container(
35.                   color: Colors.black.withOpacity(0.7),
36.                 ),
37.               ),
38.             ),
39.           ],
40.         ),
41.       );
42.     });
43. Overlay.of(context).insert(_overlayEntry!);

复制代码

三、详细代码可查察此处的完备Demo