chat_ui_kit

مجموعة كاملة من الدردشة ui kit

توفر لك حزمة الرفرفة هذه بنية أساسية بالإضافة إلى مجموعة من الأدوات التي تتيح لك بناء واجهة مستخدم الدردشة الحديثة بسرعة. بدلاً من محاولة التوصل إلى كل من واجهة المستخدم التي تفي بتوقعات الجميع ، فأنت مُعطى للمساعدين من المفترض أن يتم استخدامه كأمثلة ومخصصة في الإرادة.

سمات

• دعم للمحادثات الجماعية
• قائمة المحادثات (الدردشات)
• مجموعة الصورة الرمزية
• شارة الرسائل غير المقروءة
• عنوان الرسالة (المستخدم)
• رسالة الصورة الرمزية
• حاويات الرسائل التكيفية اعتمادًا على المواقع النسبية
• وحدات تحكم مع واجهة برمجة تطبيقات إدارة البيانات (إضافة ، إزالة ، تحديث)
• إدارة الاختيار الآلية
• إدخال الرسائل مع أحداث الكتابة
• أمثلة على الرسائل النصية والصورة والصوت والفيديو

ابدء

أضف أولاً السطر التالي إلى تبعيات PubSpec.yaml:

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;
  }
  
}

الدردشة

 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 ();
}

شاشة الدردشة

 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 نرحب جدا!