Flutter自定义聊天视图插件chatview_custom_ng的使用

Flutter自定义聊天视图插件chatview_custom_ng的使用

插件简介

ChatView 是一个 Flutter 包，允许你集成带有高度自定义选项的聊天视图，例如一对一聊天、群组聊天、消息反应、回复消息、链接预览以及整体视图的配置。

Web演示访问：Chat View Example。

预览

迁移指南（版本 2.0.0）

以下是一些重要的更改：

• 将 Message 类中的 sendBy 字段重命名为 sentBy。
• 将 ChatController 类中的 chatUsers 字段重命名为 otherUsers。
• 将 currentUser 字段从 ChatView 小部件移动到 ChatController 类。
• 更新了 Message 的 copyWith 方法中的 id 值以具有正确的值。
• 移除了 ChatView 中的 showTypingIndicator 字段，并将其替换为 ChatController.showTypingIndicator。
• 更新了 ChatUser、Message 和 ReplyMessage 数据模型的 fromJson 和 toJson 方法：
  • 在 ChatUser.fromJson 中，将 'imageType': ImageType.asset 替换为 'imageType': 'asset'。
  • 在 ChatUser.toJson 中，将 imageType: ImageType.asset 替换为 imageType: asset。
  • 在 Message.fromJson 中，将 'createdAt': DateTime.now() 替换为 'createdAt': '2024-06-13T17:32:19.586412'，并将 message_type 和 voice_message_duration 替换为字符串格式。
  • 在 Message.toJson 中，将 createdAt: 2024-06-13 17:23:19.454789 替换为 createdAt: 2024-06-13T17:32:19.586412，并将 message_type 和 voice_message_duration 替换为字符串格式。
  • 在 ReplyMessage.fromJson 中，将 'message_type': MessageType.text 替换为 'message_type': 'text'，并将 voiceMessageDuration 替换为字符串格式。
  • 在 ReplyMessage.toJson 中，将 message_type: MessageType.text 替换为 message_type: text，并将 voiceMessageDuration 替换为字符串格式。

安装

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

dependencies:
  chatview: <最新版本>

获取最新版本请查看 pub.dev 上的 “Installing” 标签。

1. 导入包：

import 'package:chatview_custom_ng/chatview.dart';

1. 添加一个聊天控制器：

final chatController = ChatController(
  initialMessageList: messageList,
  scrollController: ScrollController(),
  currentUser: ChatUser(id: '1', name: 'Flutter'),
  otherUsers: [ChatUser(id: '2', name: 'Simform')],
);

1. 添加 ChatView 小部件：

ChatView(
  chatController: chatController,
  onSendTap: onSendTap,
  chatViewState: ChatViewState.hasMessages, // 添加此状态以确保数据可用。
)

1. 添加消息列表：

List<Message> messageList = [
  Message(
    id: '1',
    message: "Hi",
    createdAt: createdAt,
    sentBy: userId,
  ),
  Message(
    id: '2',
    message: "Hello",
    createdAt: createdAt,
    sentBy: userId,
  ),
];

1. 添加 onSendTap 回调：

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

消息类型兼容性

平台特定配置

对于图像选择器

iOS

在 <项目根目录>/ios/Runner/Info.plist 文件中添加以下键：

<key>NSCameraUsageDescription</key>
<string>用于演示图像选择器插件</string>
<key>NSMicrophoneUsageDescription</key>
<string>用于捕获音频以进行图像选择器演示</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>用于演示图像选择器插件</string>

对于语音消息

iOS

在 ios/Runner/Info.plist 文件中添加以下两行：

<key>NSMicrophoneUsageDescription</key>
<string>此应用程序需要麦克风权限。</string>

在 Podfile 文件中添加以下行：

platform :ios, '10.0'

Android

在 android/app/build.gradle 文件中将最小 Android SDK 版本更改为 21 或更高：

minSdkVersion 21

在 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(      // 发送方的消息聊天气泡
      color: Colors.blue,
      borderRadius: const BorderRadius.only(
        topRight: Radius.circular(12),
        topLeft: Radius.circular(12),
        bottomLeft: Radius.circular(12),
      ),
    ),
    inComingChatBubbleConfig: ChatBubble(      // 接收方的消息聊天气泡
      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, sentBy){
        // Your code goes here
    },
    onRightSwipe: (message, sentBy){
        // Your code goes here
    },              
  ),
  ...
)

1. 使用 MessageConfiguration 类添加消息配置：

