How to enable tooltip and customize the action button in SfChat widget?
In this article, we’ll explain how to enable tooltips and customize the action button in the Flutter Chat widget.
The actionButton represents the send button in the chat widget. To initialize the actionButton , create an instance of ChatActionButton and assign it to the actionButton property. When the send button is clicked, it invokes the ChatActionButton.onPressed callback with the text composed in the composer, which rebuilds the Chat widget to add the new message to the conversation area.
The following steps will explain how to enable tooltip and customize the action button.
Step 1: Import the required packages
Add the following dependency to your pubspec.yaml file to install the Syncfusion® Flutter Chat package.
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.
Code snippet:
List<ChatMessage> _messages= [];
@override
void initState() {
super.initState();
_messages = <ChatMessage>[
ChatMessage(
text: 'Hey Johnathan, what’s up?',
time: DateTime.now().subtract(const Duration(days: 1, minutes: 20)),
author: const ChatAuthor(
id: '1011',
name: 'smith',
),
),
ChatMessage(
text: 'Hey Smith, not much. You?',
time: DateTime.now().subtract(const Duration(days: 1, minutes: 18)),
author: const ChatAuthor(
id: '1010',
name: 'Johnathan',
),
),
ChatMessage(
text: 'Same here. Hey, do you feel like catching a movie this weekend?',
time: DateTime.now().subtract(const Duration(days: 1, minutes: 15)),
author: const ChatAuthor(
id: '1011',
name: 'Smith',
),
),
ChatMessage(
text: 'Oh, that sounds fun! What’s playing?',
time: DateTime.now().subtract(const Duration(days: 1, minutes: 13)),
author: const ChatAuthor(
id: '1010',
name: 'Johnathan',
),
),
ChatMessage(
text: 'I was thinking about John wick. Have you seen it yet?',
time: DateTime.now().subtract(const Duration(days: 1, minutes: 09)),
author: const ChatAuthor(
id: '1011',
name: 'smith',
),
),
];
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChat(
outgoingUser: '1010',
messages: _messages,
),
);
}
Output:
Step 3: Customize the action button
To customize the action button in the chat widget, initialize the actionButton property using the ChatActionButton. The child property of the ChatActionButton allows you to create a custom action button. Using the child property, display a row of mic and camera icon buttons when no text is entered in the composer. Once the user enters text, this row of icons is dynamically replaced with a send button.
Code snippet:
Widget _buildActionButton() {
if (_textController.text.isEmpty) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton.filled(
icon: const Icon(Icons.camera_alt_outlined),
onPressed: () {},
),
const SizedBox(width: 8),
IconButton.filled(
icon: const Icon(Icons.mic_none),
onPressed: () {},
),
],
);
} else {
return IconButton.filled(
icon: const Icon(Icons.send),
onPressed: () {
final text = _textController.text;
if (text.isNotEmpty) {
setState(() {
_messages.add(
ChatMessage(
text: text,
time: DateTime.now(),
author: const ChatAuthor(
id: '1010',
name: 'Johnathan',
),
),
);
_textController.clear();
});
}
},
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '1010',
actionButton: ChatActionButton(
backgroundColor: !isTextEntered ? Colors.transparent : null,
hoverColor: !isTextEntered ? Colors.transparent : null,
focusColor: !isTextEntered ? Colors.transparent : null,
splashColor: !isTextEntered ? Colors.transparent : null,
size: isTextEntered ? const Size.square(40) : const Size(110, 40),
tooltip: isTextEntered ? 'Send Button' : null,
child: _buildActionButton(),
onPressed: (String text) {
if (isTextEntered) {
setState(() {
_messages.add(
ChatMessage(
text: _textController.text,
time: DateTime.now(),
author: const ChatAuthor(
id: '1010',
name: 'Johnathan',
),
),
);
_textController.clear();
});
}
},
),
),
);
}
Output:
Step 4: Add tooltip to the action button
To add a tooltip to the action button, use the tooltip property in the ChatActionButton . Assign a string value to the tooltip property to specify the text that should appear when the actionButton is hovered. This provides users with additional context regarding the functionality of the action button.
Code snippet:
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '1010',
actionButton: ChatActionButton(
tooltip: _textController.text.isNotEmpty ? 'Send Button' : '',
onPressed: (String text) {
if (isTextEntered) {
setState(() {
_messages.add(
ChatMessage(
text: _textController.text,
time: DateTime.now(),
author: const ChatAuthor(
id: '1010',
name: 'Johnathan',
),
),
);
_textController.clear();
});
}
},
child: _buildActionButton(),
),
),
);
}
Output:
We have created the action button customization sample by following these steps. You can view the complete implementation in our GitHub repository.
Conclusion
I hope you enjoyed learning about how to enable tooltips and customize the action button in the SfChat widget.
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!
