Flutter 3.10.5中如何实现这类Cupertino模态底部弹窗？

方案一：使用Flutter官方原生组件showCupertinoModalPopup #

这是最稳妥的适配方案，官方组件完全兼容稳定版Flutter，自带Cupertino风格的弹窗样式与交互（滑动关闭、圆角、毛玻璃效果等）。

示例代码：

void showCustomCupertinoBottomSheet(BuildContext context) {
  showCupertinoModalPopup(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: MediaQuery.of(context).size.height * 0.6,
        decoration: const BoxDecoration(
          color: CupertinoColors.systemBackground,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16),
            topRight: Radius.circular(16),
          ),
        ),
        child: Column(
          children: [
            // 顶部拖拽指示器
            Container(
              margin: const EdgeInsets.symmetric(vertical: 12),
              width: 40,
              height: 4,
              decoration: BoxDecoration(
                color: CupertinoColors.systemGrey4,
                borderRadius: BorderRadius.circular(2),
              ),
            ),
            // 弹窗标题
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: Text(
                '选择选项',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.w600,
                  color: CupertinoColors.label,
                ),
              ),
            ),
            const Divider(height: 1),
            // 选项列表
            Expanded(
              child: ListView(
                children: [
                  CupertinoListTile(
                    title: const Text('选项1'),
                    onTap: () {
                      Navigator.pop(context);
                      // 处理选项1逻辑
                    },
                  ),
                  CupertinoListTile(
                    title: const Text('选项2'),
                    onTap: () {
                      Navigator.pop(context);
                      // 处理选项2逻辑
                    },
                  ),
                  CupertinoListTile(
                    title: const Text('选项3'),
                    onTap: () {
                      Navigator.pop(context);
                      // 处理选项3逻辑
                    },
                  ),
                ],
              ),
            ),
            // 底部取消按钮
            const Divider(height: 1),
            CupertinoButton(
              child: const Text('取消', style: TextStyle(color: CupertinoColors.systemBlue)),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        ),
      );
    },
  );
}

调用方式：在触发弹窗的事件中执行showCustomCupertinoBottomSheet(context)即可。

方案二：使用兼容Flutter 3.10+的第三方包 #

如果需要更丰富的预设样式，可尝试以下两种方式：

• 更新modal_bottom_sheet到最新版本（v3.0.0+已适配Flutter 3.10+），在pubspec.yaml中修改依赖：

  dependencies:
    modal_bottom_sheet: ^3.0.0
  

  执行flutter pub get后，即可使用其提供的showCupertinoModalBottomSheet方法，支持更多自定义参数。
• 使用替代包cupertino_bottom_sheet，专为Cupertino风格底部弹窗设计，适配最新Flutter版本：

  dependencies:
    cupertino_bottom_sheet: ^1.0.0
  

方案三：自定义可拖拽底部弹窗（基于DraggableScrollableSheet） #

如果需要完全自定义弹窗的拖拽行为与布局，可结合DraggableScrollableSheet和CupertinoTheme实现：

示例代码：

void showDraggableCupertinoSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    backgroundColor: Colors.transparent,
    builder: (context) {
      return DraggableScrollableSheet(
        initialChildSize: 0.6,
        minChildSize: 0.3,
        maxChildSize: 0.8,
        builder: (context, scrollController) {
          return Container(
            decoration: const BoxDecoration(
              color: CupertinoColors.systemBackground,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16),
              ),
            ),
            child: Column(
              children: [
                // 顶部拖拽指示器
                Container(
                  margin: const EdgeInsets.symmetric(vertical: 12),
                  width: 40,
                  height: 4,
                  decoration: BoxDecoration(
                    color: CupertinoColors.systemGrey4,
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
                Expanded(
                  child: ListView.builder(
                    controller: scrollController,
                    itemCount: 20,
                    itemBuilder: (context, index) {
                      return CupertinoListTile(
                        title: Text('选项 ${index+1}'),
                        onTap: () => Navigator.pop(context),
                      );
                    },
                  ),
                ),
              ],
            ),
          );
        },
      );
    },
  );
}

该方案支持自由调整弹窗的初始高度、最小/最大高度，内容区域可跟随拖拽滚动。

内容的提问来源于stack exchange，提问作者Zubair DKD