Flutter：Scaffold的bottomSheet中SafeArea对DraggableScrollableSheet无效

核心原因 #

你给bottomSheet加的外层SafeArea不生效，是因为DraggableScrollableSheet的布局逻辑会直接基于屏幕尺寸计算范围，外层的安全区域约束不会传递到它内部的内容上。另外你手动获取状态栏高度返回0，大概率是用了Scaffold上下文去获取，此时还没拿到正确的屏幕padding值。

可行解决办法 #

方法1：在DraggableScrollableSheet的builder内部添加SafeArea

把SafeArea包裹在builder返回的内容外层，让内容本身避开状态栏和底部导航栏：

class DraggableProblem extends StatelessWidget {
  const DraggableProblem({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomSheet: DraggableScrollableSheet(
          initialChildSize: 1,
          minChildSize: 0.1,
          shouldCloseOnMinExtent: false,
          snapSizes: const [0.1, 1],
          expand: false,
          snap: true,
          builder: (context, controller) {
            // 将SafeArea移到这里，包裹实际内容
            return SafeArea(
              child: Container(
                color: Colors.red,
                child: ListView.builder(
                  controller: controller,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text('Item $index'),
                    );
                  },
                ),
              ),
            );
          }),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    );
  }
}

方法2：手动计算并添加顶部padding（适合需要自定义安全区域的场景）

如果需要更精细的控制，在builder内部通过MediaQuery获取状态栏高度，给内容添加顶部padding：

builder: (context, controller) {
  final statusBarHeight = MediaQuery.of(context).padding.top;
  return Container(
    color: Colors.red,
    padding: EdgeInsets.only(top: statusBarHeight),
    child: ListView.builder(
      controller: controller,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('Item $index'),
        );
      },
    ),
  );
}

补充说明 #

• 方法1的SafeArea会自动处理状态栏和底部导航栏的间距，无需手动计算，推荐优先使用。
• 如果你想避免内容被底部导航栏遮挡，SafeArea默认会处理底部padding，不需要额外设置。如果需要关闭某一侧的安全区域，可以通过SafeArea的top/bottom参数控制（比如bottom: false）。

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