Flutter即时通讯插件flutter_dr_uichat的使用

Flutter即时通讯插件flutter_dr_uichat的使用

flutter_dr_uichat

Pub Package

高度视频、功能齐全的flutter_dr_uichat小部件适用于Flutter。

截图

截图

特性

  • 消息屏幕或收件箱消息屏幕。
  • 聊天屏幕。

使用方法

确保查看示例。

安装

在pubspec.yaml文件中添加以下行：

dependencies:
  flutter_dr_uichat: ^1.0.0

基本设置

初始化消息标题屏幕

void main() {
  DRChatConfig.config.set(titleMessage: "Messages");
  runApp(const MyApp());
}

初始化所有函数

List<DRUIChatUser> users = [];
List<DRUIChatMessage> chatMessages = [];

@override
void initState() {
  super.initState();
  // 显示聊天气泡
  initChatBubble();
  // 设置消息屏幕事件
  setDRMessageEvent();
  // 设置聊天屏幕事件
  setDRChatEvent();
}

实现所有函数以支持库

void initChatBubble() {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    DRUIChatBubble.initChatBubble(
      context,
      backgroundColor: Colors.green,
      delay: const Duration(seconds: 2), // 可选延迟显示
    );
  });
}

// 测试接收者
void testingReceiver() {
  Future.delayed(const Duration(milliseconds: 500), () {
    DRChatService.chatService.addReceiver(
      DRUIChatMessage(
        id: 1,
        name: "kuchdarith",
        isSender: false,
        message: "Testing hi from Receiver?",
        photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyCF3FunYuwPDPL9ovTOR0MQXdDJpW_ofgXA&s",
        createdAt: DateTime.now().toUtc().toString(),
      ),
    );
  });
}

/// 启动聊天屏幕
void setDRChatEvent() {
  // 聊天屏幕准备添加消息列表
  DRChatService.chatService.onChatLoaded = (data) {
    getChatMessageList();
  };
  // 当发送者发送聊天给接收者时获取消息
  DRChatService.chatService.onMessage = (message) {
    DRChatService.chatService.addSender(
      DRUIChatMessage(
        id: 1,
        name: "kuchdarith",
        photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRXxfn1j1vKFy8yJeBGl2AS6Dcah-lKgHofg&s",
        isSender: true,
        message: message,
        createdAt: DateTime.now().toUtc().toString(),
      ),
    );
    // 这里测试接收者只回发一次
    testingReceiver();
  };
}

// 获取聊天列表
void getChatMessageList() {
  chatMessages = [];
  chatMessages.add(
    DRUIChatMessage(
      id: Random().nextInt(10000),
      name: "Kuch Darith",
      message: "Hi , how are you?",
      createdAt: "2024-09-12T20:42:19Z",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRXxfn1j1vKFy8yJeBGl2AS6Dcah-lKgHofg&s",
      isSender: true,
    ),
  );
  chatMessages.add(
    DRUIChatMessage(
      id: Random().nextInt(10000),
      name: "Kuch Darith",
      message: "Hi , how are you?",
      createdAt: "2024-09-12T20:42:19Z",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRXxfn1j1vKFy8yJeBGl2AS6Dcah-lKgHofg&s",
      isSender: true,
    ),
  );
  chatMessages.add(
    DRUIChatMessage(
      id: Random().nextInt(10000),
      name: "Kuch Darith",
      message: "Hi , how are you?",
      createdAt: "2024-09-12T20:42:19Z",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyCF3FunYuwPDPL9ovTOR0MQXdDJpW_ofgXA&s",
      isSender: false,
    ),
  );
  chatMessages.add(
    DRUIChatMessage(
      id: Random().nextInt(10000),
      name: "Kuch Darith",
      message: "Hi , how are you?",
      createdAt: "2024-09-12T20:42:19Z",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRXxfn1j1vKFy8yJeBGl2AS6Dcah-lKgHofg&s",
      isSender: true,
    ),
  );

  DRChatService.chatService.setChatMessageLists(chatMessages);
}
// 结束聊天屏幕

