Flutter插件ruut_flutter的使用指南

集成Ruut到Flutter应用中

通过将Ruut Flutter客户端集成到您的Flutter应用中，您可以实时与访客聊天并提供卓越的支持。Ruut帮助您与访客进行实时聊天，并提供卓越的支持。要将Ruut集成到您的Flutter应用中，请按照以下步骤操作。

1. 将插件添加到项目中

在终端中运行以下命令：

flutter pub add ruut_flutter

或者

在项目的pubspec.yaml文件中添加以下内容，并替换<<version>>为所需版本号（可以从这里查看最新版本）：

dependencies:
  ruut_flutter: <<version>>

保存后运行以下命令以安装依赖项：

flutter pub get

2. 如何使用

a. 使用RuutWidget

以下是使用RuutWidget的基本示例。

步骤说明：

1. 在Ruut服务器上创建一个API通道，具体步骤可以参考官方文档。
2. 替换inboxIdentifier属性为创建的API通道的标识符。

示例代码：

import 'package:ruut_flutter/ruut_flutter.dart'; // 导入Ruut插件
import 'package:ruut_flutter/ui/ruut_home.dart'; // 导入UI组件
import 'package:flutter/material.dart'; // 导入Flutter基础库

void main() {
  runApp(MyApp()); // 启动应用
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 设置应用标题
      theme: ThemeData(
        fontFamily: "TTHoves-Pro", // 设置字体
        primarySwatch: Colors.blue, // 设置主题颜色
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'), // 设置主页
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({required this.title}) : super();

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState(); // 初始化状态
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return RuutChat(
      // 使用RuutChat组件
      inboxIdentifier: '<api_channel_inbox_identifier>', // 替换为API通道标识符
      blogUrl: "", // 博客URL（可选）
      logoUrl: "https://examples.com/image.png", // 自定义Logo URL
      theme: RuutChatTheme(
        // 自定义主题配置
        userAvatarNameColors: [Colors.black, Colors.white], // 用户头像名称颜色
        userNameTextStyle: TextStyle(color: Colors.black), // 用户名文本样式
        attachmentButtonIcon: Icon(Icons.image_outlined, color: Colors.grey), // 附件按钮图标
        primaryColor: Color(0xff9B6EE3), // 主色调
        secondaryColor: Colors.white, // 次色调
        backgroundColor: Colors.grey.shade100, // 背景颜色
      ),
      user: RuutUser(
        // 自定义用户信息
        identifier: "<unique_user_id>", // 唯一用户ID
        name: "Tester test", // 用户名
        email: "test@test.com", // 用户邮箱
        customAttributes: {
          "plan": "Premium", // 自定义属性
          "tier": "tier_1"
        },
      ),
    );
  }
}

完成以上步骤后，您就可以在应用中使用Ruut了！

回调函数

Ruut提供了回调函数，用于处理实时事件。这些回调函数允许您根据事件动态响应用户交互。

示例代码：

final ruutCallbacks = RuutCallbacks(
  onWelcome: () {
    print("on welcome"); // 欢迎事件触发时打印消息
  },
  onPing: () {
    print("on ping"); // Ping事件触发时打印消息
  },
  onConfirmedSubscription: () {
    print("on confirmed subscription"); // 订阅确认事件触发时打印消息
  },
  onConversationStartedTyping: () {
    print("on conversation started typing"); // 开始输入事件触发时打印消息
  },
  onConversationStoppedTyping: () {
    print("on conversation stopped typing"); // 停止输入事件触发时打印消息
  },
  onPersistedMessagesRetrieved: (persistedMessages) {
    print("persisted messages retrieved"); // 获取持久化消息时打印消息
  },
  onMessagesRetrieved: (messages) {
    print("messages retrieved"); // 获取新消息时打印消息
  },
  onMessageReceived: (ruutMessage) {
    print("message received"); // 收到新消息时打印消息
  },
  onMessageDelivered: (ruutMessage, echoId) {
    print("message delivered"); // 消息已送达时打印消息
  },
  onMessageSent: (ruutMessage, echoId) {
    print("message sent"); // 消息发送成功时打印消息
  },
  onError: (error) {
    print("Ooops! Something went wrong. Error Cause: ${error.cause}"); // 错误事件触发时打印错误信息
  },
);