Flutter聊天界面插件chatview的使用

简介

ChatView 是一个Flutter包，允许你集成聊天视图，并提供了高度定制化的选项，如一对一聊天、群聊、消息反应、回复消息、链接预览等配置。

预览

安装与使用指南

安装步骤

1. 在pubspec.yaml文件中添加依赖：

   dependencies:
     chatview: <latest-version>
   

   请从 pub.dev 获取最新版本。
2. 导入包：

   import 'package:chatview/chatview.dart';
   

使用示例

以下是一个完整的示例代码，展示了如何在Flutter项目中使用chatview插件：

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

void main() {
  runApp(const Example());
}

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chat UI Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: const Color(0xffEE5366),
        colorScheme: ColorScheme.fromSwatch(accentColor: const Color(0xffEE5366)),
      ),
      home: const ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  const ChatScreen({Key? key}) : super(key: key);

  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final _chatController = ChatController(
    initialMessageList: [
      Message(
        id: '1',
        message: "Hi",
        createdAt: DateTime.now(),
        sentBy: '1',
      ),
      Message(
        id: '2',
        message: "Hello",
        createdAt: DateTime.now(),
        sentBy: '2',
      ),
    ],
    scrollController: ScrollController(),
    currentUser: ChatUser(id: '1', name: 'Flutter'),
    otherUsers: [ChatUser(id: '2', name: 'Simform')],
  );

  void onSendTap(String message, ReplyMessage replyMessage, MessageType messageType) {
    final newMessage = Message(
      id: DateTime.now().toString(),
      message: message,
      createdAt: DateTime.now(),
      sentBy: _chatController.currentUser.id,
      replyMessage: replyMessage,
      messageType: messageType,
    );
    _chatController.addMessage(newMessage);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chat View'),
      ),
      body: ChatView(
        chatController: _chatController,
        onSendTap: onSendTap,
        chatViewState: ChatViewState.hasMessages,
      ),
    );
  }
}

主要功能和配置

基本配置

• 初始化聊天控制器：通过ChatController类初始化聊天控制器，设置初始消息列表、滚动控制器、当前用户和其他用户。
• 添加消息：通过_chatController.addMessage()方法添加新消息到聊天列表。
• 发送消息回调：通过onSendTap函数处理发送消息的逻辑。

进阶配置

• 显示或隐藏打字指示器：使用_chatController.setTypingIndicator属性控制打字指示器的显示状态。
• 接收消息模拟：通过receiveMessage函数模拟接收到的消息，并可添加回复建议。
• 主题切换：通过isDarkTheme变量实现浅色和深色主题的切换。

平台特定配置

• iOS：需要在Info.plist中添加相机、麦克风和相册访问权限描述。
• Android：需要在AndroidManifest.xml中添加录音权限，并确保最小SDK版本为21或更高。

其他特性

• 自定义App Bar：通过ChatViewAppBar自定义聊天界面顶部栏。
• 背景配置：通过ChatBackgroundConfiguration类配置聊天背景颜色或图片。
• 发送消息配置：通过SendMessageConfiguration类配置发送消息的相关样式和行为。
• 聊天气泡配置：通过ChatBubbleConfiguration类配置发送方和接收方的消息气泡样式。
• 链接预览配置：通过LinkPreviewConfiguration类配置链接预览的样式。

更多高级特性和详细配置，请参考官方文档和示例代码。

总结

chatview插件为Flutter开发者提供了一个强大且灵活的聊天界面解决方案。通过简单的配置和丰富的API，你可以轻松构建出功能完善的聊天应用。希望这个示例能帮助你快速上手并充分利用chatview的强大功能。