/// 启动消息屏幕
void setDRMessageEvent() {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    // 删除消息
    DRChatService.chatService.onDeleteMessage = (data) {
      print("Delete");
    };
    DRChatService.chatService.onMessageRefresh = () async {
      getMessageList();
      await Future.delayed(const Duration(seconds: 1));
    };
    DRChatService.chatService.onMessageLoadMore = () async {
      await Future.delayed(const Duration(seconds: 1));
      loadMoreMessageList();
    };
    DRChatService.chatService.onMessageLoaded = (status) {
      getMessageList();
    };
  });
}

// 加载更多消息列表
void loadMoreMessageList() {
  users.add(
    DRUIChatUser(
      id: Random().nextInt(10000),
      name: "Kuch Darith",
      message: "Hi , how are you?",
      createdAt: "2024-09-12T20:42:19Z",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyCF3FunYuwPDPL9ovTOR0MQXdDJpW_ofgXA&s",
    ),
  );
}

// 获取消息列表
void getMessageList() {
  users = [];

  users.add(
    DRUIChatUser(
      id: Random().nextInt(10000),
      name: "Kuch Darith",
      message: "Hi , how are you?",
      createdAt: "2024-09-12T20:42:19Z",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyCF3FunYuwPDPL9ovTOR0MQXdDJpW_ofgXA&s",
    ),
  );
  users.add(
    DRUIChatUser(
      id: Random().nextInt(10000),
      name: "Sok San",
      message: "hahaha",
    ),
  );
  users.add(
    DRUIChatUser(
      id: Random().nextInt(10000),
      name: "Bopha",
      message: "hahaha",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1oiHvf2LgSX3qMalIRToh28R40FJj4HA0Jg&s",
    ),
  );
  users.add(
    DRUIChatUser(
      id: Random().nextInt(10000),
      name: "Bopha",
      message: "hahaha",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1oiHvf2LgSX3qMalIRToh28R40FJj4HA0Jg&s",
    ),
  );
  users.add(
    DRUIChatUser(
      id: Random().nextInt(10000),
      name: "Bopha",
      message: "hahaha",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1oiHvf2LgSX3qMalIRToh28R40FJj4HA0Jg&s",
    ),
  );
  users.add(
    DRUIChatUser(
      id: Random().nextInt(10000),
      name: "Bopha",
      message: "hahaha",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1oiHvf2LgSX3qMalIRToh28R40FJj4HA0Jg&s",
    ),
  );
  users.add(
    DRUIChatUser(
      id: Random().nextInt(10000),
      name: "Bopha",
      message: "hahaha",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1oiHvf2LgSX3qMalIRToh28R40FJj4HA0Jg&s",
    ),
  );
  users.add(
    DRUIChatUser(
      id: Random().nextInt(10000),
      name: "Bopha",
      message: "hahaha",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1oiHvf2LgSX3qMalIRToh28R40FJj4HA0Jg&s",
    ),
  );
  users.add(
    DRUIChatUser(
      id: Random().nextInt(10000),
      name: "Bopha",
      message: "hahaha",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1oiHvf2LgSX3qMalIRToh28R40FJj4HA0Jg&s",
    ),
  );
  users.add(
    DRUIChatUser(
      id: Random().nextInt(10000),
      name: "Bopha",
      message: "hahaha",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1oiHvf2LgSX3qMalIRToh28R40FJj4HA0Jg&s",
    ),
  );

  DRChatService.chatService.setMessageLists(users);
}

功能

初始化聊天气泡图标

DRUIChatBubble.initChatBubble(
  context,
  backgroundColor: Colors.green,
  delay: const Duration(seconds: 2), // 可选延迟显示
);

添加消息作为接收者到聊天

DRChatService.chatService.addReceiver(
  DRUIChatMessage(
    id: 1,
    name: "kuchdarith",
    isSender: false,
    message: "Testing hi from Receiver?",
    photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyCF3FunYuwPDPL9ovTOR0MQXdDJpW_ofgXA&s",
    createdAt: DateTime.now().toUtc().toString(),
  ),
);

添加消息作为发送者到聊天

