Flutter新手求助：BottomSheet文档关联及Material 3底部弹窗实现

首先明确：Material 3文档里的底部弹窗就是Flutter Material库中的BottomSheet组件——前者是设计规范，定义了组件的外观、交互标准；后者是代码实现，对应这些规范的具体API。两个文档没交叉链接是因为分属设计系统和Flutter API文档两个独立体系，不用纠结这点。

下面直接给你实现类似Google Maps风格底部抽屉的代码方案，分两种常用场景：

1. 模态底部弹窗（临时弹出，点击外部可关闭） #

这是最基础的用法，适合临时展示信息：

ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      // 适配安全区域
      useSafeArea: true,
      // 匹配Material 3圆角样式
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
      ),
      builder: (context) {
        return Container(
          padding: const EdgeInsets.all(16),
          height: 200,
          child: const Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('标题', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
              SizedBox(height: 16),
              Text('这里是底部弹窗内容'),
            ],
          ),
        );
      },
    );
  },
  child: const Text('打开模态底部弹窗'),
)

2. 可拖拽的持久底部抽屉（类似Google Maps样式） #

这种是和页面共存、可拖动调整高度的类型，完美匹配你要的Google Maps效果：

// 放在Scaffold的body里，和地图组件叠加
Stack(
  children: [
    // 你的Google Maps组件
    GoogleMap(
      initialCameraPosition: const CameraPosition(target: LatLng(37.7749, -122.4194), zoom: 12),
    ),
    // 可拖拽的底部抽屉
    DraggableScrollableSheet(
      initialChildSize: 0.2, // 初始高度占屏幕的20%
      minChildSize: 0.1, // 最小高度占10%
      maxChildSize: 0.8, // 最大高度占80%
      builder: (context, scrollController) {
        return Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
            boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 10)],
          ),
          child: ListView(
            controller: scrollController,
            padding: const EdgeInsets.all(16),
            children: [
              // 顶部拖拽指示器（Material 3标准设计）
              Center(
                child: Container(
                  width: 40,
                  height: 4,
                  decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
              ),
              const SizedBox(height: 16),
              const Text('地点详情', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
              const SizedBox(height: 12),
              // 模拟列表内容
              ...List.generate(5, (index) {
                return ListTile(
                  title: Text('选项 ${index+1}'),
                  subtitle: Text('这是选项 ${index+1} 的描述'),
                );
              }),
            ],
          ),
        );
      },
    ),
  ],
)

关键说明： #

• DraggableScrollableSheet是实现Google Maps风格抽屉的核心组件，支持拖拽调整高度，内部可嵌套滚动组件（比如ListView）
• 通过borderRadius和boxShadow匹配Material 3的视觉风格
• 顶部的小指示器是Material 3底部抽屉的标准交互提示，引导用户拖拽调整

如果需要统一全局BottomSheet样式，还可以通过BottomSheetThemeData在Theme中配置圆角、背景色等参数。

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