如何让Modal Bottom Sheet+DraggableScrollableSheet占屏幕3/4而非全屏？

你遇到的问题是因为未给DraggableScrollableSheet设置合适的高度范围参数，仅调整initialChildSize无法稳定生效。以下是修改后的代码，可实现初始占屏幕3/4高度、保留拖拽手柄，同时支持拖拽调整到半屏或全屏：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  isDismissible: true,
  showDragHandle: true,
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
  ),
  builder: (context) => DraggableScrollableSheet(
    initialChildSize: 0.75, // 初始占屏幕75%高度（3/4）
    minChildSize: 0.5, // 拖拽可缩小到半屏
    maxChildSize: 1.0, // 拖拽可放大到全屏
    expand: false, // 关键：避免Sheet强制占满父容器
    builder: (context, scrollController) => ListView(
      controller: scrollController,
      children: const [
        // 替换为你的MyWidget内容
        SizedBox(height: 600),
        Text("测试内容"),
        // 更多自定义内容...
      ],
    ),
  ),
);

核心说明： #

• initialChildSize: 0.75：直接定义初始高度为屏幕可用高度的75%，数值范围为0-1。
• minChildSize/maxChildSize：限制拖拽时的高度区间，确保初始值处于合法范围内，避免调整异常。
• expand: false：默认expand为true会强制Sheet占满父容器（全屏），关闭后Sheet将遵循initialChildSize的设定高度。
• 若你的MyWidget不是可滚动组件，需用SingleChildScrollView包裹并绑定scrollController，否则内容不足时Sheet可能无法维持设定高度，或拖拽功能失效：

builder: (context, scrollController) => SingleChildScrollView(
  controller: scrollController,
  child: MyWidget(),
),

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