Flutter 是一款跨平台的移动应用开发框架，而 GetX 是 Flutter 中一种简单易用的状态管理和路由管理工具。本篇我们将使用 Flutter 和 GetX 实现一个简单的聊天界面，以与 ChatGPT 进行交互。

我们需要在 Flutter 项目中引入 GetX 库。在pubspec.yaml文件中添加以下依赖：

dependencies:flutter:sdk: flutterget: 

在main函数中添加以下代码：

void main() {//在main函数第一行添加这句话WidgetsFlutterBinding.ensureInitialized();runApp(GetMaterialApp(home: ChatPage(),));
}

确保Flutter Widgets已经初始化，并且启动应用程序的ChatPage页面。

接下来，我们需要创建一个ApiProvider类，用于与 OpenAI API 进行交互。这个类继承自GetConnect，GetConnect是一个轻量级的 HTTP 客户端，它能够简化与 API 的通信过程。以下是ApiProvider类的代码：

class ApiProvider extends GetConnect {/// 这里填写自己OpenAI API Keyfinal String apiKey = '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';final String baseUrl = 'https://api.openai.com';final Duration timeout = Duration(seconds: 30);Map<String, String> _headers() {return {'Content-Type': 'application/json','Authorization': 'Bearer $apiKey',};}ApiProvider() {httpClient.baseUrl = baseUrl;httpClient.timeout = timeout;httpClient.addAuthenticator((request)  {request.headers.addAll(_headers());return request;});}Future<Response> completions(String body) {return post('/v1/chat/completions', body);}
}

在这个类中，我们设置了 API 的基础 URL 和超时时间，并实现了 HTTP 请求的授权和身份验证。我们还实现了completions方法，用于向 OpenAI API 发送请求并获取聊天机器人的回复。注意这里需要设置自己账号的API KEY， 地址： https://platform.openai.com/account/api-keys

接下来，我们需要创建一个ChatLogic类，用于处理聊天机器人的逻辑。以下是ChatLogic类的代码：

class ChatLogic extends GetxController {final ChatState state = ChatState();final ApiProvider provider = ApiProvider();Future<void> sendMessage(String content) async {state.requestStatus(content);update();final response = await provider.completions(json.encode({"model": "gpt-3.5-turbo","messages": [{"role": "user", "content": "$content"}]}));try {if(response.statusCode == 200) {final data = response.body;final text = data['choices'][0]['message']['content'];state.responseStatus(text);} else {state.responseStatus(response.statusText ?? '请求错误，请稍后重试');}} catch(error) {state.responseStatus(error.toString());}update();}
}

在这个类中，我们创建了一个sendMessage方法，该方法接收用户的消息并发送给 OpenAI API，然后等待 API 返回响应。在收到响应后，我们将从 API 返回的 JSON 数据中提取出回复消息的内容，并将其更新到ChatState状态类的messages列表中，然后在 UI 中显示。

接下来，我们需要创建一个ChatState类来管理我们的应用程序状态。以下是ChatState类的代码：

class ChatState {String message = '';String sender = 'user';bool isRequesting = false;List<Map<String, dynamic>> messages = [];void requestStatus(String content) {messages.add({'text': content, 'sender': 'user'});sender = 'bot';messages.add({'text': '正在回复中...', 'sender': sender});isRequesting = true;message = '';}void responseStatus(String content) {messages.removeLast(); // Remove "正在回复中..." 状态messages.add({'text': content, 'sender': sender});sender = 'user';isRequesting = false;}
}

在这个类中，存储了聊天应用程序的状态信息，包括消息、发送者、请求状态和历史消息列表。requestStatus()方法用于更新状态以反映正在发送消息的状态，responseStatus()方法用于更新状态以反映接收到的消息。

最后，我们定义了ChatPage类，它继承自StatelessWidget，它将用于展示聊天对话框。以下是ChatPage类的代码：

class ChatPage extends StatelessWidget {ChatPage({Key? key}) : super(key: key);final logic = Get.put(ChatLogic());final state = Get.find<ChatLogic>().state;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(centerTitle: true,title: Text('你问我答'),),body: GetBuilder<ChatLogic>(builder: (context) => Column(children: [Expanded(child: ListView.builder(itemCount: state.messages.length,itemBuilder: (BuildContext context, int index) {Map m = state.messages[index];return Padding(padding: const EdgeInsets.all(8.0),child: Row(mainAxisAlignment: m['sender'] == 'user'? MainAxisAlignment.end: MainAxisAlignment.start,children: [Flexible(child: Container(padding: const EdgeInsets.all(8.0),decoration: BoxDecoration(borderRadius: BorderRadius.circular(8.0),color: m['sender'] == 'user'? Colors.green[100]: Colors.white,),child: Text(m['text']),),)],),);},),),Container(decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.only(topLeft: Radius.circular(12.0),topRight: Radius.circular(12.0),),),child: Row(children: [Expanded(child: Padding(padding: const EdgeInsets.all(8.0),child: TextField(decoration: InputDecoration(hintText: '请输入消息',border: InputBorder.none,),controller:TextEditingController(text: state.message),onChanged: (value) {state.message = value;}),),),IconButton(icon: Icon(Icons.send),onPressed: state.isRequesting? null: () {logic.sendMessage(state.message);},),],),),],),),);}
}

该类包含一个ChatLogic实例和一个ChatState实例。在build()方法中，我们使用GetBuilder包装整个聊天界面。这个界面包括一个消息列表和一个输入框，用户可以在其中输入消息并发送给聊天机器人。ListView.builder用于显示历史消息，TextField和IconButton用于接收用户输入并发送消息。在发送消息之前，会检查当前状态是否为请求状态，以避免重复发送请求。

到这里一个简单的聊天功能就完成了，运行下看看效果吧：

综上所述，本篇介绍了一个使用 Flutter 和 OpenAI API 实现的基于 GPT-3 的聊天机器人。通过实现ApiProvider、ChatLogic和ChatState类，我们能够将 OpenAI API 的功能集成到 Flutter 应用程序中，并实现一个基本的聊天界面。感兴趣的小伙们可以自己试试哈，Demo地址：https://github.com/smallmarker/OpenAIChat

本文链接：https://my.lmcjl.com/post/7554.html