ChatView

一个 Flutter 包，可让您集成聊天视图，并具有高度可定制的选项，例如一对一聊天、群聊、消息反应、回复消息、链接预览和整体视图配置。

网站演示请访问 Chat View 示例。

安装

  1. 将依赖项添加到 pubspec.yaml

dependencies:
  chatview2: <latest-version>

在 pub.dev 的“安装”选项卡中获取最新版本

  1. 导入包
import 'package:chatview2/chatview2.dart';
  1. 添加聊天控制器。

final chatController = ChatController(
  initialMessageList: messageList,
  scrollController: ScrollController(),
  chatUsers: [ChatUser(id: '2', name: 'Simform')],
);
  1. 添加一个 ChatView 小部件。

ChatView(
  currentUser: ChatUser(id: '1', name: 'Flutter'),
  chatController: chatController,
  onSendTap: onSendTap,
  chatViewState: ChatViewState.hasMessages, // Add this state once data is available.
)
  1. 使用 Message 类添加消息列表。

List<Message> messageList = [
  Message(
    id: '1',
    message: "Hi",
    createdAt: createdAt,
    sendBy: userId,
  ),
  Message(
    id: '2',
    message: "Hello",
    createdAt: createdAt,
    sendBy: userId,
  ),
];
  1. 添加 onSendTap。

void onSendTap(String message, ReplyMessage replyMessage, Message messageType){
  final message = Message(
    id: '3',
    message: "How are you",
    createdAt: DateTime.now(),
    sendBy: currentUser.id,
    replyMessage: replyMessage,
    messageType: messageType,
  );
  chatController.addMessage(message);
}

注意：您可以从 messageType 参数评估消息类型，并根据其执行操作。

消息类型兼容性

消息类型 Android iOS MacOS Web Linux Windows
文本消息 ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
图片消息 ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
语音消息 ✔️ ✔️ ❌ ❌ ❌ ❌
自定义消息 ✔️ ✔️ ✔️ ✔️ ✔️ ✔️

平台特定配置

用于图片选择器

iOS

  • 将以下键添加到您的 Info.plist 文件中，该文件位于 <project root>/ios/Runner/Info.plist

    <key>NSCameraUsageDescription</key>
    <string>Used to demonstrate image picker plugin</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>Used to capture audio for image picker plugin</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Used to demonstrate image picker plugin</string>

用于语音消息

iOS

  • 将这两行添加到 ios/Runner/Info.plist

    <key>NSMicrophoneUsageDescription</key>
    <string>This app requires Mic permission.</string>
  • 此插件需要 iOS 10.0 或更高版本。因此，请将此行添加到 Podfile
    platform :ios, '10.0'

Android

  • 在您的 android/app/build.gradle 文件中将最低 Android sdk 版本更改为 21（或更高）。
    minSdkVersion 21
  • 将 RECORD_AUDIO 权限添加到 AndroidManifest.xml
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>

更多可选参数

  1. 使用 FeatureActiveConfig 启用和禁用特定功能。

ChatView(
  ...
  featureActiveConfig: FeatureActiveConfig(
    enableSwipeToReply: true,
    enableSwipeToSeeTime: false,
  ),
  ...
)
  1. 使用 ChatViewAppBar 添加应用栏。

ChatView(
  ...
  appBar: ChatViewAppBar(
    profilePicture: profileImage,
    chatTitle: "Simform",
    userStatus: "online",
    actions: [
      Icon(Icons.more_vert),
    ],
  ),
  ...
)
  1. 使用 ChatBackgroundConfiguration 类添加聊天背景配置。

ChatView(
  ...
  chatBackgroundConfig: ChatBackgroundConfiguration(
    backgroundColor: Colors.white,
    backgroundImage: backgroundImage,
  ),
  ...
)
  1. 使用 SendMessageConfiguration 类添加发送消息配置。

