chat_ui_kit

Kit ui chat flutter lengkap

Paket Flutter ini memberi Anda struktur dasar serta satu set alat yang memungkinkan Anda untuk dengan cepat membangun UI obrolan modern. Alih -alih mencoba menghasilkan semua dalam satu widget yang memenuhi harapan semua orang, Anda diberi pembantu yang dimaksudkan untuk digunakan sebagai contoh dan disesuaikan sesuka hati.

Fitur

• Dukungan untuk Percakapan Grup
• Daftar Percakapan (Obrolan)
• Avatar grup
• Lencana pesan yang belum dibaca
• Judul Pesan (Pengguna)
• Avatar pesan
• Wadah pesan adaptif tergantung pada posisi relatif
• Pengontrol dengan API Manajemen Data (Tambah, Hapus, Perbarui)
• Manajemen Seleksi Otomatis
• Input pesan dengan acara pengetikan
• Contoh untuk pesan teks, gambar, audio dan video

Memulai

Pertama tambahkan baris berikut ke dependensi pubspec.yaml Anda:

chat_ui_kit : ^ [latest_version]

Selanjutnya, atur model Anda untuk memperluas model dasar:

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

Layar obrolan

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

Lagi

Pastikan untuk menelusuri dokumentasi kelas yang diinflinasikan sebelum mengajukan pertanyaan. PR sangat disambut!