引言：本文将介绍如何使用Flutter开发一个支持多语言和主题设置的聊天应用，并结合ChatGPT实现智能聊天功能。
废话不多说，本项目直接使用开源flutter模版一分钟初始化，并且在一天内实现了第一个可供使用的版本，项目中提供macOS版本下载，其他版版本可以自行 flutter build xxx 的方式打包。
直接贴上项目地址：https://github.com/bravekingzhang/flutter_chat_box
支持的特新：
全平台支持
- macOS ✅
- Linux✅
- Windows✅
- Android✅
- iOS✅
框架技术核心
- 多语言支持，可以方便切换中英文。
- 单元测试支持、组件测试支持，保证高质量代码。
- 优秀的全局数据管理方式 flutter_bloc，完美的业务逻辑和界面UI代码分层隔离。
- flutter_bloc_test，bloc也可以mock测试，完全脱离界面耦合。
- 主题切换，黑暗和白天随意切换，保护眼睛。
- 统一的路由管理，拜托flutter原生路由不便于管理的问题。
- font_awesome_flutter，保证无限制的icon使用，解决系统icon不够用的恐慌。
一、背景
Flutter是一个跨平台的应用开发框架，他的优势是可以用于开发iOS、Android、Web和桌面端应用，而且一套代码解决多端问题。如今，chatGPT应用如日中天，如何为用户提供更加便捷和智能的以及界面清爽聊天体验，是一个难题，当然对于有chatGPT辅助写代码的情况下，似乎也不是很难，比如，我这个项目就是借助chatGPT技术支持的代码编辑神器https://www.cursor.so/ 大概花上1天耗时搞定。
二、实现
为了实现一个适配移动端与桌面端的聊天应用，我们将使用Flutter框架完成，其中包括聊天界面和聊天逻辑的实现、全局数据管理和多语言、主题设置的支持，以及与ChatGPT进行对话的实现。
聊天界面- 聊天界面的实现
Flutter中可以使用ListView组件实现聊天记录的展示，同时根据消息类型采用不同的UI组件进行展示。例如，我们可以使用Text和图片组件来展示文本消息和图片消息，第一个版本，先不考虑图片的展示，仅仅显示代码以及普通文字，因此一个简单的listview 就可以搞定，唯一的细节是要把和chatGPT对话的内容已聊天的形式呈现出来。
其代码逻辑可以参考这里：/main/lib/components/chat.dart
实现难度非常低，因此右边这个聊天对话界面框架我直接让chatGPT帮我生成的，只是后期我补充了一些逻辑进来。
代码语言：javascript复制Expanded(
child: Scrollbar(
controller: _scrollController,
thumbVisibility: true,
child: BlocBuilder<MessageBloc, MessageState>(
builder: (context, state) {
WidgetsBinding.instance.addPostFrameCallback((_) {
_scrollToNewMessage();
});
if (state.runtimeType == MessagesLoaded) {
var currentState = state as MessagesLoaded;
return ListView.builder(
controller: _scrollController,
itemCount: currentState.messages.length,
itemBuilder: (context, index) {
return _buildMessageCard(
currentState.messages[index]);
},
);
} else {
return _buildExpandEmptyListView();
}
},
),
),
),聊天逻辑的实现
在用户输入消息后，我们需要对消息进行处理，并将其发送到相应的聊天窗口。其背后应该有两数据表[一张会话表，一张聊天信息表，需要关联会话主建 conversationId ，可以通过uuid来生成]来记录我们和chatGPT对话的全部内容，那么此时肯定需要有一个会话的概念在这，所以，实现的思路就是：
代码语言：javascript复制1、如果没有会话，就创建一个会话 conversation
2、有了会话的conversationId ，就拿着这个ID向 message 表中插入我们问chatGPT的问题
3、带着这个问题，去问chatGPT API 接口查询
4、因为我们需要实现打字效果，因此，调用的是流式API，这和我们平常调用API 接口的方式有点不一样，
平常是一次调用一次返回，而流式调用是一次调用多次返回，因此我们可以使用dart 的 stream API 来处理
5、但是更好的方式是，使用flutter_bloc ，这样，我们可以将界面UI 和 逻辑部分做到很好的隔离，方便维护
全局数据管理
Flutter应用中可以使用Flutter_bloc这个全局数据管理库来更好地管理全局数据。我们可以将聊天记录的获取、多语言和主题设置等操作集中处理，以便于管理和维护。
多语言和主题设置的支持
Flutter提供了国际化和主题管理API，我们可以将应用所需的各种语言和主题资源文件集中存放，并在应用启动时根据用户选择的语言和主题载入相关资源文件，这部分我使用flutter_bloc 实现，有个好处，这个库有个hydrated_bloc 插件，可以支持我非常方便的缓存本地设置。
与ChatGPT进行智能对话
ChatGPT是一种聊天机器人API，可以为用户提供智能聊天功能。在Flutter应用中，我们可以使用HTTP请求向ChatGPT发送请求，所有的逻辑全部都在flutter_bloc 封装的 逻辑中完成，当然这里用到了 flutter pub 上别人提供的 dart 访问 openAi 的第三方库。其核心逻辑可以看这里：/blob/main/lib/repository/message.dart
