如何在Flutter中创建指定自定义形状？不使用导航包

当然可以，下面针对常见技术栈给出纯原生实现代码，完全不需要依赖导航类包：

Web前端（纯CSS+HTML） #

这个形状本质是左侧带圆角、内部带分隔线的选项栏，用纯CSS就能搞定：

<div class="shape-container">
  <span class="shape-item active">首页</span>
  <span class="shape-item">发现</span>
  <span class="shape-item">我的</span>
</div>

<style>
.shape-container {
  background-color: #f0f0f0;
  border-radius: 24px 0 0 24px; /* 左侧上下圆角 */
  display: flex;
  align-items: center;
  padding: 10px 0;
  width: fit-content;
}
.shape-item {
  padding: 8px 20px;
  position: relative;
  cursor: pointer;
}
.shape-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background-color: #ccc;
}
.shape-item.active {
  color: #2563eb;
  font-weight: 600;
}
</style>

Flutter（纯Widget实现） #

用Flutter自带的Container、Row等组件就能实现，无需额外依赖：

Container(
  decoration: BoxDecoration(
    color: Colors.grey.shade200,
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(24),
      bottomLeft: Radius.circular(24),
    ),
  ),
  padding: const EdgeInsets.symmetric(vertical: 10),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      _buildNavItem('首页', isActive: true),
      const VerticalDivider(
        color: Colors.grey,
        width: 1,
        indent: 8,
        endIndent: 8,
      ),
      _buildNavItem('发现'),
      const VerticalDivider(
        color: Colors.grey,
        width: 1,
        indent: 8,
        endIndent: 8,
      ),
      _buildNavItem('我的'),
    ],
  ),
)

// 复用的选项组件
Widget _buildNavItem(String title, {bool isActive = false}) {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 20),
    child: Text(
      title,
      style: TextStyle(
        color: isActive ? Colors.blue.shade700 : Colors.black87,
        fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
        fontSize: 14,
      ),
    ),
  );
}

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