如何缩小Flutter中showMaterialModalBottomSheet的宽度？

要让showMaterialModalBottomSheet的宽度不为全屏，你可以通过限制弹窗容器宽度并居中显示来实现，具体修改如下：

修改后的完整代码 #

floatingActionButton: FloatingActionButton(
  onPressed: () {
    showMaterialModalBottomSheet(
      backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10.0)),
      ),
      useRootNavigator: true,
      enableDrag: true,
      context: context,
      builder: (context) {
        return StatefulBuilder(
          builder: (BuildContext context, StateSetter setState) {
            // 用Center包裹容器，同时设置宽度为屏幕宽度的80%（可按需调整比例）
            return Center(
              child: Container(
                padding: EdgeInsets.all(15),
                height: 300,
                // 限制宽度为屏幕宽度的80%，适配不同设备
                width: MediaQuery.of(context).size.width * 0.8,
                child: Column(
                  children: [
                    Text("Testing"),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  },
  child: const Icon(FontAwesomeIcons.anchorLock),
),

关键修改说明 #

• 用Center组件包裹弹窗容器，确保窄弹窗在屏幕水平居中
• 通过MediaQuery.of(context).size.width * 0.8设置容器宽度为屏幕宽度的80%，你可以根据需求调整比例（比如0.7、0.9），也可以设置固定宽度（如300）
• 保留原有的圆角、背景色、拖拽等配置，不影响其他功能

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