Flutter聊天界面构建插件chat_ui_kit的使用

Flutter聊天界面构建插件chat_ui_kit的使用

此Flutter插件为您提供了一个基础结构以及一组工具，使您能够快速构建现代聊天UI。与其尝试创建一个满足所有人期望的一体化小部件，不如为您提供一些旨在作为示例并根据需要进行自定义的小部件。

特性

• 支持群聊
• 聊天列表（对话）
• 群组头像
• 未读消息标记
• 消息标题（用户）
• 消息头像
• 根据相对位置自动调整的消息容器
• 带有数据管理API（添加、删除、更新）的控制器
• 自动化选择管理
• 具有打字事件的消息输入
• 文本、图片、音频和视频消息的示例

开始使用

首先，在pubspec.yaml文件中的依赖项部分添加以下行：

dependencies:
  chat_ui_kit: ^[最新版本]

接下来，设置您的模型以扩展基本模型：

class ChatMessage extends MessageBase {
  // ...

  ChatUser author;
  String text;

  [@override](/user/override)
  DateTime get createdAt => 
      DateTime.fromMillisecondsSinceEpoch(creationTimestamp);

  [@override](/user/override)
  String get id => messageId;

  [@override](/user/override)
  String get url => attachment;

  [@override](/user/override)
  MessageBaseType get messageType {
    // ...
  }
}

class ChatUser extends UserBase {
  // ...

  [@override](/user/override)
  String get name => username;

  [@override](/user/override)
  String get id => userid;

  [@override](/user/override)
  String get avatar => avatarURL;
}

class Chat extends ChatBase {

  // ...

  List<ChatUser> members;
  ChatMessage lastMessage;

  [@override](/user/override)
  int get unreadCount => chat.unreadCount;

  [@override](/user/override)
  String get name {
    if ((chat?.name ?? null).isNotNullOrEmpty()) return chat.name;
    return membersWithoutSelf.map((e) => e.username).toList().join(", ");
  }

  [@override](/user/override)
  String get id => chat?.id;

  [@override](/user/override)
  List<ChatUser> get membersWithoutSelf {
    List<ChatUser> membersWithoutSelf = [];
    final localUserId = chat?.localUserId ??
        FirebaseAuth.instance.currentUser?.uid;
    for (ChatUser chatUser in members) {
      if (localUserId != chatUser.userid) membersWithoutSelf.add(chatUser);
    }
    return membersWithoutSelf;
  }
  
}

ChatsListScreen

ChatsListController controller = ChatsListController();

ChatsList(
    controller: controller,
    appUserId: _currentUser.id,
    scrollHandler: _handleScrollEvent,
    groupAvatarStyle: GroupAvatarStyle(withSeparator: true),
    builders: ChatsListTileBuilders(
        groupAvatarBuilder:
            (context, imageIndex, itemIndex, size, item) {
          final chat = item as Chat;
          return CachedNetworkImage(
              cacheManager: CustomCacheManager(),
              imageUrl: chat.membersWithoutSelf[imageIndex].avatar,
              width: size.width,
              height: size.height,
              fit: BoxFit.cover,
              errorWidget: (ctx, url, val) => 
                  AppErrorWidget(true, size: size));
        },
        lastMessageBuilder: _buildLastMessage,
        wrapper: _buildTileWrapper,
        dateBuilder: (context, date) => Padding(
            padding: EdgeInsets.only(left: 16),
            child: Text(DateFormatter.getVerboseDateTimeRepresentation(
                context, date)))))

[@override](/user/override)
void dispose() {
  controller.dispose();
  super.dispose();
}

ChatScreen

final MessagesListController _controller = MessagesListController();

[@override](/user/override)
void initState() {
  _controller.selectionEventStream.listen((event) {
    setState(() {
      _selectedItemsCount = event.currentSelectionCount;
    });
  });
  super.initState();
}

Widget _buildMessagesList() {
  IncomingMessageTileBuilders incomingBuilders = _isGroupChat
      ? IncomingMessageTileBuilders(
          bodyBuilder: (context, index, item, messagePosition) =>
              _buildMessageBody(context, index, item, messagePosition,
                  MessageFlow.incoming),
          avatarBuilder: (context, index, item, messagePosition) {
            final _chatMessage = item as ChatMessage;
            return Padding(
                padding:
                    EdgeInsets.only(right: 16),
                child: _buildAvatarWithScore(_chatMessage.author));
          })
      : IncomingMessageTileBuilders(
          bodyBuilder: (context, index, item, messagePosition) =>
              _buildMessageBody(context, index, item, messagePosition,
                  MessageFlow.incoming),
          titleBuilder: null);

  return Expanded(
      child: MessagesList(
          controller: _controller,
          appUserId: _currentUser.id,
          useCustomTile: (i, item, pos) {
            final msg = item as ChatMessage;
            return msg.isTypeEvent;
          },
          messagePosition: _messagePosition,
          builders: MessageTileBuilders(
              customTileBuilder: _buildEventMessage,
              customDateBuilder: _buildDate,
              incomingMessageBuilders: incomingBuilders,
              outgoingMessageBuilders: OutgoingMessageTileBuilders(
                  bodyBuilder: (context, index, item, messagePosition) =>
                      _buildMessageBody(context, index, item,
                          messagePosition, MessageFlow.outgoing)))));
}

[@override](/user/override)
void dispose() {
  _controller.dispose();
  super.dispose();
}