How to get started with Flutter Chat (SfChat)?
In this article, we have explained how to get started with Flutter Chat. The SfChat widget facilitates conversations between two or more people. It provides extensive customization options through features like ChatMessageSettings for message appearance, ChatComposer for text input customization, and ChatActionButton for sending messages to the message list. This article will explore each feature in detail, demonstrating how to customize the chat interface effectively.
The following steps explains how to get started with Flutter Chat.
Step 1: Import the required packages
Add the following dependency in your pubspec.yaml file to install the Syncfusion® Flutter Chat package, which is required for running the chat widget in your application.
dependencies:
syncfusion_flutter_chat: ^xx.xx.x
Step 2: Initialize the SfChat widget
To create a SfChat sample, first initialize the SfChat widget with the required properties such as messages and outgoingUser. The messages property contains the list of message which will render in the conversation UI and outgoingUser helps to differentiate the incoming and outgoing user.
List<ChatMessage> _messages = [];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '00-00230-23423',
),
);
}
After added the above code and deploy the sample, the default UI with empty conversation area will display in the UI:
Step 3: Add placeholder UI to chat widget
To add a placeholder UI in the chat widget, use the placeholderBuilder property. This will be shown in the conversation area when the message list is empty.
placeholderBuilder: (context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.question_answer_outlined,
color: Theme.of(context).colorScheme.primary,
size: 32,
),
Text(
'No conversation yet.',
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.primary,
),
),
],
);
},
Output:
Step 4: Add composer to the Chat widget
The composer property in the chat widget allows customization of the text input area, enabling users to personalize its appearance and behavior. Various properties, such as decoration, minLines, maxLines, textStyle, and margin, can be used to modify its styling and layout. The composer is designed to display user-entered text, which is automatically cleared when the action button is pressed. Even if the composer property is not explicitly initialized, it will still appear in the chat interface by default.
Code snippet:
composer: const ChatComposer(
minLines: 1,
maxLines: 5,
decoration: InputDecoration(
hintText: 'Enter the message...',
),
),
Output:
Step 5: Add ActionButton to the Chat widget
To display the ActionButton in the chat interface, first initialize the action button property in the chat widget. The action button is only enabled when a message is entered in the composer. When the action button is pressed, it triggers the onPressed callback, which adds the entered text as a new ChatMessage to the message list, along with the current time and author information like author ID and author name. The setState method is used to update the message to the message list and displaying the new message in the conversation area.
actionButton: ChatActionButton(
tooltip: 'Send Button',
hoverColor: Colors.green,
onPressed: (String text) {
setState(() {
_messages.add(
ChatMessage(
text: text,
time: DateTime.now(),
author: const ChatAuthor(
id: '00-00230-23423',
name: 'Sam',
),
),
);
});
},
),
Output:
Step 6: Customize the Incoming and outgoing message content using ChatMessageSettings in SfChat widget
To customize incoming and outgoing message bubbles in the SfChat widget, use incomingMessageSettings and outgoinMessageSettings, which accept ChatMessageSettings. These properties allow customization of background color, shape, width, text style, and display options like avatar, username, and timestamp, ensuring a visually distinct chat interface.
Incoming message settings:
incomingMessageSettings: ChatMessageSettings(
backgroundColor: Colors.grey.shade300,
widthFactor: 0.9,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
topRight: Radius.circular(5),
bottomLeft: Radius.zero,
bottomRight: Radius.circular(5),
),
),
headerTextStyle: const TextStyle(
color: Colors.green,
fontSize: 10,
),
),
Outgoing message settings:
outgoingMessageSettings: ChatMessageSettings(
contentBackgroundColor: Theme.of(context).colorScheme.primary,
widthFactor: 0.85,
showTimestamp: false,
showAuthorAvatar: false,
showAuthorName: false,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
topRight: Radius.circular(5),
bottomLeft: Radius.circular(5),
bottomRight: Radius.zero,
),
),
textStyle: const TextStyle(
fontSize: 14,
color: Colors.white,
),
),
Output:
Created the chat widget sample by following these steps. The final user interface that incorporates all the above steps is displayed below.
Conclusion
I hope you enjoyed learning about how to get started with Flutter Chat.
You can refer to our Flutter Chat feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our Flutter Chat example to understand how to create the chat widget.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