ChatView(
  ...
  messageConfig: MessageConfiguration(
    messageReactionConfig: MessageReactionConfiguration(),      // 单条消息的表情符号反应配置
    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 是 'Message' 类实例
       // Your code goes here
    },
    onReplyTap:(message){                    // message 是 'Message' 类实例
       // 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. 使用 TypeIndicatorConfiguration 类自定义输入指示器配置：

ChatView(
  ...

  typeIndicatorConfig: TypeIndicatorConfiguration(
    flashingCircleBrightColor: Colors.grey,
    flashingCircleDarkColor: Colors.black,
  ),
  ...
)

1. 使用 ChatController.setTypingIndicator 显示或隐藏输入指示器：

/// 使用您的 [ChatController] 实例。
_chatContoller.setTypingIndicator = true; // 显示指示器
_chatContoller.setTypingIndicator = false; // 隐藏指示器

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(
    enableCameraImagePicker: false,
    enableGalleryImagePicker: true,
    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) {
                // 发送正在编写/已编写状态给其他客户端
                // 您的代码在这里
            },   

            
        /// 停止输入后，阈值时间在将编写状态更改为 [TypeWriterStatus.typed]。
        /// 默认为 1 秒。
            compositionThresholdTime: const Duration(seconds: 1),

        ),
    ...
  )
)

1. 在 outgoingChatBubbleConfig 中传递自定义收据构建器或处理收据相关事宜：

ChatView(
   ...
      featureActiveConfig: const FeatureActiveConfig(
            /// 控制消息已读收据的可见性，默认为 true
            lastSeenAgoBuilderVisibility: false,
            /// 控制消息 [receiptsBuilder] 的可见性
            receiptsBuilderVisibility: false),            
       ChatBubbleConfiguration(
          inComingChatBubbleConfig: ChatBubble(
            onMessageRead: (message) {
              /// 发送您的消息收据给其他客户端
              debugPrint('Message Read');
            },

          ),
          outgoingChatBubbleConfig: ChatBubble(
              receiptsWidgetConfig: ReceiptsWidgetConfig(
                      /// 自定义收据构建器 
                      receiptsBuilder: _customReceiptsBuilder,
                      /// 是否在所有消息中显示收据，还是仅在最后一条消息中显示，就像 Instagram
                      showReceiptsIn: ShowReceiptsIn.lastMessage
              ),
            ), 
        ), 
        
  ...
 
)

1. 设置标志 enableOtherUserName 以隐藏用户名：

ChatView(
   ...
      featureActiveConfig: const FeatureActiveConfig(
        enableOtherUserName: false,
      ),
   ...

)

1. 为接收方消息添加报告按钮并更新 onMoreTap 和 onReportTap 回调：

ChatView(
   ...
      replyPopupConfig: ReplyPopupConfiguration(
        onReportTap: (Message message) {
          debugPrint('Message: $message');
        },
        onMoreTap: (Message message, bool sentByCurrentUser) {
          debugPrint('Message : $message');
        },
      ),
   ...
)

1. 添加 emojiPickerSheetConfig 来配置表情符号选择器界面：

