如何在Flutter中实现带渐变紫色中心圆的渐变六边形效果

以下给出两种可直接落地的实现方式： #

纯CSS实现 #

核心通过clip-path属性裁剪出六边形结构，配合伪元素实现中心渐变圆，无需引入额外资源，适配前端常规开发场景。

代码示例 #

<!-- HTML结构 -->
<div class="hexagon-container"></div>

/* 样式代码 */
.hexagon-container {
  width: 280px;
  /* 自动计算六边形高度，保证比例正确 */
  aspect-ratio: 1 / 0.866;
  background: linear-gradient(135deg, #7b61ff 0%, #f093fb 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  position: relative;
}

/* 中心渐变紫色圆 */
.hexagon-container::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #9d50bb 0%, #6e48aa 100%);
}

调整说明 #

• 修改width属性即可调整六边形整体尺寸
• 更换background的渐变色值、角度即可匹配设计需求的渐变效果
• 调整伪元素的宽高参数即可修改中心圆的大小

SVG实现 #

适合需要矢量缩放、复杂动画或者跨端复用的场景，兼容性更好。

代码示例 #

<svg width="300" height="260" viewBox="0 0 300 260" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 六边形渐变定义 -->
    <linearGradient id="hexGradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#7B61FF" />
      <stop offset="100%" stop-color="#F093FB" />
    </linearGradient>
    <!-- 中心圆渐变定义 -->
    <radialGradient id="circleGradient" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0%" stop-color="#9D50BB" />
      <stop offset="100%" stop-color="#6E48AA" />
    </radialGradient>
  </defs>
  <!-- 六边形路径 -->
  <polygon points="150,0 300,75 300,185 150,260 0,185 0,75" fill="url(#hexGradient)" />
  <!-- 中心圆 -->
  <circle cx="150" cy="130" r="55" fill="url(#circleGradient)" />
</svg>

直接把上述SVG代码嵌入页面即可使用，也可以保存为单独的SVG文件引用。

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