Dart修改Stepper线条颜色：点击按钮后颜色不生效问题排查

• 直接修改Flutter库的Stepper.dart无效：你修改的是本地Flutter SDK里的源码，但项目实际编译时使用的是status_change包内部的Stepper实现（或Flutter官方包的缓存版本），本地修改不会被纳入项目构建流程，所以颜色变更不生效。
• 未触发组件重建：即使颜色变量被修改，如果没有通过状态管理（比如setState）触发Stepper组件重新构建，界面也不会更新新的颜色。

1. 基于status_change包自定义样式（推荐） #

status_change本身支持自定义Stepper样式，无需修改官方源码。结合状态管理就能实现点击按钮切换线条颜色：

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

class CustomHorizontalStepper extends StatefulWidget {
  const CustomHorizontalStepper({super.key});

  @override
  State<CustomHorizontalStepper> createState() => _CustomHorizontalStepperState();
}

class _CustomHorizontalStepperState extends State<CustomHorizontalStepper> {
  bool _showRedLine = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        StatusChange.tileBuilder(
          theme: StatusChangeThemeData(
            direction: Axis.horizontal,
            connectorTheme: ConnectorThemeData(
              color: _showRedLine ? Colors.red : Colors.grey, // 控制线条颜色
              thickness: 2,
            ),
          ),
          builder: StatusChangeTileBuilder.connected(
            itemWidth: (_) => MediaQuery.of(context).size.width / 3,
            nameWidget: (context, index) => Text('Step ${index + 1}'),
            indicatorWidget: (context, index) => const CircleAvatar(
              child: Text('1'),
            ),
            itemCount: 3,
          ),
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _showRedLine = !_showRedLine;
            });
          },
          child: const Text('testing'),
        ),
      ],
    );
  }
}

2. 若需自定义_buildHorizontal方法 #

如果确实要修改该方法逻辑，需按以下步骤操作：

• Fork status_change包到自己的代码仓库，修改包内对应的Stepper实现代码。
• 在项目pubspec.yaml中替换依赖为你fork的仓库地址。
• 确保颜色变量是可响应的（比如在State类中维护），点击按钮时调用setState触发组件重建，让新颜色生效。

• 不要直接修改Flutter SDK或第三方依赖的本地源码，这类修改不受版本控制，且依赖更新后会被覆盖。
• UI样式变更必须通过状态管理触发组件重建，才能同步更新界面。

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