Flyer Chat 💬

Flyer Chat 是一个面向 Flutter 应用的开源聊天 UI 包，专为高性能、可定制性和易集成而设计。

✨ 特性

• 🔄 后端无关：可连接任何后端服务。
• 🧬 适应性强：非常适合实时消息应用、生成式 AI 助手和基于 LLM 的助手、客服平台等场景。
• 🎨 高度可定制：通过丰富的主题选项和构建器函数自定义 UI。
• 🧩 模块化：按需选择所需功能。您可以更改 UI 的任何部分，或将其替换为自己的自定义实现。
• ⚡ 性能优化：专为快速响应和流畅动画打造。
• 🌐 跨平台：支持 iOS、Android、Web、macOS、Windows 和 Linux。
• 📜 开源：在 Apache 2.0 许可下免费使用。

🚀 安装

将该包添加到您的 pubspec.yaml 文件中：

dependencies:
  flutter_chat_core: ^2.0.0
  flutter_chat_ui: ^2.0.0

然后导入并使用 Chat 小部件。

📚 文档与示例

有关详细用法、自定义选项、不同消息类型、控制器以及更复杂场景的说明，请参阅完整文档：

➡️ flyer.chat/docs/flutter/introduction ⬅️

您还可以探索全面的示例应用，以了解各种功能和自定义效果的实际应用。

📦 包结构

该项目采用由 Melos 管理的单仓库多包结构 💙。

核心包

这些是安装 flutter_chat_ui 时包含的基础包：

• flutter_chat_ui：主 UI 包。
• flutter_chat_core：包含核心模型、控制器、主题设置及整个生态中使用的工具类。
• cross_cache：提供跨平台（IO 和 Web）的图片缓存解决方案。

可选消息组件包

用于渲染不同类型消息的意见型包。您也可以自行构建！

• flyer_chat_text_message：渲染支持 Markdown 的文本消息。
• flyer_chat_text_stream_message：渲染支持 Markdown 和淡入动画的流式文本消息。
• flyer_chat_image_message：渲染图片消息。
• flyer_chat_file_message：渲染文件消息。
• flyer_chat_system_message：渲染系统消息（例如“用户加入”）。

🤝 贡献

欢迎贡献！请参阅 CONTRIBUTING.md，了解如何参与贡献的指南。

📜 许可证

根据 Apache License, Version 2.0 许可。详细信息请参阅 LICENSE 文件。

Flutter Chat UI 快速上手指南

Flyer Chat 是一个专为 Flutter 应用打造的开源聊天 UI 组件库，具有高性能、高度可定制和易于集成的特点。它不依赖特定后端，适用于即时通讯、AI 助手、客服系统等多种场景，支持 iOS、Android、Web 及桌面端全平台。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• Flutter SDK: 建议安装最新稳定版（可通过 flutter upgrade 更新）。
• Dart SDK: 随 Flutter 自动安装，需保持版本兼容。
• IDE: 推荐 VS Code 或 Android Studio，并安装 Flutter 插件。
• 前置依赖: 本项目采用 Monorepo 结构，核心功能依赖 flutter_chat_core，安装主包时会自动处理。

💡 国内加速建议：若拉取依赖较慢，可配置 Dart /pub 国内镜像源。 在终端执行以下命令（以清华大学镜像为例）：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

(Windows PowerShell 用户请使用 $env:PUB_HOSTED_URL="...")

安装步骤

1. 打开项目的 pubspec.yaml 文件。
2. 在 dependencies 部分添加以下依赖：

dependencies:
  flutter_chat_core: ^2.0.0
  flutter_chat_ui: ^2.0.0

3. 保存文件并在终端运行以下命令安装依赖：

flutter pub get

基本使用

安装完成后，即可在代码中导入并使用 Chat widget。以下是一个最简化的使用示例：

import 'package:flutter/material.dart';
import 'package:flutter_chat_ui/flutter_chat_ui.dart';
import 'package:flutter_chat_core/flutter_chat_core.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flyer Chat Demo')),
        body: Chat(
          messages: const [], // 初始消息列表
          onSendPressed: (PartialText message) {
            // 处理发送逻辑，将消息添加到列表中
            print('发送消息：${message.text}');
          },
          user: const User(id: 'current-user-id'), // 当前用户信息
        ),
      ),
    );
  }
}

关键点说明：

• messages: 传入聊天消息列表（类型为 List<Message>）。
• onSendPressed: 当用户点击发送按钮时触发的回调，需在此处更新消息状态。
• user: 定义当前登录用户的身份信息。

更多高级用法（如自定义主题、流式消息、文件图片消息等），请参考 官方完整文档 或查看 GitHub 上的 示例应用。