flutter_chatview
2.4.0
แพ็คเกจ Flutter ที่ให้คุณรวม Chat View เข้ากับตัวเลือกการปรับแต่งขั้นสูง เช่น การแชทแบบตัวต่อตัว การแชทเป็นกลุ่ม การโต้ตอบข้อความ ข้อความตอบกลับ การแสดงตัวอย่างลิงก์ และการกำหนดค่าสำหรับมุมมองโดยรวม
สำหรับการสาธิตเว็บ เยี่ยมชมตัวอย่างการแชท
เปลี่ยนชื่อฟิลด์ sendBy เป็น sentBy ในคลาส Message
เปลี่ยนชื่อฟิลด์ chatUsers เป็น otherUsers ในคลาส ChatController
ย้ายฟิลด์ currentUser จากวิดเจ็ต ChatView ไปยังคลาส ChatController
อัปเดตค่า id ในวิธี copyWith ของ Message เพื่อให้มีค่าที่ถูกต้อง
ลบฟิลด์ showTypingIndicator ออกจาก ChatView และแทนที่ด้วย ChatController.showTypingIndicator
ก่อน:
ChatView (
showTypingIndicator : false ,
),หลังจาก:
/// use it with your [ChatController] instance.
_chatContoller.setTypingIndicator = true ; // for showing indicator
_chatContoller.setTypingIndicator = false ; // for hiding indicator อัปเดตเมธอด fromJson และ toJson ของ ChatUser , Message และ ReplyMessage Data Model:
ChatUser.fromJson :ก่อน:
ChatUser . fromJson (
{
...
'imageType' : ImageType .asset,
...
},
),หลังจาก:
ChatUser . fromJson (
{
...
'imageType' : 'asset' ,
...
},
),ChatUser.toJson :ก่อน:
{
...
imageType : ImageType .asset,
...
}หลังจาก:
{
...
imageType : asset,
...
}Message.fromJson :ก่อน:
Message . fromJson (
{
...
'createdAt' : DateTime . now (),
'message_type' : MessageType .text,
'voice_message_duration' : Duration (seconds : 5 ),
...
}
)หลังจาก:
Message . fromJson (
{
...
'createdAt' : '2024-06-13T17:32:19.586412' ,
'message_type' : 'text' ,
'voice_message_duration' : '5000000' ,
...
}
)Message.toJson :ก่อน:
{
...
createdAt : 2024 - 06 - 13 17 : 23 : 19.454789 ,
message_type : MessageType .text,
voice_message_duration : 0 : 00 : 05.000000 ,
...
}หลังจาก:
{
...
createdAt : 2024 - 06 - 13T17 : 32 : 19.586412 ,
message_type : text,
voice_message_duration : 5000000 ,
...
}ReplyMessage.fromJson :ก่อน:
ReplyMessage . fromJson (
{
...
'message_type' : MessageType .text,
'voiceMessageDuration' : Duration (seconds : 5 ),
...
}
)หลังจาก:
ReplyMessage . fromJson (
{
...
'message_type' : 'text' ,
'voiceMessageDuration' : '5000000' ,
...
}
) ใน ReplyMessage.toJson :
ก่อน:
{
...
message_type : MessageType .text,
voiceMessageDuration : 0 : 00 : 05.000000 ,
...
}หลังจาก:
{
...
message_type : text,
voiceMessageDuration : 5000000 ,
...
}pubspec.yaml dependencies :
chatview : < latest - version >รับเวอร์ชันล่าสุดในแท็บ "การติดตั้ง" บน pub.dev
import 'package:chatview/chatview.dart' ; final chatController = ChatController (
initialMessageList : messageList,
scrollController : ScrollController (),
currentUser : ChatUser (id : '1' , name : 'Flutter' ),
otherUsers : [ ChatUser (id : '2' , name : 'Simform' )],
);ChatView ChatView (
chatController : chatController,
onSendTap : onSendTap,
chatViewState : ChatViewState .hasMessages, // Add this state once data is available.
)Message List < Message > messageList = [
Message (
id : '1' ,
message : "Hi" ,
createdAt : createdAt,
sentBy : userId,
),
Message (
id : '2' ,
message : "Hello" ,
createdAt : createdAt,
sentBy : userId,
),
];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);
} หมายเหตุ: คุณสามารถประเมินประเภทข้อความได้จากพารามิเตอร์ messageType โดยขึ้นอยู่กับว่าคุณสามารถดำเนินการได้
| ประเภทข้อความ | หุ่นยนต์ | ไอโอเอส | แมคโอเอส | เว็บ | ลินุกซ์ | หน้าต่าง |
|---|---|---|---|---|---|---|
| ข้อความ | ||||||
| ข้อความรูปภาพ | ||||||
| ข้อความเสียง | ||||||
| ข้อความที่กำหนดเอง |
<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/Runner/Info.plist <key>NSMicrophoneUsageDescription</key>
<string>This app requires Mic permission.</string>
Podfile platform :ios, '10.0'
minSdkVersion 21
AndroidManifest.xml <uses-permission android:name="android.permission.RECORD_AUDIO"/>
FeatureActiveConfig ChatView (
...
featureActiveConfig : FeatureActiveConfig (
enableSwipeToReply : true ,
enableSwipeToSeeTime : false ,
),
...
)ChatViewAppBar ChatView (
...
appBar : ChatViewAppBar (
profilePicture : profileImage,
chatTitle : "Simform" ,
userStatus : "online" ,
actions : [
Icon ( Icons .more_vert),
],
),
...
)ChatBackgroundConfiguration ChatView (
...
chatBackgroundConfig : ChatBackgroundConfiguration (
backgroundColor : Colors .white,
backgroundImage : backgroundImage,
),
...
)SendMessageConfiguration ChatView (
...
sendMessageConfig : SendMessageConfiguration (
replyMessageColor : Colors .grey,
replyDialogColor : Colors .blue,
replyTitleColor : Colors .black,
closeIconColor : Colors .black,
),
...
)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 ),
),
),
)
...
)SwipeToReplyConfiguration ChatView (
...
swipeToReplyConfig : SwipeToReplyConfiguration (
onLeftSwipe : (message, sentBy){
// Your code goes here
},
onRightSwipe : (message, sentBy){
// Your code goes here
},
),
...
)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
},
),
),
),
...
)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 ,
),
),
...
)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
},
),
...
)RepliedMessageConfiguration ChatView (
...
repliedMessageConfig : RepliedMessageConfiguration (
backgroundColor : Colors .blue,
verticalBarColor : Colors .black,
repliedMsgAutoScrollConfig : RepliedMsgAutoScrollConfig (),
),
...
)typeIndicatorConfig กับ TypeIndicatorConfig ChatView (
...
typeIndicatorConfig : TypeIndicatorConfiguration (
flashingCircleBrightColor : Colors .grey,
flashingCircleDarkColor : Colors .black,
),
...
)
ChatController.setTypingIndicaor สำหรับข้อมูลเพิ่มเติม โปรดดูที่ ChatController /// use it with your [ChatController] instance.
_chatContoller.setTypingIndicator = true ; // for showing indicator
_chatContoller.setTypingIndicator = false ; // for hiding indicatorLinkPreviewConfiguration 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 ,
),
),
)
...
) ChatView (
...
isLastPage : false ,
featureActiveConfig : FeatureActiveConfig (
enablePagination : true ,
),
loadMoreData : chatController.loadMoreData,
...
) ChatView (
...
sendMessageConfig : SendMessageConfiguration (
enableCameraImagePicker : false ,
enableGalleryImagePicker : true ,
imagePickerIconsConfig : ImagePickerIconsConfiguration (
cameraIconColor : Colors .black,
galleryIconColor : Colors .black,
)
)
...
)ChatViewState ChatView (
...
chatViewStateConfig : ChatViewStateConfiguration (
loadingWidgetConfig : ChatViewStateWidgetConfiguration (
loadingIndicatorColor : Colors .pink,
),
onReloadButtonTap : () {},
),
...
)RepliedMsgAutoScrollConfig ChatView (
...
repliedMsgAutoScrollConfig : RepliedMsgAutoScrollConfig (
enableHighlightRepliedMsg : true ,
highlightColor : Colors .grey,
highlightScale : 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 ),
),
...
)
)ReceiptsWidgetConfig ใน ChatBubbleConfig ขาออก 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
),
),
),
...
)enableOtherUserName เพื่อซ่อนชื่อผู้ใช้ในการแชท ChatView (
...
featureActiveConfig : const FeatureActiveConfig (
enableOtherUserName : false ,
),
...
)onMoreTap และ onReportTap ChatView (
...
replyPopupConfig : ReplyPopupConfiguration (
onReportTap : ( Message message) {
debugPrint ( 'Message: $ message ' );
},
onMoreTap : ( Message message, bool sentByCurrentUser) {
debugPrint ( 'Message : $ message ' );
},
),
...
)emojiPickerSheetConfig สำหรับการกำหนดค่าแผ่นตัวเลือกอีโมจิ ChatView (
...
emojiPickerSheetConfig : Config (
emojiViewConfig : EmojiViewConfig (
columns : 7 ,
emojiSizeMax : 32 ,
recentsLimit : 28 ,
backgroundColor : Colors .white,
),
categoryViewConfig : const CategoryViewConfig (
initCategory : Category . RECENT ,
recentTabBehavior : RecentTabBehavior . NONE ,
),
...
)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 ,
),
),
...
)
)enabled เพื่อเปิด/ปิดการใช้งานช่องข้อความแชท ChatView (
...
sendMessageConfig : SendMessageConfiguration (
...
textFieldConfig : TextFieldConfig (
enabled : true // [false] to disable text field.
),
...
),
...
)isProfilePhotoInBase64 ที่กำหนดว่ารูปภาพที่ให้มาเป็นข้อมูล url หรือ base64 final chatController = ChatController (
...
chatUsers : [
ChatUser (
id : '1' ,
name : 'Simform' ,
isProfilePhotoInBase64 : false ,
profilePhoto : 'ImageNetworkUrl' ,
),
],
...
);
ChatView (
...
profileCircleConfig : const ProfileCircleConfiguration (
isProfilePhotoInBase64 : false ,
profileImageUrl : 'ImageNetworkUrl' ,
),
...
)chatSeparatorDatePattern ใน DefaultGroupSeparatorConfiguration เพื่อแยกการแชทด้วยรูปแบบที่ให้มา ChatView (
...
chatBackgroundConfig : ChatBackgroundConfiguration (
...
defaultGroupSeparatorConfig : DefaultGroupSeparatorConfiguration (
chatSeparatorDatePattern : 'MMM dd, yyyy'
),
...
),
...
)cancelRecordConfiguration เพื่อจัดเตรียมการกำหนดค่าเพื่อยกเลิกข้อความบันทึกเสียง ChatView (
...
sendMessageConfig : SendMessageConfiguration (
...
cancelRecordConfiguration : CancelRecordConfiguration (
icon : const Icon (
Icons .cancel_outlined,
),
onCancel : () {
debugPrint ( 'Voice recording cancelled' );
},
iconColor : Colors .black,
),
...
),
...
)reactedUserCallback ChatView (
...
messageConfig : MessageConfiguration (
...
messageReactionConfig : MessageReactionConfiguration (
reactionsBottomSheetConfig : ReactionsBottomSheetConfiguration (
reactedUserCallback : (reactedUser, reaction) {
debugPrint (reaction);
},
),
),
...
),
...
),customMessageReplyViewBuilder เพื่อปรับแต่งมุมมองข้อความตอบกลับสำหรับข้อความประเภทที่กำหนดเอง ChatView (
...
messageConfig : MessageConfiguration (
customMessageBuilder : ( ReplyMessage state) {
return Text (
state.message,
maxLines : 1 ,
overflow : TextOverflow .ellipsis,
style : const TextStyle (
fontSize : 12 ,
color : Colors .black,
),
);
},
),
...
)defaultAvatarImage ตัวสร้างข้อผิดพลาดสำหรับเนื้อหาและรูปภาพโปรไฟล์เครือข่าย assetImageErrorBuilder networkImageErrorBuilder , Enum 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 ' ),
);
},
),
...
),customMessageReplyViewBuilder เพื่อปรับแต่งมุมมองข้อความตอบกลับสำหรับข้อความประเภทที่กำหนดเอง ChatView (
...
messageConfig : MessageConfiguration (
customMessageBuilder : ( ReplyMessage state) {
return Text (
state.message,
maxLines : 1 ,
overflow : TextOverflow .ellipsis,
style : const TextStyle (
fontSize : 12 ,
color : Colors .black,
),
);
},
),
...
)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),
),
],
),
],
),
),
);
},
...
)_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
),messageSorter เพื่อจัดเรียงข้อความใน ChatBackgroundConfiguration ChatView (
...
chatBackgroundConfig : ChatBackgroundConfiguration (
...
messageSorter : (message1, message2) {
return message1.createdAt. compareTo (message2.createdAt);
}
...
),
...
),ScrollToBottomButtonConfig เพื่อเปลี่ยนการกำหนดค่าของปุ่มเลื่อนไปที่ปุ่มด้านล่าง ChatView (
...
scrollToBottomButtonConfig : ScrollToBottomButtonConfig (
),
...
),errorBody เพื่อแสดงข้อความแสดงข้อผิดพลาดเมื่อไม่สามารถแยกวิเคราะห์ลิงก์เพื่อดูตัวอย่างได้ ChatView (
...
linkPreviewConfig : LinkPreviewConfiguration (
errorBody : 'Error encountered while parsing the link for preview'
),
...
),suggestionItemType เพื่อแสดงรายการคำแนะนำแบบหลายบรรทัดและไม่อยู่ในรูปแบบที่เลื่อนได้ ChatView (
...
replySuggestionsConfig : ReplySuggestionsConfig (
suggestionItemType : SuggestionItemsType .multiline,
),
...
),ตรวจสอบบล็อกเพื่อความเข้าใจที่ดีขึ้นและการใช้งานขั้นพื้นฐาน
นอกจากนี้ สำหรับตัวอย่างทั้งหมด โปรดดูแอป ตัวอย่าง ในไดเร็กทอรีตัวอย่างหรือแท็บ 'ตัวอย่าง' บน pub.dartlang.org เพื่อดูตัวอย่างที่สมบูรณ์ยิ่งขึ้น
วัฏสาล ทันนา | ธวานิช วัคนี | อุจัส มจิทิยา | อปุรวา กันทรวิยะ | อาทิตยา ชาวาดา |
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.
