Flutter中如何让showModalBottomSheet从左侧弹出而非底部？

showModalBottomSheet本身仅支持从底部弹出，要实现从左侧滑入的效果，你可以用showGeneralDialog自定义弹窗逻辑，搭配SlideTransition做滑动动画，下面是完整实现：

1. 自定义左侧弹出方法 #

可以创建一个全局方法或者封装在Widget内部：

void showLeftSideSheet(BuildContext context) {
  showGeneralDialog(
    context: context,
    barrierDismissible: true, // 点击遮罩可关闭面板
    barrierColor: Colors.black54, // 遮罩半透明效果
    transitionDuration: const Duration(milliseconds: 300), // 动画时长
    pageBuilder: (context, animation, secondaryAnimation) {
      return Align(
        alignment: Alignment.centerLeft,
        child: Container(
          width: MediaQuery.of(context).size.width * 0.75, // 面板占屏幕75%宽度
          height: double.infinity,
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(16),
              bottomRight: Radius.circular(16),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  "左侧面板标题",
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 20),
                // 这里添加你的面板内容
                ListTile(
                  title: const Text("选项1"),
                  onTap: () {
                    Navigator.pop(context);
                    // 处理点击逻辑
                  },
                ),
                ListTile(
                  title: const Text("选项2"),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
              ],
            ),
          ),
        ),
      );
    },
    transitionBuilder: (context, animation, secondaryAnimation, child) {
      // 实现从左侧滑入的动画
      return SlideTransition(
        position: Tween<Offset>(
          begin: const Offset(-1.0, 0.0),
          end: Offset.zero,
        ).animate(CurvedAnimation(parent: animation, curve: Curves.easeInOut)),
        child: child,
      );
    },
  );
}

2. 调用方法 #

在需要触发面板的位置（比如按钮点击事件）调用：

ElevatedButton(
  onPressed: () => showLeftSideSheet(context),
  child: const Text("打开左侧面板"),
)

自定义调整项 #

• 修改width参数可以调整面板宽度，比如设为固定值300
• 调整transitionDuration改变动画快慢
• 修改barrierColor自定义遮罩的透明度或颜色
• 在Container的decoration里修改面板的背景色、圆角等样式

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