Action Button in Flutter Chat (SfChat)
19 May 202524 minutes to read
This section explains how to add and customize the action button using the various available options.
Action button
The actionButton represents the send button and is not included in the chat by default. To add it, 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 default composer (text field), which rebuilds the Chat widget to add the new message to the conversation area.
If the ChatComposer.builder is used, the onPressed parameter will always receive an empty string. When the onPressed property of ChatActionButton is set to null, the action button remains disabled. Additionally, if the default composer is disabled, the action button will also be disabled. However, if no composer is added by setting the composer property to null, the action button will always remain enabled.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 100),
child: SfChat(
messages: <ChatMessage>[
ChatMessage(
text: 'Hi!',
time: DateTime(2024, 08, 07, 9, 0),
author: const ChatAuthor(
id: '123-001',
name: 'John Doe',
),
),
ChatMessage(
text: 'Hello! How’s it going?',
time: DateTime(2024, 08, 07, 9, 5),
author: const ChatAuthor(
id: '123-002',
name: 'Jane Smith',
),
),
],
outgoingUser: '123-001',
actionButton: ChatActionButton(
onPressed: (String newMessage) {
setState(() {
_messages.add(
ChatMessage(
text: newMessage,
time: DateTime.now(),
author: const ChatAuthor(
id: '123-001',
name: 'John Doe',
),
),
);
});
},
),
),
),
);
}
Child
The child property allows you to specify one or more interactive widgets as the content of an action button. This is useful for adding a microphone icon for voice input, attaching files to share documents or images, and more.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 100),
child: SfChat(
messages: <ChatMessage>[
ChatMessage(
text: 'Hi!',
time: DateTime(2024, 08, 07, 9, 0),
author: const ChatAuthor(
id: '123-001',
name: 'John Doe',
),
),
ChatMessage(
text: 'Hello! How’s it going?',
time: DateTime(2024, 08, 07, 9, 5),
author: const ChatAuthor(
id: '123-002',
name: 'Jane Smith',
),
),
],
outgoingUser: '123-001',
actionButton: ChatActionButton(
child: const Icon(Icons.chat, color: Colors.grey, size: 25),
onPressed: (String newMessage) {
// Handle the send button click action here.
},
),
),
),
);
}
onPressed callback
It is a callback that is invoked whenever the action button is pressed. Since the chat widget does not rebuild itself to update the newly composed message, it provides the default text from the composer as a parameter. The user can create a message object and include it in the existing messages list by rebuilding the chat widget to add the newly composed message to the conversational area.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001,
actionButton: ChatActionButton(
onPressed: (String newMessage) {
setState(() {
_messages.add(
ChatMessage(
text: newMessage,
time: DateTime.now(),
author: const ChatAuthor(
id: '123-001',
name: 'John Doe',
),
),
);
});
},
),
),
);
}Tooltip
The tooltip text describes the button’s action when pressed. It is displayed when the user long-presses on touch devices or hovers the mouse over it on desktop devices. By default, it is set to null, so no tooltip is shown.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 100),
child: SfChat(
messages: <ChatMessage>[
ChatMessage(
text: 'Hi!',
time: DateTime(2024, 08, 07, 9, 0),
author: const ChatAuthor(
id: '123-001',
name: 'John Doe',
),
),
ChatMessage(
text: 'Hello! How’s it going?',
time: DateTime(2024, 08, 07, 9, 5),
author: const ChatAuthor(
id: '123-002',
name: 'Jane Smith',
),
),
],
outgoingUser: '123-001',
actionButton: ChatActionButton(
tooltip: 'Send Message',
onPressed: (String newMessage) {
// Handle the send button click action here.
},
),
),
),
);
}
Colors
The foregroundColor property is the color of the default send button icon. The default color is set to colorScheme.onPrimary.
The backgroundColor property is the color of the button’s background. The default color is set to colorScheme.primary.
The focusColor property will replace the background color when the button is in a focused state. The default color is set to colorScheme.primary.withOpacity(0.86).
The hoverColor property color will replace the background color when a pointer is hovering over the button. The default color is set to colorScheme.primary.withOpacity(0.91).
The splashColor property is the splash color of the button’s InkWell. The default color is set to colorScheme.primary.withOpacity(0.86).
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001,
actionButton: ChatActionButton(
foregroundColor: Colors.white,
backgroundColor: Colors.blue,
focusColor: Colors.lightBlueAccent,
hoverColor: Colors.blueAccent,
splashColor: Colors.white.withOpacity(0.3),
onPressed: (String newMessage) {
// Handle the send button click action here.
},
),
),
);
}Elevation
The elevation property is the size of the shadow below the action button in normal state. Defaults to 0.0.
The focusElevation property defines the elevation of the button when it has focus. Defaults to 0.0.
The hoverElevation property sets the elevation of the button when it is hovered over. Defaults to 0.0.
The highlightElevation property determines the elevation when the button is pressed. Defaults to 0.0.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001,
actionButton: ChatActionButton(
elevation: 2.0,
focusElevation: 6.0,
hoverElevation: 4.0,
highlightElevation: 8.0,
onPressed: (String newMessage) {
// Handle the send button click action here.
},
),
),
);
}Mouse cursor
The mouseCursor property defines the type of cursor that appears when hovering over the button. It can be set to different values to customize the cursor shape (e.g., SystemMouseCursors.click, SystemMouseCursors.forbidden, etc.). If not specified, the default cursor will be used.
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChat(
messages: <ChatMessage>[
ChatMessage(
text: 'Hi!',
time: DateTime(2024, 08, 07, 9, 0),
author: const ChatAuthor(
id: '123-001',
name: 'John Doe',
),
),
ChatMessage(
text: 'Hello! How’s it going?',
time: DateTime(2024, 08, 07, 9, 5),
author: const ChatAuthor(
id: '123-002',
name: 'Jane Smith',
),
),
],
outgoingUser: '123-001,
actionButton: ChatActionButton(
mouseCursor: SystemMouseCursors.click,
onPressed: (String newMessage) {
// Handle the send button click action here.
},
),
),
);
}
Shape
The shape property sets the shape of the button’s border, such as rounded or circular. By default, it is set to RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))).
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChat(
messages: <ChatMessage>[
ChatMessage(
text: 'Hi!',
time: DateTime(2024, 08, 07, 9, 0),
author: const ChatAuthor(
id: '123-001',
name: 'John Doe',
),
),
ChatMessage(
text: 'Hello! How’s it going?',
time: DateTime(2024, 08, 07, 9, 5),
author: const ChatAuthor(
id: '123-002',
name: 'Jane Smith',
),
),
],
outgoingUser: '123-001,
actionButton: ChatActionButton(
shape: const ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(15),
bottomRight: Radius.circular(30.0),
bottomLeft: Radius.circular(15)
),
),
onPressed: (String newMessage) {
// Handle the send button click action here.
},
),
),
);
}
Margin
The margin property defines the space inside the button between its border and the content. By default, it is set to EdgeInsetsDirectional.only(start: 8.0).
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001,
actionButton: ChatActionButton(
margin: const EdgeInsetsDirectional.only(start: 8.0),
onPressed: (String newMessage) {
// Handle the send button click action here.
},
),
),
);
}Size
The size property specifies the width and height of the button. By default, it is set to Size.square(40.0).
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: _outgoingUserId,
actionButton: ChatActionButton(
size: const Size.square(40.0),
onPressed: (String newMessage) {
// Handle the send button click action here.
},
),
),
);
}You can refer to our Flutter Chat feature tour page for its groundbreaking feature representations. You can also explore our Flutter Chat example which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects.
See Also
- You can also customize the above properties using
SfChatThemeby wrapping withSfChat.