如何在Flutter中实现自定义形状的模糊背景？

下面是实现图中步骤导航Widget的代码方案，包含HTML结构和CSS样式：

HTML 结构 #

<div class="step-container">
  <div class="step-item active">
    <div class="step-icon">✓</div>
    <div class="step-content">
      <h3 class="step-title">账户创建</h3>
      <p class="step-desc">完成基本信息填写</p>
    </div>
  </div>
  <div class="step-progress"></div>
  <div class="step-item active">
    <div class="step-icon">2</div>
    <div class="step-content">
      <h3 class="step-title">验证身份</h3>
      <p class="step-desc">提交身份材料审核</p>
    </div>
  </div>
  <div class="step-progress"></div>
  <div class="step-item">
    <div class="step-icon">3</div>
    <div class="step-content">
      <h3 class="step-title">完成设置</h3>
      <p class="step-desc">配置个人偏好选项</p>
    </div>
  </div>
</div>

CSS 样式 #

.step-container {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  max-width: 800px;
  margin: 0 auto;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.step-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
}

.step-item.active .step-icon {
  background-color: #0d6efd;
  color: white;
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.step-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.step-item.active .step-title {
  color: #0d6efd;
}

.step-desc {
  margin: 0;
  font-size: 0.875rem;
  color: #6c757d;
}

.step-progress {
  flex-grow: 1;
  height: 4px;
  background-color: #e9ecef;
  border-radius: 2px;
}

.step-item.active + .step-progress {
  background-color: #0d6efd;
}

这个实现还原了图中的核心样式：激活状态的步骤使用高亮色，进度条根据步骤状态切换颜色，整体布局对齐整齐，适配不同屏幕宽度。

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