chat_ui_kit

ชุดแชท Flutter ที่สมบูรณ์

แพ็คเกจ Flutter นี้ช่วยให้คุณมีโครงสร้างพื้นฐานรวมถึงชุดเครื่องมือที่ช่วยให้คุณสามารถสร้าง UI แชทที่ทันสมัยได้อย่างรวดเร็ว แทนที่จะพยายามหาทุกอย่างในวิดเจ็ตเดียวที่ตรงกับความคาดหวังของทุกคนคุณจะได้รับผู้ช่วยเหลือที่ตั้งใจจะใช้เป็นตัวอย่างและปรับแต่งตามความประสงค์

คุณสมบัติ

• สนับสนุนการสนทนากลุ่ม
• รายการบทสนทนา (แชท)
• Avatar กลุ่ม
• ตราข้อความที่ยังไม่ได้อ่าน
• ชื่อข้อความ (ผู้ใช้)
• ข้อความ Avatar
• คอนเทนเนอร์ข้อความแบบปรับตัวขึ้นอยู่กับการวางตำแหน่งสัมพัทธ์
• คอนโทรลเลอร์ที่มี Data Management API (เพิ่ม, ลบ, อัปเดต)
• การจัดการการเลือกอัตโนมัติ
• อินพุตข้อความด้วยเหตุการณ์การพิมพ์
• ตัวอย่างสำหรับข้อความข้อความภาพเสียงและวิดีโอ

เริ่มต้น

ก่อนอื่นเพิ่มบรรทัดต่อไปนี้ไปยัง Pubspec.yaml Dependencies:

chat_ui_kit : ^ [latest_version]

ถัดไปตั้งค่าโมเดลของคุณเพื่อขยายโมเดลพื้นฐาน:

 class ChatMessage extends MessageBase {
  //...

  ChatUser author;
  String text;

  @override
  DateTime get createdAt =>
      DateTime . fromMillisecondsSinceEpoch (creationTimestamp);

  @override
  String get id => messageId;

  @override
  String get url => attachment;

  @override
  MessageBaseType get messageType {
    //...
  }
}

 class ChatUser extends UserBase {
  //...

  @override
  String get name => username;

  @override
  String get id => userid;

  @override
  String get avatar => avatarURL;
}

 class Chat extends ChatBase {
  
  //...

  List < ChatUser > members;
  ChatMessage lastMessage;

  @override
  int get unreadCount => chat.unreadCount;

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

  @override
  String get id => chat ? .id;

  @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
void dispose () {
  _controller. dispose ();
  super . dispose ();
}

Chatscreen

 final MessagesListController _controller = MessagesListController ();

@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
void dispose () {
  _controller. dispose ();
  super . dispose ();
}

มากกว่า

โปรดตรวจสอบให้แน่ใจว่าได้เรียกดูเอกสารที่มีข้อ จำกัด ในชั้นเรียนก่อนถามคำถามใด ๆ PRS ยินดีต้อนรับมาก!