夜雨聆风
Flutter集成腾讯大模型,让App拥有AI大脑!
智能客服、AI助手、内容生成……大模型正在重塑移动应用。你的Flutter App如何快速接入腾讯混元等大模型能力？本文带你30分钟跑通全流程，实现AI对话、智能回复、实时字幕等场景。
一、为什么要在Flutter中集成大模型？
大模型与移动应用结合，正在创造全新的用户体验：
-
💬 智能对话：App内直接与AI对话，解答用户问题
-
🎯 个性化推荐：根据用户行为生成精准推荐内容
-
📝 内容创作：帮助用户写文案、生成摘要、翻译文本
-
🧠 知识问答：内置专业知识库，随时解答疑问
-
🔊 实时字幕：将语音实时转为文字并智能处理
腾讯云提供的大模型能力，可以让你的Flutter应用快速拥有这些AI能力。
二、方案选型——哪种适合你？
腾讯云大模型在Flutter端的集成有多种方案，我整理了主流选择：
|
|
|
|
|---|---|---|
| AI实时对话（TRTC方案） |
|
需要语音交互、实时对话的应用
|
| 智能客服UIKit |
|
需要标准客服功能的App
|
| 机器人消息插件 |
|
已有IM功能
|
| 直接调用API |
|
有开发能力
|
我的推荐：如果做AI语音助手，选TRTC AI实时对话方案；如果做智能客服，选Customer UIKit；如果已有IM聊天，加个AI机器人，选tencent_cloud_chat_robot。
三、方案一：TRTC AI实时对话（低延迟语音交互）
这是腾讯云最新推出的AI实时对话方案，基于TRTC SDK，支持极低延迟的语音对话，AI可以实时响应、智能打断。
3.1 前提条件
-
开通实时音视频 TRTC 服务
-
开通语音转文字服务
-
准备LLM应用（可使用腾讯混元或第三方大模型）
-
（可选）开通TTS服务
⚠️ 注意：AI实时对话调用会产生费用，详情参见计费说明。
3.2 添加依赖
dependencies:tencent_trtc_cloud: ^2.14.0 # TRTC SDK
3.3 权限配置
Android配置
打开 android/app/src/main/AndroidManifest.xml，添加权限：
<uses-permissionandroid:name="android.permission.INTERNET"/><uses-permissionandroid:name="android.permission.RECORD_AUDIO"/><uses-permissionandroid:name="android.permission.CAMERA"/><uses-permissionandroid:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
iOS配置
打开 ios/Runner/Info.plist，添加权限说明：
<key>NSCameraUsageDescription</key><string>需要相机权限进行视频通话</string><key>NSMicrophoneUsageDescription</key><string>需要麦克风权限进行语音对话</string>
3.4 核心代码实现
1. 初始化TRTC SDK并进入房间
import 'package:tencent_trtc_cloud/tencent_trtc_cloud.dart';class AIRTCService {late TRTCCloud _trtcCloud;String _userId = '';int _roomId = 0;Future<void> initAndEnterRoom({required int sdkAppId,required String userId,required String userSig,required int roomId,}) async {_userId = userId;_roomId = roomId;// 1. 初始化TRTC_trtcCloud = await TencentTRTCCloud.sharedInstance();// 2. 设置回调监听_trtcCloud.registerListener(onRecvCustomCmdMsg: (userId, cmdId, seq, message) {_handleCustomMessage(userId, message);});// 3. 进入房间TRTCParams params = TRTCParams(sdkAppId: sdkAppId,userId: userId,userSig: userSig,roomId: roomId,role: TRTCRoleType.anchor,);await _trtcCloud.enterRoom(params, TRTCAppScene.speechCall);// 4. 开启麦克风（语音模式，高噪声抑制）await _trtcCloud.startLocalAudio(TRTCAudioQuality.speech);print('进入房间成功，开始AI对话');}void _handleCustomMessage(String userId, Uint8List message) {// 处理AI返回的实时字幕和状态String data = utf8.decode(message);try {Map<String, dynamic> jsonData = jsonDecode(data);if (jsonData['type'] == 10000) {// 实时字幕String text = jsonData['payload']['text'];bool isFinal = jsonData['payload']['end'] == true;print('${isFinal ? '完整' : '实时'}字幕: $text');} else if (jsonData['type'] == 10001) {// AI状态：1聆听中 2思考中 3说话中 4被打断 5已说完int state = jsonData['payload']['state'];print('AI状态: $state');}} catch (e) {print('解析消息失败: $e');}}// 发送打断信令Future<void> sendInterrupt() async {int cmdId = 0x2;int timestamp = DateTime.now().millisecondsSinceEpoch;Map<String, dynamic> payload = {"type": 20001, // 打断信令"sender": _userId,"receiver": ["user_bot"], // AI机器人ID"payload": {"id": "interrupt_${_roomId}_$timestamp","timestamp": timestamp ~/ 1000,}};String jsonStr = jsonEncode(payload);Uint8List data = utf8.encode(jsonStr);await _trtcCloud.sendCustomCmdMsg(cmdId, data, true, true);print('发送打断信令');}// 离开房间Future<void> exitRoom() async {await _trtcCloud.exitRoom();TencentTRTCCloud.destroySharedInstance();}}
2. 发起AI对话（服务端调用）
注意：发起AI对话需要在业务后端调用腾讯云API，客户端只需进房即可。这里给出后端调用示例（Node.js）：
// 后端代码示例const tencentcloud = require("tencentcloud-sdk-nodejs");const CimClient = tencentcloud.cim.v20190318.Client;const clientConfig = {credential: {secretId: "你的SecretId",secretKey: "你的SecretKey",},region: "ap-guangzhou",profile: {httpProfile: {endpoint: "cim.tencentcloudapi.com",},},};const client = new CimClient(clientConfig);// 发起AI对话任务async functionstartAIConversation(params) {const { sdkAppId, roomId, userId, aiUserId, llmConfig, ttsConfig } = params;const res = await client.StartAIConversationTask({SdkAppId: sdkAppId,RoomId: roomId.toString(),TargetUserId: userId, // 需要和客户端进房的UserId一致AIConversationConfig: JSON.stringify({LLMConfig: llmConfig,TTSConfig: ttsConfig,}),});return res;}
⚠️ 重要：AI实时对话要求客户端和服务端进入同一个房间号，且TargetUserId必须是客户端进房的用户ID。
3.5 完整示例：AI语音助手页面
classAIVoiceAssistantPageextendsStatefulWidget{@override_AIVoiceAssistantPageState createState() => _AIVoiceAssistantPageState();}class_AIVoiceAssistantPageStateextendsState<AIVoiceAssistantPage> {final AIRTCService _service = AIRTCService();String _subtitle = '';String _aiState = '';bool _isListening = true;@overridevoid initState() {super.initState();_initAI();}Future<void> _initAI() async {// 这里使用测试参数，实际应从服务器获取await _service.initAndEnterRoom(sdkAppId: 1400000000, // 你的SDKAppIDuserId: 'user_${DateTime.now().millisecondsSinceEpoch}',userSig: '你的userSig',roomId: 123456,);}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('AI语音助手')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Container(padding: EdgeInsets.all(20),decoration: BoxDecoration(color: Colors.grey[100],borderRadius: BorderRadius.circular(12),),child: Column(children: [Text(_subtitle.isEmpty ? '点击麦克风开始对话' : _subtitle,style: TextStyle(fontSize: 18),),SizedBox(height: 10),Text('AI状态: $_aiState',style: TextStyle(color: Colors.grey),),],),),SizedBox(height: 30),FloatingActionButton(onPressed: () {_service.sendInterrupt();},child: Icon(Icons.stop),),],),),);}@overridevoid dispose() {_service.exitRoom();super.dispose();}}
四、方案二：智能客服UIKit（快速集成AI客服）
如果你的场景是标准的用户咨询客服，腾讯云提供了开箱即用的Customer UIKit，内置AI机器人能力。
4.1 添加依赖
dependencies:tencentcloud_ai_desk_customer: ^1.6.2 # 智能客服UIKit
4.2 环境要求
-
Flutter版本: 3.24 – 3.27
-
支持模拟器调试及真机运行
⚠️ 注意：如果使用Flutter 3.29，需要先降级至3.24。
4.3 初始化与登录
import 'package:tencentcloud_ai_desk_customer/tencentcloud_ai_desk_customer.dart';class CustomerService {static Future<void> init({required int sdkAppID,required String userID,required String userSig,}) async {await TencentCloudAIDeskCustomer.init(sdkAppID: sdkAppID,userID: userID,userSig: userSig,config: TencentCloudCustomerConfig(), // 可选全局配置);print('智能客服初始化完成');}}
4.4 打开客服聊天页
void openCustomerService(BuildContext context) {TencentCloudAIDeskCustomer.navigate(context: context,customerServiceID: "@customer_service_account", // 客服号ID);}
就这么简单！ 几行代码就实现了完整的AI客服聊天界面。
4.5 多语言支持
如果套餐包支持多语言，可以指定语言：
import 'package:tencentcloud_ai_desk_customer/tencentcloud_ai_desk_customer.dart';import 'package:tencent_desk_i18n_tool/language_json/strings.g.dart';TencentCloudAIDeskCustomer.navigate(context: context,config: TencentCloudCustomerConfig(language: TDeskAppLocale.en, // 指定英语),);
支持的语言：英语、简体中文、繁体中文、日语、印尼语。
五、方案三：IM机器人插件（在聊天中集成AI）
如果你的App已经集成了腾讯云IM，想给用户增加一个AI聊天助手，可以使用tencent_cloud_chat_robot插件。
5.1 添加依赖
dependencies:tencent_cloud_chat_robot: ^最新版本
5.2 判断和渲染机器人消息
import 'package:tencent_cloud_chat_robot/tencent_cloud_chat_robot.dart';// 判断消息是否为机器人消息bool isRobot = await TencentCloudChatRobotPlugin.isRobotMessage(message);// 渲染机器人消息（支持流式回复）if (isRobot) {await TencentCloudChatRobotPlugin.renderRobotMessage(message);}
5.3 后端发送机器人消息格式
机器人消息需要通过服务端发送，格式如下：
{"chatbotPlugin": 1,"src": 2,"isFinished": 1, // 0表示未结束，1表示已结束"chunks": ["hello", "this", "is", "a", "robot"]}
支持流式消息，可以分块发送，逐字显示。
六、方案四：直接调用混元大模型API
如果需要完全自定义的AI能力，可以直接调用腾讯云混元大模型的HTTP API。
6.1 获取API密钥
-
登录腾讯云控制台
-
访问API密钥管理
-
创建SecretId和SecretKey
6.2 调用示例
import 'package:http/http.dart' as http;import 'dart:convert';import 'package:crypto/crypto.dart';class HunyuanAPI {final String secretId;final String secretKey;final String endpoint = "hunyuan.tencentcloudapi.com";HunyuanAPI({required this.secretId, required this.secretKey});Future<String> chat(String message) async {// 1. 构建请求参数final timestamp = (DateTime.now().millisecondsSinceEpoch / 1000).round();final payload = {"Action": "ChatCompletions","Version": "2023-09-01","Model": "hunyuan-lite","Messages": [{"Role": "user","Content": message}]};// 2. 生成签名（简化示例，实际需完整实现TC3-HMAC-SHA256签名）// 建议使用官方SDK或参考签名文档// 3. 发送请求final response = await http.post(Uri.parse('https://$endpoint'),headers: {'Content-Type': 'application/json','Authorization': 'TC3-HMAC-SHA256 ...', // 完整签名'X-TC-Timestamp': timestamp.toString(),'X-TC-Version': '2023-09-01',},body: jsonEncode(payload),);if (response.statusCode == 200) {final data = jsonDecode(response.body);return data['Response']['Choices'][0]['Message']['Content'];} else {throw Exception('调用失败: ${response.body}');}}}
⚠️ 注意：签名计算较复杂，建议使用腾讯云官方SDK或后端中转。
七、避坑指南
❌ AI实时对话收不到字幕
-
确认客户端进房成功，且与服务端调用
StartAIConversationTask的RoomId一致 -
检查自定义消息的
cmdID是否为1 -
确认已开启麦克风采集
startLocalAudio
❌ 智能客服UIKit初始化失败
-
检查SDKAppID是否正确
-
确认已开通智能客服服务
-
客服号ID通常为
@customer_service_account
❌ 编译报错（Flutter版本问题）
-
如果使用Flutter 3.29，降级至3.24：
flutter downgrade 3.24.0 -
Android编译问题：在
build.gradle中添加subprojects配置
❌ 机器人消息不显示
-
确认消息格式正确，包含
chatbotPlugin字段 -
检查
isFinished字段，流式消息需要最后一条标记为1
❌ 费用问题
-
AI实时对话按并发和时长计费，默认并发限制100，超限需提工单
-
智能客服按套餐包计费，具体参考官方文档
八、总结
腾讯云大模型在Flutter端的集成，可以根据场景选择不同方案：
|
|
|
|
|
|---|---|---|---|
| AI实时对话 |
|
|
|
| 智能客服UIKit |
|
|
|
| IM机器人 |
|
|
|
| 直接调用API |
|
|
|
我的建议：
-
想做语音对话AI：用TRTC AI实时对话方案
-
想做App内客服：用智能客服UIKit
-
已有IM聊天：加个IM机器人插件
-
需要完全定制：直接调用混元API（建议后端中转）
如果你有新的见解，欢迎在评论区分享交流！
谢谢你读到最后。
若觉得尚可，恳请点赞、在看、转发分享。
山高水长，我们下期再会。
