Flutter高质量聊天插件high_q_chat的使用
Flutter高质量聊天插件high_q_chat的使用
high_q_chat 是一个用于在 Flutter 应用程序中实现高质量聊天界面的 Dart 包。它提供了一组可自定义的小部件和实用工具，以简化 Flutter 项目中聊天功能的开发。
功能特性
- 可定制UI：轻松自定义聊天界面的外观和感觉，以匹配您的应用设计。
- 消息类型：支持多种消息类型，如文本、图片、视频等。
- 用户交互：处理用户交互，例如点击、长按和滑动消息。
- 集成：无缝地将聊天功能集成到现有的 Flutter 应用程序中。
完整示例Demo
以下是一个完整的示例，展示了如何使用 high_q_chat 插件来创建一个聊天界面。
import 'package:high_q_chat/high_q_chat.dart';
import 'package:example/data.dart';
import 'package:example/models/theme.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({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 currentUser = ChatUser(
id: '1',
name: 'Flutter',
profilePhoto: Data.profileImage,
);
final _chatController = ChatController(
initialMessageList: Data.messageList,
scrollController: ScrollController(),
chatUsers: [
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 _onSendTap(
String message,
ReplyMessage replyMessage,
MessageType messageType,
) {
final id = int.parse(Data.messageList.last.id) + 1;
_chatController.addMessage(
Message(
id: id.toString(),
title: "1",
createdAt: DateTime.now(),
message: message,
sendBy: 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;
}
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: HighQChat(
currentUser: currentUser,
chatController: _chatController,
onSendTap: _onSendTap,
featureActiveConfig: const FeatureActiveConfig(
enableSwipeToReply: true,
enableSwipeToSeeTime: true,
lastSeenAgoBuilderVisibility: true,
receiptsBuilderVisibility: true,
),
highQChatState: HighQChatState.hasMessages,
highQChatStateConfig: HighQChatStateConfiguration(
loadingWidgetConfig: HighQChatStateWidgetConfiguration(
loadingIndicatorColor: theme.outgoingChatBubbleColor,
),
onReloadButtonTap: () {},
),
typeIndicatorConfig: TypeIndicatorConfiguration(
flashingCircleBrightColor: theme.flashingCircleBrightColor,
flashingCircleDarkColor: theme.flashingCircleDarkColor,
),
appBar: HighQChatAppBar(
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,
),
),
],
),
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,
),
),
chatBubbleConfig: ChatBubbleConfiguration(
outgoingChatBubbleConfig: ChatBubble(
linkPreviewConfig: LinkPreviewConfiguration(
backgroundColor: theme.linkPreviewOutgoingChatColor,
bodyStyle: theme.outgoingChatLinkBodyStyle,
titleStyle: theme.outgoingChatLinkTitleStyle,
),
receiptsWidgetConfig: const ReceiptsWidgetConfig(showReceiptsIn: ShowReceiptsIn.all),
color: theme.outgoingChatBubbleColor,
onDownloadTap: (msg) {
debugPrint(msg.fileName);
},
),
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');
},
onDownloadTap: (msg) {
debugPrint(msg.fileName);
},
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,
),
),
);
}
}
更多关于Flutter高质量聊天插件high_q_chat的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter高质量聊天插件high_q_chat的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中集成和使用高质量聊天插件 high_q_chat 的示例代码。请注意，假设 high_q_chat 插件已经在 pub.dev 上发布，并且你已经将其添加到你的 pubspec.yaml 文件中。
1. 添加依赖
首先，在你的 pubspec.yaml 文件中添加 high_q_chat 依赖：
dependencies:
flutter:
sdk: flutter
high_q_chat: ^最新版本号 # 替换为实际发布的最新版本号
然后运行 flutter pub get 来安装依赖。
2. 导入并使用插件
在你的 Flutter 项目中，你需要导入 high_q_chat 插件并使用其提供的组件和功能。以下是一个简单的示例，展示如何在一个 Flutter 应用中使用 high_q_chat 插件来显示聊天界面。
主文件 main.dart
import 'package:flutter/material.dart';
import 'package:high_q_chat/high_q_chat.dart'; // 导入 high_q_chat 插件
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 HighQChatConfig chatConfig = HighQChatConfig(
userId: 'user123', // 当前用户ID
serverUrl: 'https://your-chat-server.com/api', // 聊天服务器URL
// 其他配置参数，如是否需要认证等，根据插件文档进行配置
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Chat'),
),
body: HighQChatWidget(
config: chatConfig,
onMessageSent: (message) {
// 消息发送后的回调
print('Message sent: $message');
},
onMessageReceived: (message) {
// 消息接收后的回调
print('Message received: $message');
},
onError: (error) {
// 错误处理回调
print('Error: $error');
},
),
);
}
}
3. 配置聊天服务器
请注意，上面的示例代码中使用了 serverUrl 来配置聊天服务器。你需要确保你的聊天服务器已经正确配置，并且可以接受来自 high_q_chat 插件的请求。
4. 运行应用
完成上述步骤后，你可以运行你的 Flutter 应用。你应该会看到一个简单的聊天界面，用户可以在其中发送和接收消息。
注意事项
- 确保你遵循
high_q_chat插件的文档和API规范，以充分利用其功能。 - 插件的API和功能可能会随着版本的更新而发生变化，因此请务必查阅最新的插件文档。
- 如果你遇到任何问题或需要进一步的帮助，请查阅插件的官方文档或在相关社区中寻求支持。
由于我无法直接访问 high_q_chat 插件的源代码和文档，以上示例代码基于假设的插件API和功能。实际使用时，请务必参考插件的官方文档和示例代码。
