Flutter AI聊天界面插件flutter_gen_ai_chat_ui的使用

Flutter Gen AI Chat UI

一个用于Flutter应用程序的现代且可定制的AI聊天界面。使用简单，易于定制。

Dark Mode

Chat Demo

🤖 快速集成指南

如果你在将此包集成到你的特定用例时遇到问题，可以将以下提示复制到ChatGPT：

帮助我将flutter_gen_ai_chat_ui集成到我的Flutter应用中。

我的应用详情：
1. 应用类型：[例如，AI聊天机器人，客户支持，教育应用]
2. 后端：[例如，OpenAI API，自定义API，Firebase]
3. 需要的功能：[例如，流式响应，Markdown支持，暗模式]
4. 当前状态管理：[例如，Provider，Bloc，GetX]

请向我展示：
1. 如何集成聊天界面
2. 如何将其与后端连接
3. 如何自定义主题以匹配我的应用
4. 对于我的特定用例的最佳实践

AI将会提供：

• 完整的集成代码
• 后端连接设置
• 主题定制示例
• 性能优化建议
• 针对特定用例的推荐

关键特性

核心功能

• 🎨 支持深色和浅色模式的自适应主题
• 💫 平滑的消息动画，逐字流式传输
• 🔄 实时消息更新和流式传输
• ✨ 自定义加载指示器，具有可调节的闪烁效果
• 📱 响应式布局，可配置的最大宽度
• 🎤 专业的语音转文本功能，包括：
  • 🌊 双层脉冲动画
  • 📊 实时音量可视化
  • 🎨 适应深色和浅色模式
  • 🎯 精确的错误处理和恢复
  • 🔄 自动语言检测
  • 📱 iOS 和 Android 支持（仅限物理设备）

消息功能

• 📝 支持Markdown并带有语法高亮
• 🎯 消息中的文本可以选择
• 🔗 可点击的链接和URL处理
• 📜 消息分页，带有自定义加载指示器
• 🌐 支持RTL语言
• ⏱️ 自定义时间戳
• 🔄 消息流式传输，实时更新
• 🎨 自定义消息气泡样式

用户界面组件

• 👋 可定制的欢迎消息
• ⭐️ 包含点击动作的示例问题小部件
• 💬 自定义消息气泡和布局
• 🎮 自定义输入字段，包括：
  • 🎨 可自定义的样式和装饰
  • 🎯 自定义发送按钮
  • 🎤 集成的语音转文字
  • ⌨️ 多行输入支持
• ⬇️ 智能滚动到底部按钮
• 🔄 加载指示器和闪烁效果

高级功能

• 🎮 完整的消息控制器
• 🔄 分页支持，自定义偏移量
• 🎯 动作回调（发送/清除/停止）
• 🌍 支持多语言语音识别
• 🎨 主题扩展，深度定制
• 📱 平台特定优化
• 🔒 权限处理（语音识别）
• 🎯 错误处理和恢复

快速开始

1. 添加依赖项

在pubspec.yaml文件中添加依赖项：

dependencies:
  flutter_gen_ai_chat_ui: ^1.1.6

2. 平台设置

语音转文字功能是可选的。如果你想使用它（enableSpeechToText: true），则需要进行以下设置：

iOS

在ios/Runner/Info.plist中添加以下内容：

<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access for speech recognition</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>This app needs speech recognition to convert your voice to text</string>

Android

在android/app/src/main/AndroidManifest.xml中添加以下内容：

<uses-permission android:name="android.permission.RECORD_AUDIO"/>

注意：语音转文字仅支持物理设备，不支持模拟器或虚拟机。

如果你不打算使用语音转文字，只需跳过此设置，并在AiChatConfig中将enableSpeechToText设置为false。

3. 基本实现

import 'package:flutter_gen_ai_chat_ui/flutter_gen_ai_chat_ui.dart';
import 'package:dash_chat_2/dash_chat_2.dart';

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

class _ChatScreenState extends State<ChatScreen> {
  final _controller = ChatMessagesController();
  final _currentUser = ChatUser(id: '1', firstName: 'User');
  final _aiUser = ChatUser(id: '2', firstName: 'AI Assistant');
  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AI Chat')),
      body: AiChatWidget(
        config: AiChatConfig(
          enableSpeechToText: true,  // 启用语音识别
          hintText: 'Type or speak your message...', // 输入框占位符
          enableAnimation: true,
          // 语音转文字自定义选项
          speechToTextIcon: Icons.mic_none_rounded,
          speechToTextActiveIcon: Icons.mic_rounded,
          onSpeechError: (error) => print('Speech error: $error'),
        ),
        controller: _controller,
        currentUser: _currentUser,
        aiUser: _aiUser,
        onSendMessage: _handleMessage,
        isLoading: _isLoading,
      ),
    );
  }

  Future<void> _handleMessage(ChatMessage message) async {
    setState(() => _isLoading = true);
    try {
      // 添加你的AI响应逻辑
      await Future.delayed(Duration(seconds: 1));
      _controller.addMessage(ChatMessage(
        text: "I received: ${message.text}",
        user: _aiUser,
        createdAt: DateTime.now(),
      ));
    } finally {
      setState(() => _isLoading = false);
    }
  }
}

