求帮助：实现带对勾标记的Flutter自定义步进器

以下是用HTML+CSS实现的带对勾标记的自定义步进器，可适配你需要的样式：

HTML 结构 #

<div class="stepper-container">
  <div class="stepper-item active">
    <div class="stepper-marker">✓</div>
    <span class="stepper-text">步骤1</span>
  </div>
  <div class="stepper-line"></div>
  <div class="stepper-item active">
    <div class="stepper-marker">✓</div>
    <span class="stepper-text">步骤2</span>
  </div>
  <div class="stepper-line"></div>
  <div class="stepper-item">
    <div class="stepper-marker"></div>
    <span class="stepper-text">步骤3</span>
  </div>
  <div class="stepper-line"></div>
  <div class="stepper-item">
    <div class="stepper-marker"></div>
    <span class="stepper-text">步骤4</span>
  </div>
</div>

CSS 样式 #

.stepper-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
}

.stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stepper-marker {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: transparent;
  transition: all 0.3s ease;
}

.stepper-item.active .stepper-marker {
  background-color: #2196F3;
  border-color: #2196F3;
  color: white;
}

.stepper-line {
  flex: 1;
  height: 2px;
  background-color: #ccc;
}

.stepper-item.active ~ .stepper-line {
  background-color: #2196F3;
}

.stepper-text {
  font-size: 0.9rem;
  color: #666;
}

.stepper-item.active .stepper-text {
  color: #2196F3;
  font-weight: bold;
}

说明 #

• 用active类标记已完成的步骤，自动切换圆形标记背景色、显示对勾，同时更新连接线颜色
• 采用Flex布局实现横向排列，可自适应不同屏幕宽度
• 对勾直接使用字符✓，也可替换为SVG图标或CSS绘制的图形
• 所有样式参数（颜色、尺寸、间距等）可根据需求自由调整

内容的提问来源于stack exchange，提问作者Tech-Chandra