Flutter timelines包FixedTimeline设置不同连接器颜色求助

你想要实现类似Flipkart订单追踪的时间线效果（不同阶段的连接器使用不同颜色），但当前代码通过全局TimelineTheme统一设置了连接器颜色，导致所有连接器颜色一致，无法满足需求。

修改方案 #

不要在全局主题中固定连接器颜色，而是通过connectorStyleBuilder根据索引（或业务状态）为每个连接器单独指定颜色：

FixedTimeline.tileBuilder(
  theme: TimelineTheme.of(context).copyWith(
    nodePosition: 0,
    indicatorTheme: IndicatorThemeData(color: Colors.red),
    // 移除全局的connectorTheme设置，避免覆盖自定义颜色
  ),
  builder: TimelineTileBuilder.connectedFromStyle(
    contentsAlign: ContentsAlign.basic,
    // 根据索引动态返回不同颜色的连接器样式
    connectorStyleBuilder: (context, index) {
      // 示例逻辑：已完成的阶段用绿色，未完成用灰色
      final isCompleted = index < 1; // 可根据实际业务状态调整
      return ConnectorStyle.solidLine.copyWith(
        color: isCompleted ? Colors.green : Colors.grey.shade300,
      );
    },
    indicatorStyleBuilder: (context, index) => IndicatorStyle.dot.copyWith(
      // 也可以给指示器设置不同颜色，比如已完成用绿色
      color: index < 1 ? Colors.green : Colors.red,
    ),
    firstConnectorStyle: ConnectorStyle.transparent,
    lastConnectorStyle: ConnectorStyle.transparent,
    contentsBuilder: (context, index) => Padding(
      padding: EdgeInsets.all(12),
      child: Text('Timeline Event $index'),
    ),
    itemCount: 3, // 增加条目数来展示多段连接器效果
  ),
)

原理说明 #

connectorStyleBuilder会为每个连接器单独生成样式，通过index参数可以区分不同位置的连接器，结合业务逻辑（比如订单状态）就能实现不同阶段的颜色区分。同时移除全局connectorTheme的颜色设置，避免自定义样式被覆盖。

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