Flutter 最完整的聊天 UI

易于使用，高度可定制且功能齐全

License Pub version Contributors

功能

  • 高度可定制的组件
  • 多行文本输入
  • 可触控的链接，使用 flutter_parsed_text
  • 头像显示为用户姓名缩写或个人资料图片
  • 快速回复消息
  • 加载更早的消息
  • 滚动到底部小部件
  • 多媒体支持
  • @提及用户 - 正在开发中
  • 回复消息 - 正在开发中
  • 正在输入的用户名
  • 消息状态 - 正在开发中

您需要其他功能？您可以使用模型的 customProperties 字段，它允许您将其他数据传递给库，然后您可以在自定义构建器中使用它们来实现您所需的任何功能。

当然，如果您认为此功能对他人有用，欢迎随时提出 issue/pull-request 进行讨论，以便将其“原生”包含在包中。

基本用法

import 'package:dash_chat_2/dash_chat_2.dart';
import 'package:flutter/material.dart';

class Basic extends StatefulWidget {
  @override
  _BasicState createState() => _BasicState();
}

class _BasicState extends State<Basic> {
  ChatUser user = ChatUser(
    id: '1',
    firstName: 'Charles',
    lastName: 'Leclerc',
  );

  List<ChatMessage> messages = <ChatMessage>[
    ChatMessage(
      text: 'Hey!',
      user: user,
      createdAt: DateTime.now(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Basic example'),
      ),
      body: DashChat(
        currentUser: user,
        onSend: (ChatMessage m) {
          setState(() {
            messages.insert(0, m);
          });
        },
        messages: messages,
      ),
    );
  }
}

您可以运行 示例 项目，查看更复杂的包使用方式

DashChat 参数

  • ChatUser currentUser – 必需：基本上是“你”，我们需要知道当前用户是谁，以便将他们的消息放在右侧

  • Function(ChatMessage message) onSend – 必需：用户发送消息时调用的函数，这是您处理将消息发送到后端并附加 messages 列表的逻辑的地方

  • List<ChatMessage> messages – 必需：频道的消息列表，通常您不会一次加载所有消息，而是使用 MessageListOptions 的 onLoadEarlier 参数来触发懒加载

  • InputOptions inputOptions – 可选：用于自定义聊天输入行为和设计的选项

  • MessageOptions messageOptions – 可选：用于自定义消息行为和设计的选项

  • MessageListOptions messageListOptions – 可选：用于自定义消息列表整体行为和设计的选项

  • QuickReplyOptions quickReplyOptions – 可选：用于自定义快速回复行为和设计的选项

  • ScrollToBottomOptions scrollToBottomOptions – 可选：用于自定义滚动到底部按钮行为和设计的选项

  • readOnly – 可选（默认为 false）：将聊天设置为只读的选项，它将隐藏输入字段

  • List<ChatUser> typingUsers – 可选：当前在聊天中输入消息的用户列表

完整文档

您可以在此处浏览完整的 Dart 文档：文档

觉得这个项目有用吗？

如果您觉得这个项目有用，请考虑在 Github 上给它一个 ⭐️：https://github.com/molteo-engineering-team/Dash-Chat-2

问题和反馈

如果您对包含功能有任何建议，或者某些功能不起作用，欢迎提出 Github issue 或 pull request，我们非常欢迎您的贡献！

贡献者

SebastienBtr? ?

鸣谢

感谢 Fayeed 创建了此包的 v1 版本：https://github.com/fayeed/dash_chat，才使得这一切成为可能！

GitHub

查看 Github