如何在Dart Flutter中实现容器内凹曲线（底部导航栏需求）

这里有几个实用的方案，覆盖不同兼容性和复杂度需求：

方案1：CSS Clip-Path 快速实现 #

适合简单内凹弧形，代码简洁：

.bottom-nav-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  /* 核心：定义内凹多边形路径 */
  clip-path: polygon(0 0, 40% 0, 50% 20px, 60% 0, 100% 0, 100% 100%, 0 100%);
}

• 调整50% 20px中的20px可改变内凹深度，修改40%和60%能调整内凹宽度。
• 缺点：IE浏览器不支持clip-path。

方案2：CSS 伪元素 + 圆角（兼容性最优） #

适合需要兼容老浏览器的场景，曲线更平滑：

.bottom-nav-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 裁剪超出容器的伪元素 */
}

.bottom-nav-container::before {
  content: '';
  position: absolute;
  top: -20px; /* 向上超出容器形成内凹 */
  left: 50%;
  transform: translateX(-50%);
  width: 80px; /* 内凹区域宽度 */
  height: 40px; /* 内凹区域高度（决定深度） */
  background: #ffffff; /* 与容器背景色一致 */
  border-radius: 50%;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 匹配容器阴影 */
}

• 若容器背景非纯色，将伪元素background改为父元素背景色即可。
• 所有现代浏览器及大部分老浏览器均支持。

方案3：SVG 背景（自定义复杂曲线） #

适合需要非对称、自定义曲线的场景：

.bottom-nav-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  /* 内联SVG作为顶部背景 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><path d="M0 0 L35 0 Q50 25 65 0 L100 0 L100 20 L0 20 Z" fill="%23ffffff"/></svg>');
  background-repeat: no-repeat;
  background-size: 100% 20px;
  background-position: top center;
}

• 修改SVG路径中的Q50 25可调整贝塞尔曲线控制点，实现任意形状内凹。
• 兼容性好，所有支持SVG的浏览器均可正常显示。

额外提示 #

• 若导航栏需与页面内容重叠，给页面底部添加padding-bottom（值等于导航栏高度），避免内容被遮挡。
• 可根据设计需求调整阴影参数，增强层次感。

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