Flutter需求：实现带顶部标题、SVG图标及可变色分隔线的水平Stepper

需求说明 #

我需要实现一个可根据状态变化的水平Stepper，具体要求如下：

• 顶部带有对应步骤的标题
• 圆形容器内可放置不同的SVG图片
• 分隔线颜色可随状态切换，且厚度保持一致

尝试过的方案及问题 #

我试过多种方案和第三方包，都没达到预期效果：

• 官方Stepper组件：标题位于侧边，圆形内部仅支持勾选标记和数字，不符合布局和内容需求
• im_stepper包中的IconStepper：仅支持图标步骤，没有标题区域，分隔线是点状样式，不满足需求
• enhance_stepper包中的EnhanceStep：标题在图标下方，没有圆形容器包裹图标，修改包内代码后图标与线条无法对齐
• 自定义Widget：仅实现了基础UI，切换选中状态时无法同步更新之前步骤的样式，标题文本也未居中对齐，仅通过Row的MainAxisAlignment.spaceBetween进行布局

尝试的自定义Widget代码 #

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class Testing4 extends StatefulWidget {
  const Testing4({Key? key}) : super(key: key);

  @override
  State<Testing4> createState() => _Testing4State();
}

class _Testing4State extends State<Testing4> {
  final List<int> steps = [1, 2, 3];
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 30.0),
      child: Center(
          child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.max,
            children: [
              for (var step in steps) Center(child: Text('STEPPER # $step'))
            ],
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width,
            height: kToolbarHeight,
            child: Stack(
              alignment: Alignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      width: MediaQuery.of(context).size.width / 3,
                      child: const Divider(
                        color: Colors.black,
                        thickness: 5,
                      ),
                    ),
                    SizedBox(
                      width: MediaQuery.of(context).size.width / 3,
                      child: const Divider(
                        color: Colors.grey,
                        thickness: 5,
                      ),
                    ),
                  ],
                ),
                Center(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      for (var step in steps)
                        Column(
                          children: [
                            Stack(
                              children: [
                                Container(
                                  decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color:
                                        step == 2 ? Colors.black : Colors.grey,
                                  ),
                                  padding: const EdgeInsets.all(10),
                                  child: Center(
                                    child: SvgPicture.asset("assets/check.svg"),
                                  ),
                                )
                              ],
                            ),
                          ],
                        )
                    ],
                  ),
                )
              ],
            ),
          ),
        ],
      )),
    );
  }
}

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