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

一、效果图

二、 实现方式

  1. 获取固定在顶部筛选头部Widget在屏幕上的位置和它的高度
  2. 在弹窗中通过获取到的高度进行内容显示区域定位
  3. 巧用AnimatedContainer组件实现下拉动画效果
  4. 最后在底部加上黑色蒙层
dart 复制代码
unawaited(
      showDialog(
        context: context,
        useSafeArea: false,
        barrierColor: Colors.transparent,
        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: _close,
                    behavior: HitTestBehavior.opaque,
                    child: Container(
                      color: Colors.black.withOpacity(0.7),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );

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

相关推荐
yychen_java3 分钟前
无人机技术研究现状及发展趋势
无人机·1024程序员节
小白黑科技测评1 小时前
2025 年视频去水印工具实测:擦擦视频双版本解析一键去字幕与多格式兼容能力
java·人工智能·音视频·智能电视·1024程序员节
@曾记否1 小时前
【Betaflight源码学习】之初始化函数(init.c)
1024程序员节
Eiceblue1 小时前
Python 快速提取扫描件 PDF 中的文本:OCR 实操教程
vscode·python·ocr·1024程序员节
APIshop1 小时前
淘宝/天猫 API 接口深度解析:商品详情获取与按图搜索商品(拍立淘)实战指南
python·1024程序员节
hazy1k2 小时前
51单片机基础-ADC模数转换
stm32·单片机·嵌入式硬件·51单片机·1024程序员节
eddy-原3 小时前
运维自动化与监控体系综合实践作业
运维·自动化·1024程序员节
火柴就是我3 小时前
android:enableJetifier=true 再学习
android·flutter
星释4 小时前
鸿蒙Flutter三方库适配指南-04.使用MacOS搭建开发环境
flutter·macos·harmonyos
瀚高PG实验室4 小时前
Linux环境下编译C语言使用libpq连接瀚高数据库
1024程序员节·瀚高数据库