Flutter聊天界面自定义插件dash_chat_custom的使用

Flutter聊天界面自定义插件dash_chat_custom的使用

The most complete Chat UI for flutter

Easy to use, highly customizable and fully featured

特性

  • 完全可定制的组件
  • 多行文本输入
  • 使用 flutter_parsed_text 的可触摸链接
  • 使用 flutter_markdown 支持 Markdown
  • 头像为用户姓名首字母或头像
  • 快速回复消息
  • 加载更早的消息
  • 滚动到底部小部件
  • 多种媒体支持（音频支持：WIP）
  • @ 提及用户（或其他任何内容）
  • 正在输入的用户
  • 回复消息 - WIP
  • 消息状态 - WIP
  • 放大媒体图像 + 悬停/点击效果 - 新功能！！！
  • 支持可定制的最大宽度和最大高度父容器（响应式） - 新功能！！！

如果你需要其他功能，可以使用模型的 customProperties 字段，它允许你传递其他数据到库中，然后可以在自定义构建器中使用这些数据来实现你需要的任何功能。

当然，如果你认为这个功能对其他人也有用，欢迎你提交问题/拉取请求来讨论将其“原生化”到包中。

基本用法

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

class Basic extends StatefulWidget {
  [@override](/user/override)
  _BasicState createState() => _BasicState();
}

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('基本示例'),
      ),
      body: DashChat(
        currentUser: user,
        onSend: (ChatMessage m) {
          setState(() {
            messages.insert(0, m);
          });
        },
        messages: messages,
      ),
    );
  }
}

更多关于Flutter聊天界面自定义插件dash_chat_custom的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter聊天界面自定义插件dash_chat_custom的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于在Flutter中自定义聊天界面插件 dash_chat_custom 的使用，下面是一个基本的代码示例，展示如何集成和使用该插件（假设 dash_chat_custom 是一个类似于 dash_chat 的自定义版本，因为实际名为 dash_chat_custom 的插件在Flutter社区中可能并不广泛存在，但原理相似）。

首先，确保你已经在 pubspec.yaml 文件中添加了依赖项（这里假设 dash_chat_custom 是你需要的插件名，实际使用时请替换为正确的插件名）：

dependencies:
  flutter:
    sdk: flutter
  dash_chat_custom: ^x.y.z  # 替换为实际的版本号

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中，你可以按照以下方式使用 dash_chat_custom 插件来创建一个自定义聊天界面：

import 'package:flutter/material.dart';
import 'package:dash_chat_custom/dash_chat_custom.dart';  // 导入插件

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chat App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final List<ChatMessage> messages = [
    ChatMessage(
      id: DateTime.now().millisecondsSinceEpoch,
      sender: ChatUser(id: 'user1', name: 'Alice'),
      text: 'Hello!',
      createdAt: DateTime.now(),
      type: MessageType.text,
      user: ChatUser(id: 'user1', name: 'Alice', avatar: 'https://example.com/alice.jpg'),
    ),
    ChatMessage(
      id: DateTime.now().millisecondsSinceEpoch - 1000,
      sender: ChatUser(id: 'user2', name: 'Bob'),
      text: 'Hi Alice!',
      createdAt: DateTime.now().subtract(Duration(seconds: 1)),
      type: MessageType.text,
      user: ChatUser(id: 'user2', name: 'Bob', avatar: 'https://example.com/bob.jpg'),
    ),
    // 可以添加更多消息
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: DashChatCustom(
          user: ChatUser(
            id: 'user1',
            name: 'Alice',
            avatar: 'https://example.com/alice.jpg',
          ),
          chatMessages: messages,
          onMessageSent: (ChatMessage message) {
            // 当消息发送时回调，可以更新消息列表
            setState(() {
              messages.add(message);
            });
          },
          inputDecoration: InputDecoration(
            labelText: 'Type a message...',
            border: OutlineInputBorder(),
          ),
          scrollController: ScrollController(),
        ),
      ),
    );
  }
}

在这个例子中，我们做了以下几件事：

  1. 依赖导入：在 pubspec.yaml 中添加了 dash_chat_custom 依赖，并在 Dart 文件中导入了它。
  2. 数据准备：创建了一个 ChatMessage 列表来存储聊天消息。每个 ChatMessage 包含消息ID、发送者、文本内容、创建时间、消息类型和用户信息。
  3. UI构建：使用 DashChatCustom 小部件来构建聊天界面，并传递了用户信息、消息列表、发送消息时的回调和输入框装饰。

请注意，由于 dash_chat_custom 可能是一个假设的插件名，实际使用时请确保使用正确的插件名和API。如果 dash_chat_custom 不存在，你可能需要使用 dash_chat 或其他类似的聊天界面插件，并根据其文档进行相应的调整。

回到顶部