如何使用Flutter实现示例动效中的BottomSheet底部弹窗效果？

你当前直接使用的BottomSheet组件是静态嵌入组件树的，没有弹出动画、模态遮罩和拖拽交互能力，要实现示例效果，需要改用Flutter官方提供的showModalBottomSheet方法触发模态BottomSheet，再配合对应参数调整样式和交互即可，具体修改如下：

基础适配方案（匹配你现有固定200高度的需求） #

在触发BottomSheet的交互逻辑（比如按钮点击事件）中调用如下代码：

// 示例为按钮点击触发
ElevatedButton(
  onPressed: () => showModalBottomSheet(
    context: context,
    // 开启拖拽底部关闭能力
    enableDrag: true,
    // 点击外部遮罩可关闭
    isDismissible: true,
    // 顶部圆角配置
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
    ),
    // 半透明背景遮罩色
    barrierColor: Colors.black54,
    builder: (context) {
      return Container(
        height: 200,
        width: double.infinity,
        // 这里同步配置圆角避免部分机型样式不生效
        decoration: BoxDecoration(
          color: Colors.grey.shade200,
          borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
        ),
        alignment: Alignment.center,
        child: const Text('Bottomsheet'),
      );
    },
  ),
  child: const Text('打开BottomSheet'),
)

进阶适配方案（支持拖拽调整高度、上滑铺满全屏，和示例动效完全一致） #

如果需要和示例一样支持拖拽调整BottomSheet高度、上滑扩展为全屏，可配合DraggableScrollableSheet实现：

ElevatedButton(
  onPressed: () => showModalBottomSheet(
    context: context,
    // 允许内容占满全屏
    isScrollControlled: true,
    enableDrag: true,
    isDismissible: true,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
    ),
    barrierColor: Colors.black54,
    builder: (context) => DraggableScrollableSheet(
      initialChildSize: 0.3, // 初始高度占屏幕高度30%
      minChildSize: 0.3, // 最小高度占比
      maxChildSize: 0.9, // 最大高度占比，可设为1实现铺满全屏
      expand: false,
      builder: (context, scrollController) {
        return Container(
          color: Colors.grey.shade200,
          child: ListView(
            controller: scrollController,
            children: [
              // 顶部拖拽把手，和示例样式对齐
              Center(
                child: Container(
                  margin: const EdgeInsets.symmetric(vertical: 12),
                  width: 40,
                  height: 4,
                  decoration: BoxDecoration(
                    color: Colors.grey.shade400,
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
              ),
              // 替换为你自己的内容即可
              const SizedBox(height: 20),
              const Center(child: Text('Bottomsheet')),
              ...List.generate(20, (index) => ListTile(title: Text('测试内容项 $index')))
            ],
          ),
        );
      },
    ),
  ),
  child: const Text('打开可拉伸BottomSheet'),
)

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