chatview 1.0.0 chatview: ^1.0.0 copied to clipboard
A Flutter package that allows you to integrate Chat View with highly customization options.
import 'package:chatview/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
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
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,
),
],
);
@override
Widget build(BuildContext context) {
return Scaffold(
body: ChatView(
currentUser: currentUser,
chatController: _chatController,
onSendTap: _onSendTap,
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,
),
),
],
),
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(
textStyle: TextStyle(color: theme.textFieldTextColor),
),
),
chatBubbleConfig: ChatBubbleConfiguration(
outgoingChatBubbleConfig: ChatBubble(
linkPreviewConfig: LinkPreviewConfiguration(// Need for web
backgroundColor: theme.linkPreviewOutgoingChatColor,
bodyStyle: theme.outgoingChatLinkBodyStyle,
titleStyle: theme.outgoingChatLinkTitleStyle,
),
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),
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,
onEmojiTap: (emoji, messageId) => _chatController.setReaction(
emoji: emoji,
messageId: messageId,
userId: currentUser.id,
),
),
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:
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,
),
),
);
}
void _onSendTap(String message, ReplyMessage replyMessage) {
final id = int.parse(Data.messageList.last.id) + 1;
_chatController.addMessage(
Message(
id: id.toString(),
createdAt: DateTime.now(),
message: message,
sendBy: currentUser.id,
replyMessage: replyMessage,
),
);
}
void _onThemeIconTap() {
setState(() {
if (isDarkTheme) {
theme = LightTheme();
isDarkTheme = false;
} else {
theme = DarkTheme();
isDarkTheme = true;
}
});
}
}