ChatView(
  ...
  sendMessageConfig: SendMessageConfiguration(
    replyMessageColor: Colors.grey,
    replyDialogColor:Colors.blue,
    replyTitleColor: Colors.black,
    closeIconColor: Colors.black,
  ),
  ...
)
  1. 使用 ChatBubbleConfiguration 类添加聊天气泡配置。

ChatView(
  ...
  chatBubbleConfig: ChatBubbleConfiguration(
    onDoubleTap: (){
       // Your code goes here
    },
    outgoingChatBubbleConfig: ChatBubble(      // Sender's message chat bubble 
      color: Colors.blue,
      borderRadius: const BorderRadius.only(  
        topRight: Radius.circular(12),
        topLeft: Radius.circular(12),
        bottomLeft: Radius.circular(12),
      ),
    ),
    inComingChatBubbleConfig: ChatBubble(      // Receiver's message chat bubble
      color: Colors.grey.shade200,
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(12),
        topRight: Radius.circular(12),
        bottomRight: Radius.circular(12),
      ),
    ),
  )
  ...
)
  1. 使用 SwipeToReplyConfiguration 类添加滑动回复配置。

ChatView(
  ...
  swipeToReplyConfig: SwipeToReplyConfiguration(
    onLeftSwipe: (message, sendBy){
        // Your code goes here
    },
    onRightSwipe: (message, sendBy){
        // Your code goes here
    },              
  ),
  ...
)
  1. 使用 MessageConfiguration 类添加消息配置。

ChatView(
  ...
  messageConfig: MessageConfiguration(
    messageReactionConfig: MessageReactionConfiguration(),      // Emoji reaction configuration for single message 
    imageMessageConfig: ImageMessageConfiguration(
      onTap: (){
          // Your code goes here
      },                          
      shareIconConfig: ShareIconConfiguration(
        onPressed: (){
           // Your code goes here
        },
      ),
    ),
  ),
  ...
)
  1. 使用 ReactionPopupConfiguration 类添加反应弹出窗口配置。

ChatView(
  ...
  reactionPopupConfig: ReactionPopupConfiguration(
    backgroundColor: Colors.white,
    userReactionCallback: (message, emoji){
      // Your code goes here
    }
    padding: EdgeInsets.all(12),
    shadow: BoxShadow(
      color: Colors.black54,
      blurRadius: 20,
    ),
  ),
  ...
)
  1. 使用 ReplyPopupConfiguration 类添加回复弹出窗口配置。

ChatView(
  ...
  replyPopupConfig: ReplyPopupConfiguration(
    backgroundColor: Colors.white,
    onUnsendTap:(message){                   // message is 'Message' class instance
       // Your code goes here
    },
    onReplyTap:(message){                    // message is 'Message' class instance
       // Your code goes here
    },
    onReportTap:(){
       // Your code goes here
    },
    onMoreTap:(){
       // Your code goes here
    },
  ),
  ...
)
  1. 使用 RepliedMessageConfiguration 类添加已回复的消息配置。

ChatView(
   ...
   repliedMessageConfig: RepliedMessageConfiguration(
     backgroundColor: Colors.blue,
     verticalBarColor: Colors.black,
     repliedMsgAutoScrollConfig: RepliedMsgAutoScrollConfig(),
   ),
   ...
)
  1. 要自定义输入指示器，请使用 TypeIndicatorConfig 的 typeIndicatorConfig。

ChatView(
  ...

  typeIndicatorConfig: TypeIndicatorConfiguration(
    flashingCircleBrightColor: Colors.grey,
    flashingCircleDarkColor: Colors.black,
  ),
  ...
)
  1. 要显示/隐藏输入指示器小部件，请使用 ChatController.setTypingIndicaor，有关更多信息，请参阅 ChatController。

/// use it with your [ChatController] instance.
_chatContoller.setTypingIndicator = true; // for showing indicator
_chatContoller.setTypingIndicator = false; // for hiding indicator
  1. 使用 LinkPreviewConfiguration 类添加链接预览配置。