配置指南

AiChatConfig 选项

AiChatConfig类提供了丰富的定制选项。以下是全面的指南：

基本配置

AiChatConfig(
  // 用户界面
  userName: 'User',            // 显示给用户的名称
  aiName: 'AI Assistant',      // 显示给AI的名称
  hintText: 'Type a message...', // 输入字段占位符
  maxWidth: 800,              // 聊天界面的最大宽度
  padding: EdgeInsets.all(16), // 聊天界面周围的填充

  // 特性开关
  enableAnimation: true,       // 开启/关闭消息动画
  showTimestamp: true,        // 显示/隐藏消息时间戳
  readOnly: false,            // 使聊天只读
  enablePagination: false,    // 开启/关闭消息分页

  // 示例问题
  exampleQuestions: [
    ChatExample(
      question: 'What can you help me with?',
      onTap: (controller) {
        controller.handleExampleQuestion(
          'What can you help me with?',
          currentUser,
          aiUser,
        );
      },
    ),
  ],
)

语音转文字配置

AiChatConfig(
  enableSpeechToText: true,
  speechToTextIcon: Icons.mic_none_rounded,      // 默认麦克风图标
  speechToTextActiveIcon: Icons.mic_rounded,     // 激活时的图标
  speechToTextLocale: 'en_US',                  // 识别语言

  // 语音识别回调
  onSpeechStart: () async {
    // 语音识别开始时调用
  },
  onSpeechEnd: () async {
    // 语音识别结束时调用
  },
  onSpeechError: (error) {
    // 处理语音识别错误
  },
  onRequestSpeechPermission: () async {
    // 处理权限请求
    return true; // 如果权限授予则返回true
  },

  // 自定义语音按钮
  customSpeechToTextButton: (isListening, onPressed) {
    return YourCustomButton(
      isListening: isListening,
      onPressed: onPressed,
    );
  },
)

用户界面定制

AiChatConfig(
  // 输入字段样式
  inputTextStyle: TextStyle(fontSize: 16),
  inputDecoration: InputDecoration(
    border: OutlineInputBorder(),
    filled: true,
  ),

  // 消息显示
  messageBuilder: (message) {
    return CustomMessageBubble(message: message);
  },

  // 发送按钮
  sendButtonIcon: Icons.send_rounded,
  sendButtonIconSize: 24,
  sendButtonPadding: EdgeInsets.all(8),
  sendButtonBuilder: (onSend) {
    return CustomSendButton(onPressed: onSend);
  },

  // 滚动按钮
  scrollToBottomBuilder: (controller) {
    return CustomScrollButton(controller: controller);
  },
)

分页和加载

AiChatConfig(
  enablePagination: true,
  paginationLoadingIndicatorOffset: 100,
  loadMoreIndicator: ({required bool isLoading}) {
    return CustomLoadingIndicator(isLoading: isLoading);
  },
)

动作回调

AiChatConfig(
  onSendButtonPressed: (message) {
    // 处理发送按钮按下
  },
  onClearButtonPressed: () {
    // 处理清除按钮按下
  },
  onStopButtonPressed: () {
    // 处理停止按钮按下（例如，停止流式传输）
  },
)

高级消息选项

AiChatConfig(
  // 消息选项
  messageOptions: MessageOptions(
    showTime: true,
    timePadding: EdgeInsets.only(top: 4),
    containerColor: Colors.grey[200],
    textColor: Colors.black87,
  ),

  // 消息列表选项
  messageListOptions: MessageListOptions(
    showDateSeparator: true,
    scrollPhysics: BouncingScrollPhysics(),
  ),

  // 快速回复选项
  quickReplyOptions: QuickReplyOptions(
    quickReplyStyle: BoxDecoration(
      border: Border.all(),
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

高级功能

1. 语音识别

该包包含一个专业的语音转文字按钮，具备以下功能：

• 🌊 平滑的双层脉冲动画
• 📊 实时音量可视化
• 🎨 适应深色和浅色模式
• 🎯 精确的错误处理和恢复
• 🔄 自动语言检测
• 📱 iOS 和 Android 支持（仅限物理设备）

2. 暗模式支持

Theme(
  data: Theme.of(context).copyWith(
    extensions: [
      CustomThemeExtension(
        messageBubbleColor: isDark ? Color(0xFF262626) : Colors.white,
        userBubbleColor: isDark ? Color(0xFF1A4B8F) : Color(0xFFE3F2FD),
        messageTextColor: isDark ? Color(0xFFE5E5E5) : Colors.grey[800]!,
        chatBackground: isDark ? Color(0xFF171717) : Colors.grey[50]!,
      ),
    ],
  ),
  child: AiChatWidget(...),
)

3. 流式响应

Future<void> handleStreamingResponse(String text) async {
  final response = ChatMessage(
    text: "",
    user: aiUser,
    createdAt: DateTime.now(),
  );

  for (var word in text.split(' ')) {
    await Future.delayed(Duration(milliseconds: 50));
    response.text += '${response.text.isEmpty ? '' : ' '}$word';
    controller.updateMessage(response);
  }
}