Flutter中如何移除showMenu实现的长按弹窗周边的多余白色空白

那圈白边并非你自定义Container的样式问题，是组件内置的默认配置共同导致的：

• PopupMenuItem 自带的默认内边距：这个组件本身不是为承载自定义复杂弹窗设计的，默认给child加了EdgeInsets.symmetric(horizontal: 16)的横向内边距、48px的最小高度，会把你写的灰色Container往外推，漏出外层的白色背景。
• showMenu 底层渲染的Material组件默认样式：showMenu 弹起的菜单本质是一个Material组件，默认使用主题的surface白色作为背景，自带阴影、内边距和圆角，你的自定义Container只是嵌在这个白色Material内部，外层露出的白色就是Material本身的颜色。

1. 调整showMenu的整体渲染样式 #

替换原来的showMenu调用，增加menuStyle参数（Flutter 3.0及以上版本支持），把外层Material的白色背景、默认内边距、阴影全部移除：

onLongPress: () {
  showMenu(
    context: context,
    position: RelativeRect.fromLTRB(0, 0, 0.0, 0.0),
    // 自定义菜单整体样式，消掉外层白边
    menuStyle: MenuStyle(
      // 菜单背景设为透明，不遮挡自定义的Container
      backgroundColor: MaterialStateProperty.all(Colors.transparent),
      // 移除菜单整体的默认内边距
      padding: MaterialStateProperty.all(EdgeInsets.zero),
      // 移除默认阴影
      shadowColor: MaterialStateProperty.all(Colors.transparent),
      // 对齐自定义Container的圆角
      shape: MaterialStateProperty.all(
        RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
      ),
    ),
    items: <PopupMenuEntry>[
      // 替换为清除了默认配置的PopupMenuItem，见下一步
    ],
  );
}

如果是Flutter 3.0以下的旧版本，没有menuStyle参数，可以直接用showMenu的原生命名参数实现同样效果：

showMenu(
  context: context,
  position: RelativeRect.fromLTRB(0, 0, 0, 0),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
  color: Colors.transparent,
  items: [...],
)

2. 清除PopupMenuItem的默认内边距 #

不要使用默认配置的PopupMenuItem，把内置的padding、最小高度、尺寸约束全部清零，让自定义Container占满整个菜单区域：

PopupMenuItem(
  // 清除默认的横向内边距
  padding: EdgeInsets.zero,
  // 清除默认的48px最小高度限制
  height: 0,
  // 清除默认的最小尺寸约束
  constraints: const BoxConstraints(),
  child: getPopUpView(context),
)

3. 优化行内容的展示间距 #

你原来实现的popUpViewRows方法里的Row结构没有给内容加横向间距，会导致文字和图标贴边，建议调整结构优化展示效果：

GestureDetector popUpViewRows(BuildContext context, String text, String icon) {
  return GestureDetector(
    onTap: () {
      debugPrint('$text clicked');
    },
    child: Container(
      // 给每行内容加统一的内边距，避免元素贴边
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
      child: Row(
        children: [
          Text(
            text,
            style: BPFonts.popUpViewtextStyle,
          ),
          const Spacer(),
          SvgPicture.asset(icon),
        ],
      ),
    ),
  );
}

注意：原来写在Text外面的Center组件在Row布局中没有实际作用，Row会自动对子元素做垂直居中对齐，多余的Center组件可以直接移除。

小提示：如果改完配置依然存在白边，可以检查项目全局的ThemeData中是否自定义了popupMenuTheme，把对应的padding、color参数和上面的配置对齐即可。

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