如何在Flutter中创建带有圆角的Modal BottomSheet？

嘿，这事儿不难！咱们只需要给showModalBottomSheet加上几个关键配置，就能完美复刻Google Tasks那种清爽的底部弹窗效果。我直接给你上代码和拆解：

核心配置要点 #

• 顶部圆角：用shape属性设置顶部的圆角，这是Google Tasks弹窗最显眼的特征之一
• 悬浮阴影：通过elevation添加阴影，让弹窗和页面背景拉开层次
• 拖拽指示器：在弹窗顶部加个小灰色条，提示用户可以拖拽调整高度
• 自适应高度：让弹窗高度贴合内容，避免不必要的空间浪费

完整代码示例 #

void showGoogleTasksStyleBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    // 设置顶部圆角
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
    ),
    // 添加悬浮阴影
    elevation: 8.0,
    // 背景色设为白色
    backgroundColor: Colors.white,
    // 如果需要支持全屏展开，打开这个属性，配合滚动组件使用
    // isScrollControlled: true,
    builder: (BuildContext context) {
      return Padding(
        padding: const EdgeInsets.all(16.0),
        // 用MainAxisSize.min让弹窗高度自适应内容
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 顶部的拖拽指示器
            Container(
              width: 40,
              height: 4,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(2),
              ),
            ),
            const SizedBox(height: 16),
            // 这里替换成你的弹窗内容，比如输入框、选项等
            const TextField(
              decoration: InputDecoration(
                hintText: "添加新任务",
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            // 底部操作按钮
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: const Text("取消"),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: () {
                    // 这里写你的业务逻辑
                    Navigator.pop(context);
                  },
                  child: const Text("保存"),
                ),
              ],
            ),
          ],
        ),
      );
    },
  );
}

额外优化提示 #

如果你的弹窗内容比较多，需要支持全屏展开的话，记得开启isScrollControlled: true，然后把内容放在SingleChildScrollView里面，这样用户拖拽顶部指示器就能把弹窗拉到全屏，和Google Tasks的交互完全一致～

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