DRChatService.chatService.addSender(
  DRUIChatMessage(
    id: 1,
    name: "kuchdarith",
    isSender: false,
    message: "Testing hi from Receiver?",
    photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyCF3FunYuwPDPL9ovTOR0MQXdDJpW_ofgXA&s",
    createdAt: DateTime.now().toUtc().toString(),
  ),
);

设置聊天消息列表项

DRChatService.chatService.setChatMessageLists(chatMessages);

设置消息屏幕项

DRChatService.chatService.setMessageLists(users);

消息屏幕事件

用户删除消息时回调

DRChatService.chatService.onDeleteMessage = (data) {
  print("Delete");
};

用户刷新消息时回调

DRChatService.chatService.onMessageRefresh = () async {
  getMessageList();
  await Future.delayed(const Duration(seconds: 1));
};

用户加载更多消息时回调

DRChatService.chatService.onMessageLoadMore = () async {
  await Future.delayed(const Duration(seconds: 1));
  loadMoreMessageList();
};

消息屏幕准备加载允许添加消息列表时回调

DRChatService.chatService.onMessageLoaded = (status) {
  getMessageList();
};

聊天屏幕事件

聊天屏幕准备加载允许添加聊天列表时回调

DRChatService.chatService.onChatLoaded = (data) async {
  getChatMessageList();
};

用户发送消息给接收者时回调

DRChatService.chatService.onMessage = (message) async {
  DRChatService.chatService.addSender(
    DRUIChatMessage(
      id: 1,
      name: "kuchdarith",
      photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRXxfn1j1vKFy8yJeBGl2AS6Dcah-lKgHofg&s",
      isSender: true,
      message: message,
      createdAt: DateTime.now().toUtc().toString(),
    ),
  );
};

更多关于Flutter即时通讯插件flutter_dr_uichat的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter即时通讯插件flutter_dr_uichat的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_dr_uichat 是一个用于 Flutter 的即时通讯（IM）插件，它提供了丰富的 UI 组件和功能，帮助开发者快速集成即时通讯功能到 Flutter 应用中。以下是如何使用 flutter_dr_uichat 插件的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_dr_uichat 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  flutter_dr_uichat: ^1.0.0  # 请确保使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 初始化插件

在使用插件之前，你需要进行初始化。通常在 main.dart 文件中进行初始化操作。

import 'package:flutter/material.dart';
import 'package:flutter_dr_uichat/flutter_dr_uichat.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化插件
  await FlutterDrUiChat.init(
    appKey: 'YOUR_APP_KEY',  // 替换为你自己的 App Key
    appSecret: 'YOUR_APP_SECRET',  // 替换为你自己的 App Secret
  );
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatScreen(),
    );
  }
}

3. 使用聊天页面

flutter_dr_uichat 提供了现成的聊天页面组件，你可以直接使用。

import 'package:flutter/material.dart';
import 'package:flutter_dr_uichat/flutter_dr_uichat.dart';

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天'),
      ),
      body: ChatView(
        userId: 'USER_ID',  // 当前用户的 ID
        targetId: 'TARGET_ID',  // 聊天对方的 ID
        targetName: '对方昵称',  // 聊天对方的昵称
      ),
    );
  }
}

4. 发送消息

你可以使用 ChatView 组件内置的输入框和按钮来发送消息。插件会自动处理消息的发送和接收。

5. 自定义 UI

如果你需要自定义 UI，flutter_dr_uichat 也提供了丰富的 API 和组件供你使用。你可以通过组合这些组件来创建符合你应用风格的聊天界面。

6. 处理消息事件

你可以监听消息事件来处理消息的发送、接收、已读等状态。

FlutterDrUiChat.onMessageReceived.listen((message) {
  // 处理接收到的消息
  print('收到消息: ${message.content}');
});

FlutterDrUiChat.onMessageSent.listen((message) {
  // 处理发送的消息
  print('消息已发送: ${message.content}');
});

7. 断开连接

在应用退出或用户注销时，记得断开 IM 连接。

FlutterDrUiChat.disconnect();
回到顶部