chat_ui_kit

Un kit completo de chat de chat de flutador

Este paquete Flutter le proporciona una estructura base, así como un conjunto de herramientas que le permiten construir rápidamente una interfaz de usuario de chat moderna. En lugar de tratar de encontrar todos los widgets en uno que cumplan con las expectativas de todos, se les da ayudantes que deben usarse como ejemplos y personalizados a voluntad.

Características

• Soporte para conversaciones grupales
• Lista de conversaciones (chats)
• Avatar de grupo
• Insignia de mensajes no leídos
• Título del mensaje (usuario)
• Avatar de mensaje
• Contenedores de mensajes adaptativos dependiendo del posicionamiento relativo
• Controladores con API de administración de datos (agregar, eliminar, actualizar)
• Gestión de selección automatizada
• Entrada de mensajes con eventos de escritura
• Ejemplos de mensajes de texto, imagen, audio y video

Empezando

Primero agregue la siguiente línea a sus dependencias pubspec.yaml:

chat_ui_kit : ^ [latest_version]

A continuación, configure sus modelos para extender los modelos base:

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

Chatillo

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

Más

Asegúrese de navegar por la documentación ingresada de la clase antes de hacer cualquier pregunta. ¡PRS son muy bienvenidos!