Flutter聊天界面插件 `dash_chat_2` 的使用

dash_chat_2 是一个功能强大且高度可定制的Flutter聊天界面插件，适用于构建复杂的聊天应用。以下是该插件的基本介绍、使用示例以及详细参数说明。

插件特性

完全可定制的组件
多行输入框
使用 flutter_parsed_text 实现可点击的链接
支持 Markdown 格式（通过 flutter_markdown）
用户头像可以是用户姓名首字母或个人照片
快速回复消息
加载早期消息
滚动到底部按钮
多媒体支持（音频支持：开发中）
@ 提及用户或其他内容
正在输入的用户显示
回复消息 - 开发中
消息状态 - 开发中

更多特性可以通过 customProperties 字段来实现，允许你传递其他数据到库中，并在自定义构建器中实现你需要的功能。

基本用法

以下是一个简单的示例，展示了如何使用 dash_chat_2 创建基本的聊天界面：

import 'package:dash_chat_2/dash_chat_2.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>[
    ChatMessage(
      text: 'Hey!',
      user: user,
      createdAt: DateTime.now(),
    ),
  ];

  [@override](/user/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,
      ),
    );
  }
}

你可以运行 example 项目以查看更复杂的使用方式。

`DashChat` 参数详解

ChatUser currentUser - 必填项：当前用户信息，用于确定哪些消息应显示在右侧。
Function(ChatMessage message) onSend - 必填项：发送消息时调用的函数，通常用于将消息发送到后端并更新消息列表。
List<ChatMessage> messages - 必填项：聊天消息列表，通常不会一次性加载所有消息，而是使用 MessageListOptions 中的 onLoadEarlier 参数进行懒加载。
InputOptions inputOptions - 可选项：自定义输入框的行为和样式。
MessageOptions messageOptions - 可选项：自定义消息的行为和样式。
MessageListOptions messageListOptions - 可选项：自定义消息列表的整体行为和样式。
QuickReplyOptions quickReplyOptions - 可选项：自定义快速回复的行为和样式。
ScrollToBottomOptions scrollToBottomOptions - 可选项：自定义滚动到底部按钮的行为和样式。
readOnly - 可选项（默认为 false）：是否只读模式，如果是，则隐藏输入框。
List<ChatUser> typingUsers - 可选项：正在输入的用户列表。

示例 Demo

下面是一个完整的示例 Demo，展示了如何集成多个功能：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dash Chat Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.tealAccent),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  State<MyHomePage> createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dash Chat Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => push(Basic()),
              child: const Text('Basic'),
            ),
            // 其他按钮可以根据需要添加
          ],
        ),
      ),
    );
  }

  void push(Widget page) {
    Navigator.of(context).push(
      MaterialPageRoute<String>(
        builder: (BuildContext context) {
          return page;
        },
      ),
    );
  }
}

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

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

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

  [@override](/user/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,
      ),
    );
  }
}

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

wuwangju 1楼•9 小时前

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

当然，以下是一个关于如何在Flutter项目中使用dash_chat_2插件来构建聊天界面的代码示例。dash_chat_2是一个强大的Flutter插件，可以帮助你快速实现聊天界面。

首先，你需要在你的pubspec.yaml文件中添加dash_chat_2依赖：

dependencies:
  flutter:
    sdk: flutter
  dash_chat_2: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter项目中创建一个聊天界面。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chat Example',
      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: '1',
      sender: ChatUser(id: 'user1', name: 'Alice'),
      text: 'Hello!',
      createdAt: DateTime.now().subtract(Duration(minutes: 5)),
      type: MessageType.text,
    ),
    ChatMessage(
      id: '2',
      sender: ChatUser(id: 'user2', name: 'Bob'),
      text: 'Hi Alice!',
      createdAt: DateTime.now().subtract(Duration(minutes: 3)),
      type: MessageType.text,
    ),
    // 可以添加更多消息
  ];

  final TextEditingController _textController = TextEditingController();

  void _sendMessage() {
    if (_textController.text.trim().isEmpty) return;

    setState(() {
      messages.add(
        ChatMessage(
          id: messages.length.toString(),
          sender: ChatUser(id: 'user1', name: 'Alice'),
          text: _textController.text,
          createdAt: DateTime.now(),
          type: MessageType.text,
        ),
      );
      _textController.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Expanded(
              child: DashChat(
                messages: messages,
                user: ChatUser(id: 'user1', name: 'Alice'),
                onSend: (ChatMessage message) {
                  // 发送消息的逻辑，这里可以替换为实际的发送逻辑
                  _sendMessage();
                },
                inputDecorationBuilder: (context, state) {
                  return InputDecoration(
                    labelText: 'Message',
                    contentPadding: EdgeInsets.symmetric(vertical: 10.0),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(32.0),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.grey),
                      borderRadius: BorderRadius.circular(32.0),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.blueAccent),
                      borderRadius: BorderRadius.circular(32.0),
                    ),
                  );
                },
                inputTextField: (context) => TextField(
                  controller: _textController,
                  decoration: InputDecoration.collapsed(hintText: 'Type a message'),
                ),
                messageContainerStyle: MessageContainerStyle(
                  alignment: Alignment.centerLeft,
                ),
                inputContainerStyle: ContainerStyle(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
                sendButton: IconButton(
                  icon: Icon(Icons.send),
                  color: Colors.blueAccent,
                  onPressed: () => _sendMessage(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的聊天界面，包括：

一个DashChat组件，用于显示和发送消息。
消息列表messages，包含了一些预定义的消息。
一个文本输入框和发送按钮，用于输入和发送新的消息。

请注意，这个示例中的onSend回调直接调用了_sendMessage方法来将消息添加到本地消息列表中。在实际应用中，你可能需要将消息发送到服务器，并在收到服务器的确认后再更新本地消息列表。

此外，DashChat组件还有许多可配置的属性，如消息样式、用户头像、时间戳格式等，你可以根据需要进行调整。

Flutter聊天界面插件dash_chat_2的使用

Flutter聊天界面插件 dash_chat_2 的使用

插件特性

基本用法

DashChat 参数详解

示例 Demo

Flutter聊天界面插件 `dash_chat_2` 的使用

`DashChat` 参数详解