Flutter 接入 AI 网关做流式对话 - 一个下午从零到跑通，我把踩坑时间都替你省了

我是个独立开发者，手上维护着一款 Flutter 写的陪伴类应用。上个月决定加流式对话功能时，我最担心的不是代码写不出来，而是时间会烧在哪儿。

先说我自己的前后对比，给你一个直观预期：

粗算下来，我从一个完全没接过 AI 的 Flutter 项目，到真机上看到文字一个字一个字蹦出来，总共花了不到一个下午。而按我过去的经验，走“逐家直连”的路线，这至少是一周的活。对独立开发者来说，省下的这几天不是数字游戏——是上线时间和错过窗口期的差别。

下面是完整的跑通过程。

第一步：注册并拿到 API Key

打开 ThisToken.AI 的注册页（文末有链接），邮箱注册后进入控制台，创建一个 API Key，复制保存。整个流程几分钟。

注意两点：

1. Key 只在创建时完整显示一次，先存到安全的地方；
2. 不要把 Key 打包进 Flutter 客户端。Flutter 应用是跑在用户设备上的，反编译就能拿到。正确姿势是自建一个薄薄的后端代理（我用的是最简单的 Python 服务），客户端只跟自己的服务器通信。这一点之前已有同行用惨痛教训验证过。

第二步：先在服务端跑通

不建议直接在 Flutter 里写流式解析。先用十行 Python 验证 Key 和链路是通的，这一步能帮你把“Key 无效”“格式错误”“网络不通”这几类问题提前暴露。下面这段代码可以直接复制运行（pip install openai 后即可）：

from openai import OpenAI

client = OpenAI(
    api_key="sk-你的APIKey",
    base_url="https://api.thistoken.ai/v1"
)

stream = client.chat.completions.create(
    model="gpt-4o-mini",  # 模型名以网关文档为准，可随时更换
    messages=[
        {"role": "system", "content": "你是一个简洁友好的助手。"},
        {"role": "user", "content": "用两句话介绍流式输出的好处"}
    ],
    stream=True,
)

for chunk in stream:
    delta = chunk.choices[0].delta
    if delta.content:
        print(delta.content, end="", flush=True)

跑起来后终端会逐字输出——这就是流式。把这段代码包进一个接口，用 SSE 或 WebSocket 转发给 Flutter 端，服务端部分就完成了。模型不合适？改 model 那一行字符串就行，不需要换 SDK、改协议，这是我前面表格里“换模型只要几分钟”的来源。

第三步：Flutter 端接收并渲染

Flutter 端不需要任何 AI SDK，标准库就够。核心思路：

1. 用 http 包发起 POST 请求，StreamedRequest 拿到字节流；
2. 按 SSE 格式（以 data: 开头的行）切割；
3. 每收到一个 chunk，setState 把新文字追加到状态里。

界面渲染推荐用 SingleChildScrollView + SelectableText.rich，如果你需要打字机光标效果，可以在最后一个字符后面拼一个闪烁的 ▌。对于长对话列表，用 ListView 加 reverse: true，并监听滚动保持吸底。

两个容易踩的坑提前说：

• 分块边界切割：TCP 分包不保证按 SSE 事件对齐，务必在缓冲区里按 \n\n 切事件，残留部分留到下一轮拼接，否则会出现偶发的乱码或丢字；
• 取消机制：用户切换页面或点“停止生成”时，要主动 cancel 掉 HTTP 请求的 subscription，否则 token 会在后台继续消耗——这属于那种月底看账单才发现的隐形浪费，具体价格与计费方式以官网价格页为准。

效率账的最后一项：维护成本

跑通只是开始。独立开发者最容易低估的是后续维护：供应商限流策略调整、接口格式变化、想试新模型，每一次都是一轮改造。统一网关把这部分收敛成“改配置不改代码”，我省下的不只是第一天的那几天，而是之后每个月零碎的修补时间。按每周省 1-2 小时估算，一年下来是几十个小时——足够再做一个小功能了。

小结

整个流程回顾一下：注册拿 Key（几分钟）→ Python 十行验证链路（十分钟）→ 包成代理接口（半小时）→ Flutter 端流式渲染（一两个小时）。一个下午，一个能上线的能力。

如果你也想开始，注册入口在这里：https://api.thistoken.ai/register，注册完创建 Key，把上面那段 Python 跑通，你的流式对话就正式迈出第一步了。

---

想直接跑通示例？访问 https://api.thistoken.ai/register 注册 ThisToken.AI，获取 API Key 后即可开始。