如何在Flutter TextField中为机器人与用户文本设置不同颜色？

要在Flutter的TextField中实现动态更新的多色可编辑文本，你可以通过自定义TextEditingController子类来实现，替代依赖第三方包的方案。以下是具体步骤：

1. 定义消息数据结构 #

首先，用带类型标识的消息对象替代纯字符串列表，方便区分用户输入和机器人输出：

enum MessageType { user, bot }

class Message {
  final MessageType type;
  final String content;

  Message(this.type, this.content);
}

2. 自定义文本控制器 #

创建继承自TextEditingController的类，重写buildTextSpan方法，根据消息类型设置不同颜色：

class ColoredTextController extends TextEditingController {
  final List<Message> messages;

  ColoredTextController(this.messages);

  @override
  TextSpan buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}) {
    final List<TextSpan> spans = [];
    // 自定义颜色：用户输入蓝色，机器人输出绿色
    const userColor = Colors.blue;
    const botColor = Colors.green;

    for (final message in messages) {
      final textColor = message.type == MessageType.user ? userColor : botColor;
      spans.add(TextSpan(
        text: message.content,
        style: style?.copyWith(color: textColor) ?? TextStyle(color: textColor),
      ));
    }

    return TextSpan(style: style, children: spans);
  }
}

3. 集成到TextField并动态更新 #

初始化控制器和消息列表，收到机器人输出或用户输入时更新消息列表并通知控制器刷新：

// 初始化
final List<Message> conversationMessages = [];
final ColoredTextController textFieldController = ColoredTextController(conversationMessages);

// 收到机器人输出时的更新逻辑
void updateWithBotOutput(String output) {
  conversationMessages.add(Message(MessageType.bot, output));
  textFieldController.notifyListeners(); // 通知UI刷新样式
}

// 用户输入提交后的逻辑（示例）
void submitUserInput(String input) {
  conversationMessages.add(Message(MessageType.user, input));
  textFieldController.notifyListeners();
}

对应的TextField组件代码：

TextField(
  controller: textFieldController,
  expands: true,
  maxLines: null,
  // 基础样式，颜色会被控制器中的TextSpan覆盖
  style: const TextStyle(fontSize: 16),
  decoration: const InputDecoration(
    border: InputBorder.none,
    hintText: 'Enter prompt',
    hintStyle: TextStyle(
      color: AppColors.darkText,
      fontSize: 20,
    ),
  ),
)

方案优势 #

• 完全自定义颜色规则，适配动态变化的内容，不受第三方包的检测规则限制
• 基于Flutter原生API实现，稳定性更高
• 支持后续扩展更多样式（如字体、粗细），只需修改buildTextSpan中的逻辑

注意：如果需要支持编辑后仍严格保留各部分的颜色，需要额外处理文本编辑时的消息列表同步（比如监听控制器的text变化并拆分消息），如果仅需初始渲染多色且允许编辑后颜色统一，上述方案即可满足需求。

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