ChatView(
   ...
      emojiPickerSheetConfig: Config(
        emojiViewConfig: EmojiViewConfig(
          columns: 7,
          emojiSizeMax: 32,
          recentsLimit: 28,
          backgroundColor: Colors.white,
        ),
        categoryViewConfig: const CategoryViewConfig(
          initCategory: Category.RECENT,
          recentTabBehavior: RecentTabBehavior.NONE,
        ),
  ...
 
)

1. 使用 VoiceRecordingConfiguration 在 sendMessageConfig 中配置样式和录音质量：

ChatView(
    ...
      sendMessageConfig: SendMessageConfiguration(

            voiceRecordingConfiguration: VoiceRecordingConfiguration(
            iosEncoder: IosEncoder.kAudioFormatMPEG4AAC,
            androidOutputFormat: AndroidOutputFormat.mpeg4,
            androidEncoder: AndroidEncoder.aac, 
            bitRate: 128000,
            sampleRate: 44100,
            waveStyle: WaveStyle(
                showMiddleLine: false,
                waveColor: theme.waveColor ?? Colors.white,
                extendWaveform: true,
            ),
        ),
    
    ...
  )
)

1. 添加标志 enabled 以启用/禁用聊天文本字段：

ChatView(
   ...
      sendMessageConfig: SendMessageConfiguration(
      ...
        textFieldConfig: TextFieldConfig(
          enabled: true // [false] 禁用文本字段。
        ),
      ...
      ),
  ...
 
)

1. 添加标志 isProfilePhotoInBase64 以定义提供的图像是否为 URL 或 Base64 数据：

final chatController = ChatController(
  ...
    chatUsers: [
      ChatUser(
        id: '1',
        name: 'Simform',
        isProfilePhotoInBase64: false,
        profilePhoto: 'ImageNetworkUrl',
      ),
    ],
  ...
);

ChatView(
   ...
      profileCircleConfig: const ProfileCircleConfiguration(
        isProfilePhotoInBase64: false,
        profileImageUrl: 'ImageNetworkUrl',
      ),
   ...
)

1. 在 DefaultGroupSeparatorConfiguration 中添加 chatSeparatorDatePattern 以分离聊天并使用提供的模式：

ChatView(
    ...
      chatBackgroundConfig: ChatBackgroundConfiguration(
        ...
          defaultGroupSeparatorConfig: DefaultGroupSeparatorConfiguration(
            chatSeparatorDatePattern: 'MMM dd, yyyy'
          ),
        ...
      ),
    ...
)

1. 添加 cancelRecordConfiguration 字段以提供取消语音记录消息的配置：

ChatView(
   ...
      sendMessageConfig: SendMessageConfiguration(
        ...
           cancelRecordConfiguration: CancelRecordConfiguration(
            icon: const Icon(
              Icons.cancel_outlined,
            ),
            onCancel: () {
              debugPrint('Voice recording cancelled');
            },
            iconColor: Colors.black,
           ),
        ...
      ),
   ...

)

1. 添加对点击反应用户列表回调的支持 reactedUserCallback：

ChatView(
   ...
      messageConfig: MessageConfiguration(
      ...
        messageReactionConfig: MessageReactionConfiguration(
          reactionsBottomSheetConfig: ReactionsBottomSheetConfiguration(
            reactedUserCallback: (reactedUser, reaction) {
              debugPrint(reaction);
            },
          ),
        ),
      ...
      ),
  ...
),

1. 添加 customMessageReplyViewBuilder 以自定义自定义类型消息的回复消息视图：

ChatView(
  ...
    messageConfig: MessageConfiguration(
      customMessageBuilder: (ReplyMessage state) {
        return Text(
        state.message,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        style: const TextStyle(
          fontSize: 12,
          color: Colors.black,
          ),
        );
      },
    ),
  ...
)

1. 添加默认头像 defaultAvatarImage，资产和网络头像错误构建器 assetImageErrorBuilder 和 networkImageErrorBuilder，以及枚举 ImageType 以定义图像为资产、网络或 Base64 数据：

ChatView(
  ...
      appBar: ChatViewAppBar(
        defaultAvatarImage: defaultAvatar,
        imageType: ImageType.network,
        networkImageErrorBuilder: (context, url, error) {
          return Center(
            child: Text('Error $error'),
          );
        },
        assetImageErrorBuilder: (context, error, stackTrace) {
          return Center(
            child: Text('Error $error'),
          );
        },
      ),
  ...
),

1. 添加 customMessageReplyViewBuilder 以自定义自定义类型消息的回复消息视图：

ChatView(
  ...
    messageConfig: MessageConfiguration(
      customMessageBuilder: (ReplyMessage state) {
        return Text(
        state.message,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        style: const TextStyle(
          fontSize: 12,
          color: Colors.black,
          ),
        );
      },
    ),
  ...
)

1. 添加 replyMessageBuilder 以自定义回复视图：

ChatView(
  ...
    replyMessageBuilder: (context, state) {
      return Container(
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.vertical(
            top: Radius.circular(14),
          ),
        ),
        margin: const EdgeInsets.only(
          bottom: 17,
          right: 0.4,
          left: 0.4,
        ),
        padding: const EdgeInsets.fromLTRB(10, 10, 10, 30),
          child: Container(
            padding: const EdgeInsets.symmetric(
              horizontal: 6,
            ),
            decoration: BoxDecoration(
              color: Colors.grey.shade200,
              borderRadius: BorderRadius.circular(12),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: Text( 
                        state.message,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: const TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    IconButton(
                      constraints: const BoxConstraints(),
                      padding: EdgeInsets.zero,
                      icon: const Icon(
                        Icons.close,
                        size: 16,
                      ),
                      onPressed: () => ChatView.closeReplyMessageView(context),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
    },
  ...
)

1. 添加回复建议功能：

• 添加回复建议：

_chatController.addReplySuggestions([
      SuggestionItemData(text: 'Thanks.'),
      SuggestionItemData(text: 'Thank you very much.'),
      SuggestionItemData(text: 'Great.')
    ]);

• 删除回复建议：

_chatController.removeReplySuggestions();

• 更新建议配置：

replySuggestionsConfig: ReplySuggestionsConfig(
    itemConfig: SuggestionItemConfig(
        decoration: BoxDecoration(),
        textStyle: TextStyle(),
        padding: EdgetInsets.all(8),
        customItemBuilder: (index, suggestionItemData) => Container()
    ),
    listConfig: SuggestionListConfig(
        decoration: BoxDecoration(),
        padding: EdgetInsets.all(8),
        itemSeparatorWidth: 8,
        axisAlignment: SuggestionListAlignment.left
    )
    onTap: (item) => 
        _onSendTap(item.text, const ReplyMessage(), MessageType.text),
    autoDismissOnSelection: true
),

1. 添加 messageSorter 回调以在 ChatBackgroundConfiguration 中排序消息：

ChatView(
   ...
      chatBackgroundConfig: ChatBackgroundConfiguration(
      ...
        messageSorter: (message1, message2) {
          return message1.createdAt.compareTo(message2.createdAt);
        }
      ...
     ),
  ...
),

1. 使用 ScrollToBottomButtonConfig 更改滚动到底部按钮的配置：

ChatView(
  ...
    scrollToBottomButtonConfig: ScrollToBottomButtonConfig(

),
  ...
),

如何使用

检查 博客 以获得更好的理解和基本实现。

此外，完整的示例可以在 example 目录中找到，或者在 pub.dartlang.org 的 “Example” 标签下找到。

主要贡献者

姓名	头像
Vatsal Tanna
Dhvanit Vaghani
Ujas Majithiya
Apurva Kanthraviya
Aditya Chavda

许可证

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.

示例代码

import 'package:chatview_custom_ng/chatview.dart';
import 'package:example/data.dart';
import 'package:example/models/theme.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/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](/user/override)
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  AppTheme theme = LightTheme();
  bool isDarkTheme = false;
  final _chatController = ChatController(
    initialMessageList: Data.messageList,
    scrollController: ScrollController(),
    currentUser: ChatUser(
      id: '1',
      name: 'Flutter',
      profilePhoto: Data.profileImage,
    ),
    otherUsers: [
      ChatUser(
        id: '2',
        name: 'Simform',
        profilePhoto: Data.profileImage,
      ),
      ChatUser(
        id: '3',
        name: 'Jhon',
        profilePhoto: Data.profileImage,
      ),
      ChatUser(
        id: '4',
        name: 'Mike',
        profilePhoto: Data.profileImage,
      ),
      ChatUser(
        id: '5',
        name: 'Rich',
        profilePhoto: Data.profileImage,
      ),
    ],
  );

  void _showHideTypingIndicator() {
    _chatController.setTypingIndicator = !_chatController.showTypingIndicator;
  }

  void receiveMessage() async {
    _chatController.addMessage(
      Message(
        id: DateTime.now().toString(),
        message: 'I will schedule the meeting.',
        createdAt: DateTime.now(),
        sentBy: '2',
      ),
    );
    await Future.delayed(const Duration(milliseconds: 500));
    _chatController.addReplySuggestions([
      const SuggestionItemData(text: 'Thanks.'),
      const SuggestionItemData(text: 'Thank you very much.'),
      const SuggestionItemData(text: 'Great.')
    ]);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: ChatView(
        chatController: _chatController,
        onSendTap: _onSendTap,
        featureActiveConfig: const FeatureActiveConfig(
          lastSeenAgoBuilderVisibility: true,
          receiptsBuilderVisibility: true,
          enableScrollToBottomButton: true,
        ),
        scrollToBottomButtonConfig: ScrollToBottomButtonConfig(
          backgroundColor: theme.textFieldBackgroundColor,
          border: Border.all(
            color: isDarkTheme ? Colors.transparent : Colors.grey,
          ),
          icon: Icon(
            Icons.keyboard_arrow_down_rounded,
            color: theme.themeIconColor,
            weight: 10,
            size: 30,
          ),
        ),
        chatViewState: ChatViewState.hasMessages,
        chatViewStateConfig: ChatViewStateConfiguration(
          loadingWidgetConfig: ChatViewStateWidgetConfiguration(
            loadingIndicatorColor: theme.outgoingChatBubbleColor,
          ),
          onReloadButtonTap: () {},
        ),
        typeIndicatorConfig: TypeIndicatorConfiguration(
          flashingCircleBrightColor: theme.flashingCircleBrightColor,
          flashingCircleDarkColor: theme.flashingCircleDarkColor,
        ),
        appBar: ChatViewAppBar(
          elevation: theme.elevation,
          backGroundColor: theme.appBarColor,
          profilePicture: Data.profileImage,
          backArrowColor: theme.backArrowColor,
          chatTitle: "Chat view",
          chatTitleTextStyle: TextStyle(
            color: theme.appBarTitleTextStyle,
            fontWeight: FontWeight.bold,
            fontSize: 18,
            letterSpacing: 0.25,
          ),
          userStatus: "online",
          userStatusTextStyle: const TextStyle(color: Colors.grey),
          actions: [
            IconButton(
              onPressed: _onThemeIconTap,
              icon: Icon(
                isDarkTheme
                    ? Icons.brightness_4_outlined
                    : Icons.dark_mode_outlined,
                color: theme.themeIconColor,
              ),
            ),
            IconButton(
              tooltip: 'Toggle TypingIndicator',
              onPressed: _showHideTypingIndicator,
              icon: Icon(
                Icons.keyboard,
                color: theme.themeIconColor,
              ),
            ),
            IconButton(
              tooltip: 'Simulate Message receive',
              onPressed: receiveMessage,
              icon: Icon(
                Icons.supervised_user_circle,
                color: theme.themeIconColor,
              ),
            ),
          ],
        ),
        chatBackgroundConfig: ChatBackgroundConfiguration(
          messageTimeIconColor: theme.messageTimeIconColor,
          messageTimeTextStyle: TextStyle(color: theme.messageTimeTextColor),
          defaultGroupSeparatorConfig: DefaultGroupSeparatorConfiguration(
            textStyle: TextStyle(
              color: theme.chatHeaderColor,
              fontSize: 17,
            ),
          ),
          backgroundColor: theme.backgroundColor,
        ),
        sendMessageConfig: SendMessageConfiguration(
          imagePickerIconsConfig: ImagePickerIconsConfiguration(
            cameraIconColor: theme.cameraIconColor,
            galleryIconColor: theme.galleryIconColor,
          ),
          replyMessageColor: theme.replyMessageColor,
          defaultSendButtonColor: theme.sendButtonColor,
          replyDialogColor: theme.replyDialogColor,
          replyTitleColor: theme.replyTitleColor,
          textFieldBackgroundColor: theme.textFieldBackgroundColor,
          closeIconColor: theme.closeIconColor,
          textFieldConfig: TextFieldConfiguration(
            onMessageTyping: (status) {
              /// Do with status
              debugPrint(status.toString());
            },
            compositionThresholdTime: const Duration(seconds: 1),
            textStyle: TextStyle(color: theme.textFieldTextColor),
          ),
          micIconColor: theme.replyMicIconColor,
          voiceRecordingConfiguration: VoiceRecordingConfiguration(
            backgroundColor: theme.waveformBackgroundColor,
            recorderIconColor: theme.recordIconColor,
            waveStyle: WaveStyle(
              showMiddleLine: false,
              waveColor: theme.waveColor ?? Colors.white,
              extendWaveform: true,
            ),
          ),
        ),
        chatBubbleConfig: ChatBubbleConfiguration(
          outgoingChatBubbleConfig: ChatBubble(
            linkPreviewConfig: LinkPreviewConfiguration(
              backgroundColor: theme.linkPreviewOutgoingChatColor,
              bodyStyle: theme.outgoingChatLinkBodyStyle,
              titleStyle: theme.outgoingChatLinkTitleStyle,
            ),
            receiptsWidgetConfig:
                const ReceiptsWidgetConfig(showReceiptsIn: ShowReceiptsIn.all),
            color: theme.outgoingChatBubbleColor,
          ),
          inComingChatBubbleConfig: ChatBubble(
            linkPreviewConfig: LinkPreviewConfiguration(
              linkStyle: TextStyle(
                color: theme.inComingChatBubbleTextColor,
                decoration: TextDecoration.underline,
              ),
              backgroundColor: theme.linkPreviewIncomingChatColor,
              bodyStyle: theme.incomingChatLinkBodyStyle,
              titleStyle: theme.incomingChatLinkTitleStyle,
            ),
            textStyle: TextStyle(color: theme.inComingChatBubbleTextColor),
            onMessageRead: (message) {
              /// send your message reciepts to the other client
              debugPrint('Message Read');
            },
            senderNameTextStyle:
                TextStyle(color: theme.inComingChatBubbleTextColor),
            color: theme.inComingChatBubbleColor,
          ),
        ),
        replyPopupConfig: ReplyPopupConfiguration(
          backgroundColor: theme.replyPopupColor,
          buttonTextStyle: TextStyle(color: theme.replyPopupButtonColor),
          topBorderColor: theme.replyPopupTopBorderColor,
        ),
        reactionPopupConfig: ReactionPopupConfiguration(
          shadow: BoxShadow(
            color: isDarkTheme ? Colors.black54 : Colors.grey.shade400,
            blurRadius: 20,
          ),
          backgroundColor: theme.reactionPopupColor,
        ),
        messageConfig: MessageConfiguration(
          messageReactionConfig: MessageReactionConfiguration(
            backgroundColor: theme.messageReactionBackGroundColor,
            borderColor: theme.messageReactionBackGroundColor,
            reactedUserCountTextStyle:
                TextStyle(color: theme.inComingChatBubbleTextColor),
            reactionCountTextStyle:
                TextStyle(color: theme.inComingChatBubbleTextColor),
            reactionsBottomSheetConfig: ReactionsBottomSheetConfiguration(
              backgroundColor: theme.backgroundColor,
              reactedUserTextStyle: TextStyle(
                color: theme.inComingChatBubbleTextColor,
              ),
              reactionWidgetDecoration: BoxDecoration(
                color: theme.inComingChatBubbleColor,
                boxShadow: [
                  BoxShadow(
                    color: isDarkTheme ? Colors.black12 : Colors.grey.shade200,
                    offset: const Offset(0, 20),
                    blurRadius: 40,
                  )
                ],
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ),
          imageMessageConfig: ImageMessageConfiguration(
            margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 15),
            shareIconConfig: ShareIconConfiguration(
              defaultIconBackgroundColor: theme.shareIconBackgroundColor,
              defaultIconColor: theme.shareIconColor,
            ),
          ),
        ),
        profileCircleConfig: const ProfileCircleConfiguration(
          profileImageUrl: Data.profileImage,
        ),
        repliedMessageConfig: RepliedMessageConfiguration(
          backgroundColor: theme.repliedMessageColor,
          verticalBarColor: theme.verticalBarColor,
          repliedMsgAutoScrollConfig: RepliedMsgAutoScrollConfig(
            enableHighlightRepliedMsg: true,
            highlightColor: Colors.pinkAccent.shade100,
            highlightScale: 1.1,
          ),
          textStyle: const TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            letterSpacing: 0.25,
          ),
          replyTitleTextStyle: TextStyle(color: theme.repliedTitleTextColor),
        ),
        swipeToReplyConfig: SwipeToReplyConfiguration(
          replyIconColor: theme.swipeToReplyIconColor,
        ),
        replySuggestionsConfig: ReplySuggestionsConfig(
          itemConfig: SuggestionItemConfig(
            decoration: BoxDecoration(
              color: theme.textFieldBackgroundColor,
              borderRadius: BorderRadius.circular(8),
              border: Border.all(
                color: theme.outgoingChatBubbleColor ?? Colors.white,
              ),
            ),
            textStyle: TextStyle(
              color: isDarkTheme ? Colors.white : Colors.black,
            ),
          ),
          onTap: (item) =>
              _onSendTap(item.text, const ReplyMessage(), MessageType.text),
        ),
      ),
    );
  }

  void _onSendTap(
    String message,
    ReplyMessage replyMessage,
    MessageType messageType,
  ) {
    _chatController.addMessage(
      Message(
        id: DateTime.now().toString(),
        createdAt: DateTime.now(),
        message: message,
        sentBy: _chatController.currentUser.id,
        replyMessage: replyMessage,
        messageType: messageType,
      ),
    );
    Future.delayed(const Duration(milliseconds: 300), () {
      _chatController.initialMessageList.last.setStatus =
          MessageStatus.undelivered;
    });
    Future.delayed(const Duration(seconds: 1), () {
      _chatController.initialMessageList.last.setStatus = MessageStatus.read;
    });
  }

  void _onThemeIconTap() {
    setState(() {
      if (isDarkTheme) {
        theme = LightTheme();
        isDarkTheme = false;
      } else {
        theme = DarkTheme();
        isDarkTheme = true;
      }
    });
  }
}