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

一、效果图

二、 实现方式

1. 在需要显示筛选菜单的页面build中包裹一个Overlay组件
2. 获取固定在顶部筛选头部Widget在屏幕上的位置和它的高度
3. 在弹窗中通过获取到的高度进行内容显示区域定位
4. 巧用AnimatedContainer组件实现下拉动画效果
5. 最后在底部加上黑色蒙层

_overlayEntry = OverlayEntry(builder: (_) {
      return Padding(
        padding: EdgeInsets.only(top: startY),
        child: Column(
          children: [
            ColoredBox(
              color: Colors.white,
              child: Column(
                children: [
                  Container(
                    height: 1,
                    margin: const EdgeInsets.symmetric(horizontal: 16),
                    color: const Color(0xfff6f7f9).withOpacity(0.8),
                  ),
                  ValueListenableBuilder<double>(
                    valueListenable: _notifier,
                    builder: (context, value, child) {
                      return AnimatedContainer(
                        height: value,
                        curve: Curves.fastEaseInToSlowEaseOut,
                        duration: const Duration(milliseconds: 300),
                        child: child,
                      );
                    },
                    child: widget.content,
                  ),
                ],
              ),
            ),
            Expanded(
              child: GestureDetector(
                onTap: () => widget.controller.close(),
                behavior: HitTestBehavior.opaque,
                child: Container(
                  color: Colors.black.withOpacity(0.7),
                ),
              ),
            ),
          ],
        ),
      );
    });
Overlay.of(context).insert(_overlayEntry!);

三、具体代码可查看此处的完整Demo