[特殊字符] 完整 Flutter + OpenAI 聊天助手代码详解：从界面到智能回复全实现

最新推荐文章于 2025-11-12 07:14:11 发布

原创最新推荐文章于 2025-11-12 07:14:11 发布 · 793 阅读

CC 4.0 BY-SA版权

文章标签：

在上一篇文章中，我们讲解了如何从 0 到 1 打造一款 AI 聊天助手 App 的思路与架构。今天，我们来一鼓作气 —— 完整实现核心功能：
用 Flutter + OpenAI API 构建一个通用 AI 聊天助手 App，支持输入对话、获取 AI 回复、上下文管理、界面展示！

📦 一、项目结构说明

我们采用标准 Flutter 项目结构，组件职责清晰，方便维护和扩展：

lib/
├── main.dart               # 程序入口
├── screens/
│   └── chat_screen.dart    # 主聊天界面
├── widgets/
│   ├── message_bubble.dart # 聊天气泡组件
├── services/
│   └── openai_service.dart # OpenAI 接口逻辑
├── models/
│   └── message.dart        # 消息数据模型
└── config.dart             # API Key 配置文件

⚙️ 二、依赖配置

在 pubspec.yaml 中添加：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.6
  flutter_dotenv: ^5.0.2 # 用于管理 API key

📌 三、关键代码详解

1️⃣ 消息模型（models/message.dart）

class Message {
  final String text;
  final bool isUser;

  Message({required this.text, required this.isUser});
}

2️⃣ Chat UI 页面（screens/chat_screen.dart）

import 'package:flutter/material.dart';
import '../models/message.dart';
import '../services/openai_service.dart';
import '../widgets/message_bubble.dart';

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final List<Message> _messages = [];
  final TextEditingController _controller = TextEditingController();

  void _sendMessage() async {
    String input = _controller.text;
    if (input.isEmpty) return;
    setState(() {
      _messages.add(Message(text: input, isUser: true));
    });
    _controller.clear();

    String aiReply = await OpenAIService.getReply(_messages);
    setState(() {
      _messages.add(Message(text: aiReply, isUser: false));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("AI 聊天助手")),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (_, index) => MessageBubble(message: _messages[index]),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(controller: _controller),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

3️⃣ 聊天气泡组件（widgets/message_bubble.dart）

import 'package:flutter/material.dart';
import '../models/message.dart';

class MessageBubble extends StatelessWidget {
  final Message message;

  const MessageBubble({required this.message});

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: message.isUser ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
        padding: EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: message.isUser ? Colors.blue[200] : Colors.grey[300],
          borderRadius: BorderRadius.circular(12),
        ),
        child: Text(message.text),
      ),
    );
  }
}

4️⃣ OpenAI 服务类（services/openai_service.dart）

import 'dart:convert';
import 'package:http/http.dart' as http;
import '../models/message.dart';
import '../config.dart';

class OpenAIService {
  static Future<String> getReply(List<Message> messages) async {
    final uri = Uri.parse('https://api.openai.com/v1/chat/completions');

    final List<Map<String, String>> chatHistory = messages.map((m) => {
      'role': m.isUser ? 'user' : 'assistant',
      'content': m.text,
    }).toList();

    final response = await http.post(
      uri,
      headers: {
        'Authorization': 'Bearer $openAIKey',
        'Content-Type': 'application/json',
      },
      body: jsonEncode({
        'model': 'gpt-3.5-turbo',
        'messages': chatHistory,
      }),
    );

    final data = jsonDecode(response.body);
    return data['choices'][0]['message']['content'];
  }
}

5️⃣ API Key 设置（config.dart）

// 请勿上传此文件到 GitHub 等公开平台
const String openAIKey = "sk-你的apikey";

🚀 四、运行效果预览

当你运行项目时，你会看到一个清爽的聊天界面，输入问题后，几秒内就能收到 GPT 的回复，完美支持多轮对话。

🧱 五、后续可以扩展的功能

✅ 加入语音识别 + 播报（speech_to_text + flutter_tts）
✅ 聊天主题/模型切换
✅ 显示发送中 Loading 效果
✅ 聊天记录本地缓存（Hive）
✅ 登录系统 + 用户配置管理

✅ 六、结语：你离发布只差一步

你已经拥有一个完整、可运行的 AI 聊天助手 App 原型！

下一步可以考虑发布到 App Store / Google Play，打造自己的品牌，也可以根据用户反馈不断迭代优化。如果你愿意开源项目，更是能收获社区关注与合作。

📌 如果你觉得这套代码不错，欢迎点赞收藏！
💬 也欢迎留言，我可以继续写语音功能整合篇 / 上架指南篇 / UI 美化篇！