如何减小Flutter Stepper横向菜单栏的高度？

Flutter官方提供的Stepper组件在横向模式下，步骤菜单栏的高度由源码内部的硬编码常量kStepHeaderHeight控制，默认值为72，没有对外暴露直接调整高度的参数，可通过以下三种方案实现需求：

方案1：自定义修改Stepper源码（最稳定灵活） #

该方案适配原生Stepper的全部交互逻辑，无额外依赖，可自定义空间最大：

• 新建自定义组件文件（如custom_stepper.dart）
• 复制Flutter SDK中material/stepper.dart的全部Stepper相关源码到自定义文件中
• 搜索源码中的kStepHeaderHeight常量，将默认值修改为你需要的高度（如48）
• 可同步修改源码中图标、文字对应的边距属性，适配新的高度
• 后续Flutter版本升级时，注意同步更新自定义Stepper的源码即可

方案2：嵌套Transform快速压缩高度（改造成本最低） #

如果不需要精细调整，只是要缩小高度，可以直接嵌套缩放组件实现：

SizedBox(
  // 设置你需要的最终高度
  height: 50,
  child: OverflowBox(
    // 对应原生Stepper的默认高度72
    maxHeight: 72,
    child: Transform.scale(
      // 缩放比例根据实际高度需求调整
      scale: 0.7,
      alignment: Alignment.topCenter,
      child: Stepper(
        type: StepperType.horizontal,
        // 你的原有Stepper配置
        steps: _yourSteps,
        currentStep: _currentIndex,
      ),
    ),
  ),
)

该方案的缺点是缩放会同步缩小步骤图标和文字，可能出现轻微模糊，适合对精度要求不高的快速开发场景。

方案3：完全自定义横向步骤栏（自由度最高） #

如果不需要Stepper自带的底部操作按钮、步骤内容联动等功能，可以自己实现横向步骤栏：

Row(
  children: List.generate(stepCount, (index) {
    return Expanded(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 22,
            height: 22,
            decoration: BoxDecoration(
              color: index <= currentIndex ? Colors.blueAccent : Colors.grey.shade300,
              shape: BoxShape.circle,
            ),
            child: Center(
              child: Text(
                '${index + 1}',
                style: TextStyle(color: index <= currentIndex ? Colors.white : Colors.black54, fontSize: 12),
              ),
            ),
          ),
          const SizedBox(height: 4),
          Text(
            stepTitles[index],
            style: const TextStyle(fontSize: 12),
          )
        ],
      ),
    );
  }),
)

该方案可以完全自由控制高度、样式、连接线效果，没有原生Stepper的各种限制，缺点是需要自己实现步骤切换的交互逻辑。

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