ChatView(
  ...
  chatBubbleConfig: ChatBubbleConfiguration(
    linkPreviewConfig: LinkPreviewConfiguration(
      linkStyle: const TextStyle(
        color: Colors.white,
        decoration: TextDecoration.underline,
      ),
      backgroundColor: Colors.grey,
      bodyStyle: const TextStyle(
        color: Colors.grey.shade200,
        fontSize:16,
      ),
      titleStyle: const TextStyle(
        color: Colors.black,
        fontSize:20,
      ),
    ),
  )
  ...
)
  1. 添加分页。

ChatView(
  ...
  isLastPage: false,
  featureActiveConfig: FeatureActiveConfig(
    enablePagination: true,
  ),
  loadMoreData: chatController.loadMoreData,
  ...
)
  1. 添加图片选择器图标配置。

ChatView(
  ...
  sendMessageConfig: SendMessageConfiguration(
    imagePickerIconsConfig: ImagePickerIconsConfiguration(
      cameraIconColor: Colors.black,
      galleryIconColor: Colors.black,
    )
  )
  ...
)
  1. 添加 ChatViewState 自定义。

ChatView(
  ...
  chatViewStateConfig: ChatViewStateConfiguration(
    loadingWidgetConfig: ChatViewStateWidgetConfiguration(
      loadingIndicatorColor: Colors.pink,
    ),
    onReloadButtonTap: () {},
  ),
  ...
)
  1. 使用 RepliedMsgAutoScrollConfig 类设置自动滚动和高亮配置。

ChatView(
    ...
    repliedMsgAutoScrollConfig: RepliedMsgAutoScrollConfig(
      enableHighlightRepliedMsg: true,
      highlightColor: Colors.grey,
      highlightScale: 1.1,
    )
    ...
)
  1. 在 TextFieldConfiguration 中用户开始/停止输入的时的回调

ChatView(
    ...
      sendMessageConfig: SendMessageConfiguration(
       
          textFieldConfig: TextFieldConfiguration(
            onMessageTyping: (status) {
                // send composing/composed status to other client
                // your code goes here
            },   

            
        /// After typing stopped, the threshold time after which the composing
        /// status to be changed to [TypeWriterStatus.typed].
        /// Default is 1 second.
            compositionThresholdTime: const Duration(seconds: 1),

        ),
    ...
  )
)
  1. 传递自定义接收小部件或处理与接收相关的事务，请参阅 outgoingChatBubbleConfig 中的 ReceiptsWidgetConfig。

ChatView(
   ...
      featureActiveConfig: const FeatureActiveConfig(
            /// Controls the visibility of message seen ago receipts default is true
            lastSeenAgoBuilderVisibility: false,
            /// Controls the visibility of the message [receiptsBuilder]
            receiptsBuilderVisibility: false),            
       ChatBubbleConfiguration(
          inComingChatBubbleConfig: ChatBubble(
            onMessageRead: (message) {
              /// send your message reciepts to the other client
              debugPrint('Message Read');
            },

          ),
          outgoingChatBubbleConfig: ChatBubble(
              receiptsWidgetConfig: ReceiptsWidgetConfig(
                      /// custom receipts builder 
                      receiptsBuilder: _customReceiptsBuilder,
                      /// whether to display receipts in all 
                      /// message or just at the last one just like instagram
                      showReceiptsIn: ShowReceiptsIn.lastMessage
              ),
            ), 
        ), 
        
  ...
 
)

如何使用

查看 博客 以更好地理解和基本实现。

另外，有关完整的示例，请查看 pub.dartlang.org 上 示例 应用的 example 目录或“示例”选项卡，以获取更完整的示例。

主要贡献者

Pranav Maid
Vatsal Tanna Dhvanit Vaghani Ujas Majithiya

许可证

MIT License
Copyright (c) 2022 Simform Solutions
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

GitHub

查看 Github