Flutter聊天功能插件chat_package的使用
Flutter聊天功能插件chat_package的使用
聊天功能插件chat_package
本插件提供了在您的Flutter项目中轻松实现聊天界面的功能,支持音频录制和发送图片。此插件高度可定制,以适应您的项目需求。
由Omar Mouki创建
截图
即将推出
此包的下一个更新将添加视频录制的支持,添加捕获/存储图片的字幕,以及其他更多功能。
使用方法
权限设置
您只需在项目中添加权限,该插件将处理其余部分。 所需的权限包括:
- 相机
- 麦克风
- 本地存储
Android
- 在您的“gradle.properties”文件中添加以下内容:
android.useAndroidX=true android.enableJetifier=true
- 若要使用录音功能,请确保在您的“android/app/build.gradle”文件中的
compileSdkVersion
设置为21:android { compileSdkVersion 21 ... }
- 确保将所有
android.
依赖项替换为其AndroidX对应项(完整的列表可以在这里找到:https://developer.android.com/jetpack/androidx/migrate)。
在您的AndroidManifest.xml
文件中添加权限:
<uses-permission android:name="android.permission.INTERNET"/>
<!-- 存储组的权限选项 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<!-- 相机组的权限选项 -->
<uses-permission android:name="android.permission.CAMERA"/>
<!-- 录音组的权限选项 -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
iOS
<!-- 相机组的权限选项 -->
<key>NSCameraUsageDescription</key>
<string>camera</string>
<!-- 麦克风组的权限选项 -->
<key>NSMicrophoneUsageDescription</key>
<string>microphone</string>
<!-- 照片组的权限选项 -->
<key>NSPhotoLibraryUsageDescription</key>
<string>photos</string>
在您的Podfile中添加以下内容:
target.build_configurations.each do |config|
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
'PERMISSION_CAMERA=1',
'PERMISSION_MICROPHONE=1',
'PERMISSION_PHOTOS=1',
]
end
调用
简单调用ChatScreen
。
ChatMessages
: 聊天屏幕需要一个聊天消息列表,并且为了方便起见,ChatMessage
模型包含了一个fromJson()
方法,因此您可以迭代存储的ChatMessage
列表。以下是ChatMessage
的一个例子:
ChatMessage(
isSender: true,
text: 'this is a banana',
chatMedia: ChatMedia(
url:
'https://images.pexels.com/photos/7194915/pexels-photo-7194915.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
mediaType: MediaType.imageMediaType(),
),
)
此包还提供了ChatMessage
模型,当使用这些必需的方法时,例如onTextSubmit
、handleRecord
和 handleImageSelect
,完整的代码如下所示:
ChatScreen(
scrollController: scrollController,
messages: messages,
onSlideToCancelRecord: () {
log('not sent');
},
onTextSubmit: (textMessage) {
setState(() {
messages.add(textMessage);
scrollController
.jumpTo(scrollController.position.maxScrollExtent + 50);
});
},
handleRecord: (audioMessage, canceled) {
if (!canceled) {
setState(() {
messages.add(audioMessage!);
scrollController
.jumpTo(scrollController.position.maxScrollExtent + 90);
});
}
},
handleImageSelect: (imageMessage) async {
if (imageMessage != null) {
setState(() {
messages.add(
imageMessage,
);
scrollController
.jumpTo(scrollController.position.maxScrollExtent + 300);
});
}
},
)
属性
您可以几乎自定义此包中的所有内容,以下是您可以更改的所有属性:
/// 发送者消息容器的颜色
final Color? senderColor;
/// 音频滑块未激活部分的颜色
final Color? inActiveAudioSliderColor;
/// 音频滑块激活部分的颜色
final Color? activeAudioSliderColor;
/// [必需] 聊天屏幕的滚动控制器
final ScrollController scrollController;
/// 聊天输入字段容器的颜色
final Color chatInputFieldColor;
/// 发送消息的提示文本
final String sendMessageHintText;
/// 更改附件底部弹出窗口中的文本和图标的参数
/// 附件底部弹出窗口中选择图像附件来自相册时显示的文本
final String imageAttachmentFromGalleryText;
/// 附件底部弹出窗口中选择图像附件来自相册时显示的图标
final Icon? imageAttachmentFromGalleryIcon;
/// 附件底部弹出窗口中选择图像附件来自相机时显示的文本
final String imageAttachmentFromCameraText;
/// 附件底部弹出窗口中选择图像附件来自相机时显示的图标
final Icon? imageAttachmentFromCameraIcon;
/// 附件底部弹出窗口中取消文本显示的文本
final String imageAttachmentCancelText;
/// 附件底部弹出窗口中取消文本显示的图标
final Icon? imageAttachmentCancelIcon;
/// 附件底部弹出窗口中图像附件的文本样式
final TextStyle? imageAttachmentTextStyle;
/// 录制语音提示文本
final String recordingNoteHintText;
/// [必需] 处理文本消息提交
/// 此方法将传递一个 [ChatMessage]
final Function(ChatMessage textMessage) onTextSubmit;
/// [必需] 聊天消息列表
final List<ChatMessage> messages;
/// [必需] 处理成功录制,传递到覆盖的方法
/// 如果用户取消了录制,此方法将传递一个 [ChatMessage]
final Function(ChatMessage? audioMessage, bool canceled) handleRecord;
/// [必需] 处理图像选择
/// 此方法将传递一个 [ChatMessage]
final Function(ChatMessage? imageMessage) handleImageSelect;
/// 处理取消录制
final VoidCallback? onSlideToCancelRecord;
/// 控制输入文本的TextEditingController
final TextEditingController? textEditingController;
/// 更改聊天输入字段外观
final BoxDecoration? chatInputFieldDecoration;
/// 使用此标志禁用输入
final bool disableInput;
/// 获取聊天输入字段填充
final EdgeInsets? chatInputFieldPadding;
/// 消息容器的文本样式
final TextStyle? messageContainerTextStyle;
/// 消息容器日期的文本样式
final TextStyle? sendDateTextStyle;
/// 可选参数以覆盖默认的附件底部弹出窗口
final Function(BuildContext context)? attachmentClick;
更多关于Flutter聊天功能插件chat_package的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter聊天功能插件chat_package的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter项目中使用chat_package
插件来实现聊天功能的示例代码。请注意,chat_package
可能是一个假设的包名,因为在实际中可能没有一个确切名为chat_package
的官方Flutter插件。不过,我会根据常见的聊天功能插件的使用方式给出一个示例,这里假设有一个类似的包来实现聊天功能。
首先,确保你已经在pubspec.yaml
文件中添加了该插件的依赖(这里用chat_package
作为示例):
dependencies:
flutter:
sdk: flutter
chat_package: ^latest_version # 请替换为实际的包名和最新版本号
然后,运行flutter pub get
来安装依赖。
接下来,在你的Flutter项目中,你可以按照以下步骤来设置聊天功能:
1. 导入包
在你的Dart文件中导入chat_package
:
import 'package:chat_package/chat_package.dart';
2. 创建聊天界面
创建一个新的Dart文件(例如chat_screen.dart
)来定义你的聊天界面。这里是一个基本的聊天界面示例:
import 'package:flutter/material.dart';
import 'package:chat_package/chat_package.dart'; // 假设的包导入
class ChatScreen extends StatefulWidget {
@override
_ChatScreenState createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
ChatController _chatController;
@override
void initState() {
super.initState();
_chatController = ChatController();
// 初始化聊天数据,这里可以是从服务器获取的数据
_chatController.messages.addAll([
ChatMessage(
sender: 'User1',
text: 'Hello!',
timestamp: DateTime.now().subtract(Duration(minutes: 5)),
),
ChatMessage(
sender: 'User2',
text: 'Hi there!',
timestamp: DateTime.now().subtract(Duration(minutes: 3)),
),
]);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Chat'),
),
body: ChatWidget(
controller: _chatController,
onMessageSent: (ChatMessage message) {
// 当用户发送消息时调用,这里可以添加消息到服务器
print('Message sent: ${message.text}');
_chatController.messages.add(message);
// 滚动到底部
_scrollToBottom();
},
),
bottomNavigationBar: Container(
decoration: BoxDecoration(color: Colors.white),
child: Row(
children: [
Expanded(
child: TextField(
onChanged: (value) {
// 更新输入状态
},
onEditingComplete: () {
// 当用户完成编辑时发送消息
ChatMessage message = ChatMessage(
sender: 'CurrentUser',
text: _chatController.textEditingController.text,
timestamp: DateTime.now(),
);
_chatController.textEditingController.clear();
_chatController.onMessageSent(message);
},
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Type a message...',
),
controller: _chatController.textEditingController,
),
),
IconButton(
icon: Icon(Icons.send),
onPressed: () {
_chatController.textEditingController.text.trim().isNotEmpty
? _chatController.onMessageSent(ChatMessage(
sender: 'CurrentUser',
text: _chatController.textEditingController.text,
timestamp: DateTime.now(),
))
: null;
_chatController.textEditingController.clear();
_scrollToBottom();
},
),
],
),
),
);
}
void _scrollToBottom() {
// 滚动到底部的逻辑,这里假设ChatWidget有一个滚动控制器
// _chatController.scrollController.animateTo(
// _chatController.scrollController.position.maxScrollExtent,
// duration: const Duration(milliseconds: 300),
// curve: Curves.easeOut,
// );
// 注意:上面的代码是一个假设的实现,具体实现取决于ChatWidget的实现
}
}
class ChatMessage {
String sender;
String text;
DateTime timestamp;
ChatMessage({required this.sender, required this.text, required this.timestamp});
}
// 假设的ChatController类,用于管理聊天状态
class ChatController {
TextEditingController textEditingController = TextEditingController();
List<ChatMessage> messages = [];
// ScrollController scrollController = ScrollController(); // 如果需要滚动控制
// 其他管理聊天状态的方法...
}
// 假设的ChatWidget,用于显示聊天消息
class ChatWidget extends StatelessWidget {
final ChatController controller;
final ValueChanged<ChatMessage> onMessageSent;
ChatWidget({required this.controller, required this.onMessageSent});
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: controller.messages.length,
itemBuilder: (context, index) {
ChatMessage message = controller.messages[index];
return ListTile(
leading: CircleAvatar(child: Text(message.sender[0])),
title: Text(message.text),
subtitle: Text(message.timestamp.toLocal().toString()),
);
},
);
}
}
3. 使用聊天界面
在你的主应用文件(例如main.dart
)中使用ChatScreen
:
import 'package:flutter/material.dart';
import 'chat_screen.dart'; // 导入聊天界面
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ChatScreen(),
);
}
}
注意
- 上面的代码是一个简化的示例,用于展示如何在Flutter中实现一个基本的聊天界面。
- 在实际应用中,你可能需要处理更多的逻辑,比如与后端服务器的通信、消息的持久化存储、用户身份验证等。
ChatController
和ChatWidget
是根据假设的功能实现的,实际使用时你可能需要参考具体插件的文档来进行调整。- 插件的实际API可能与示例中的不同,请参考官方文档或插件的源代码来获取准确的API信息。