ChatView: A cutting-edge chat UI solution
ChatView is a super cool Flutter package that lets you revamp your chat experience.
It has many capabilities, such as group chat, one-on-one chat, message reactions, reply messages, link preview, and configurations for overall chat view.
Moreover, you can use your custom widgets for sending messages, widgets for showing custom messages such as documents and videos, decoration of chat bubbles, and more.
Let’s implement ChatView.
How to use this Package
2. Add dependency to pubspec.yaml file
Do not forget to run Flutter pub get
3. Add ChatView class in the build method
Here’s what each parameter represents:
- currentUser: It demonstrates the user which is currently sending a message. This can be added by ChatUser class.
- chatController: The chat controller is used for controlling the chat. It is derived from the ChatController class that has a few required parameters — initialMessageList, scroll controller, and chatUsers.
- chatViewState: It is a user provided enum that demonstrates the chat's current state. ChatViewState includes noMessages, noData, loading, and error.
- onSendTap: This is a call back function that returns a message and replyMessage, to be set in the controller function.
Refer to the below code for a better understanding.
And with that, your simple Chat App is ready!
Features of ChatView
ChatView has multiple configurations that you can use according to your use case, such as:
Message Reaction
- ChatView has configurations for reaction popup that you can add by using reactionPopupConfig. To enable the reaction popup, call the chatController function on the onEmojiTap callback.
- Moreover, you can configure background color, shadow, margin, padding, animation duration, emojiConfig, and glassMorphismConfig. Here’s the code snippet for the same.
Chat Bubble Decoration
- ChatView provides chat bubble configurations for both sides using chatBubbleConfig.
- Furthermore, you can change the background color, margin, padding, text style, border radius, and linkPreviewConfig.
The below code snippet explains it well.
Chat Background Decoration
- With ChatView, you can even configure the chat background. You can add a background image, background color, message time icon color, text style, and defaultGroupSeparatorConfig as shown in the code snippet below.
Message Types and Configuration
- ChatView has three types of messages - text, image, and custom. By default, the Message class has MessageType.text type.
- For image type, add MessageType.image. You can add a margin and share icon configuration.
- To add a custom video or document, add MessageType.custom. You can preview it by adding customMessageBuilder.
Note: You can configure the appearance of the reaction in a single message.
The complete message configuration is explained in the below code snippet.
