FlutterFlow集成chat_gpt_flutter实现ChatGPT流式UI实时更新问题

问题分析 #

API流式数据接收正常，但UI仅在流结束后才显示完整内容，核心原因在于：

1. 对FFAppState().ChatWithAI列表的更新方式（删除最后一项再添加新项）未触发FlutterFlow的状态监听机制，导致UI无法感知局部变化
2. 局部变量firstAIResponseTokenReceived会在流回调中被重复初始化，可能导致逻辑异常
3. 未明确确保状态更新操作在主线程执行

解决方案 #

1. 调整AppState状态存储

先在FlutterFlow的AppState中添加一个布尔型状态变量isFirstAIMessageTokenReceived，初始值设为false，用于替代局部变量标记首次AI响应token。

2. 修改自定义动作代码

final request = CompletionRequest(
  messages: gptMessages,
  stream: true,
  maxTokens: 3000,
  model: ChatGptModel.gpt35Turbo,
);

StreamSubscription<StreamCompletionResponse>? streamSubscription;

final stream = await chatGpt.createChatCompletionStream(request);

streamSubscription = stream?.listen(
  (event) async {
    await FFAppState().update(() {
      if (event.streamMessageEnd) {
        print("Received end of response");
        streamSubscription?.cancel();
        // 重置标记，为下一次AI响应做准备
        FFAppState().isFirstAIMessageTokenReceived = false;
      } else {
        if (!FFAppState().isFirstAIMessageTokenReceived) {
          // 初始化AI消息并添加到状态列表
          final aiMsg = ChatMessageStruct(
            role: "assistant",
            content: "",
          );
          FFAppState().ChatWithAI.add(aiMsg);
          FFAppState().isFirstAIMessageTokenReceived = true;
        } else {
          // 直接更新最后一条AI消息的内容，无需删除再添加
          final lastAIMsg = FFAppState().ChatWithAI.last;
          lastAIMsg.content += event.choices?.first.delta?.content ?? '';
        }
      }
    });
  },
  onError: (error) {
    print("Stream error: $error");
    streamSubscription?.cancel();
    FFAppState().isFirstAIMessageTokenReceived = false;
  },
);

3. 关键修改说明

• 使用AppState存储标记：避免局部变量在流回调中重复初始化，确保首次token的判断逻辑稳定
• 直接更新列表元素属性：不再执行removeLast+add操作，直接修改最后一条消息的content属性。列表为引用类型，内部元素属性变化会被FlutterFlow的状态监听器捕捉，触发UI实时刷新
• 添加错误处理：流异常时取消订阅并重置标记，避免状态异常影响后续交互
• 主线程更新保障：通过FFAppState().update包裹状态操作，确保所有UI相关更新在主线程执行

4. 验证ListView绑定

确保ListView的itemCount绑定到FFAppState().ChatWithAI.length，列表项内容直接绑定对应ChatMessageStruct的content字段，同时可添加滚动控制器，在消息更新时自动滚动至底部，提升用户体验。

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