Theme in Flutter Chat (SfChatTheme)
19 May 202524 minutes to read
This section explains the customization properties available in ChatThemeData.
Import the Chat library
Import the following library to use the chat theme data:
import 'package:syncfusion_flutter_core/theme.dart';Action button foreground color
The actionButtonForegroundColor property is used to specify the color for the default action button icon.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonForegroundColor: Colors.white,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button background color
The actionButtonBackgroundColor property is used to specify the background color for the action button in its default state.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonBackgroundColor: Colors.blueAccent,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button focus color
The actionButtonFocusColor property is used to specify the background color for the action button when it is in the focused state.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonFocusColor: Colors.blue,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button hover color
The actionButtonHoverColor property is used to specify the background color for the action button when it is hovered over.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonHoverColor: Colors.blueGrey,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button splash color
The actionButtonSplashColor property is used to specify the color of the ripple effect when the action button is tapped.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonSplashColor: Colors.lightBlueAccent,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button disabled foreground color
The actionButtonDisabledForegroundColor property is used to specify the color of the text or icon on the action button when it is disabled.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonDisabledForegroundColor: Colors.grey,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button disabled background color
The actionButtonDisabledBackgroundColor property is used to specify the background color of the action button when it is disabled.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonDisabledBackgroundColor: Colors.grey[300],
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button elevation
The actionButtonElevation property is used to specify the elevation of the action button in its default state.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonElevation: 4.0,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button focus elevation
The actionButtonFocusElevation property is used to specify the elevation of the action button when it is focused.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonFocusElevation: 6.0,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button hover elevation
The actionButtonHoverElevation property is used to specify the elevation of the action button when it is hovered over.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonHoverElevation: 8.0,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button highlight elevation
The actionButtonHighlightElevation property is used to specify the elevation of the action button when it is highlighted.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonHighlightElevation: 12.0,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button disabled elevation
The actionButtonDisabledElevation property is used to specify the elevation of the action button when it is disabled.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonDisabledElevation: 0.0,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button mouse cursor
The actionButtonMouseCursor property is used to specify the type of cursor displayed when hovering over the action button.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonMouseCursor: SystemMouseCursors.click,
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Action button shape
The actionButtonShape property is used to specify the shape and border radius of the action button.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
actionButtonShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0),
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Outgoing avatar background color
The outgoingAvatarBackgroundColor property is used to specify the background color of outgoing message avatar.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
outgoingAvatarBackgroundColor: Colors.green[200],
),
child: Scaffold(
body: SfChat(
messages: _messages,
),
),
);
}Incoming avatar background color
The incomingAvatarBackgroundColor property is used to specify the background color of incoming message avatar.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
incomingAvatarBackgroundColor: Colors.blue[200],
),
child: Scaffold(
body: SfChat(
messages: _messages,
),
),
);
}Outgoing message background color
The outgoingMessageBackgroundColor property is used to specify the background color of bubbles containing outgoing messages.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
outgoingMessageBackgroundColor: Colors.green[100],
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Incoming message background color
The incomingMessageBackgroundColor property is used to specify the background color of bubbles containing incoming messages.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
incomingMessageBackgroundColor: Colors.blue[100],
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Editor text style
The editorTextStyle property is used to specify the style for text in the message editor.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
editorTextStyle: const TextStyle(
color: Colors.black,
fontSize: 16.0,
fontWeight: FontWeight.normal,
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Outgoing content text style
The outgoingContentTextStyle property is used to specify the style for text in outgoing message bubbles.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
outgoingContentTextStyle: const TextStyle(
color: Colors.black87,
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Incoming content text style
The incomingContentTextStyle property is used to specify the style for text in incoming message bubbles.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
incomingContentTextStyle: const TextStyle(
color: Colors.black,
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Outgoing primary header text style
The outgoingPrimaryHeaderTextStyle property is used to specify the style for the primary header text in outgoing message bubbles.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
outgoingPrimaryHeaderTextStyle: const TextStyle(
color: Colors.black,
fontSize: 12.0,
fontWeight: FontWeight.bold,
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Incoming primary header text style
The incomingPrimaryHeaderTextStyle property is used to specify the style for the primary header text in incoming message bubbles.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
incomingPrimaryHeaderTextStyle: const TextStyle(
color: Colors.black,
fontSize: 12.0,
fontWeight: FontWeight.bold,
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Outgoing secondary header text style
The outgoingSecondaryHeaderTextStyle property is used to specify the style for the secondary header text in outgoing message bubbles.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
outgoingSecondaryHeaderTextStyle: const TextStyle(
color: Colors.grey,
fontSize: 12.0,
fontStyle: FontStyle.italic,
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Incoming secondary header text style
The incomingSecondaryHeaderTextStyle property is used to specify the style for the secondary header text in incoming message bubbles.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
incomingSecondaryHeaderTextStyle: const TextStyle(
color: Colors.grey,
fontSize: 12.0,
fontStyle: FontStyle.normal,
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Suggestion item text style
The suggestionItemTextStyle property is used to specify the text style for both outgoing and incoming message suggestion items.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
suggestionItemTextStyle: WidgetStateProperty.resolveWith(
(Set<WidgetState> state) {
if (state.contains(WidgetState.selected)) {
return const TextStyle(
color: Colors.blue,
fontSize: 16.0,
fontWeight: FontWeight.bold);
} else if (state.contains(WidgetState.focused)) {
return const TextStyle(
color: Colors.blueGrey,
fontSize: 16.0,
fontWeight: FontWeight.bold);
} else if (state.contains(WidgetState.hovered)) {
return const TextStyle(
color: Colors.lightBlueAccent,
fontSize: 16.0,
fontWeight: FontWeight.bold);
} else if (state.contains(WidgetState.disabled)) {
return const TextStyle(
color: Colors.grey,
fontSize: 16.0,
fontWeight: FontWeight.bold);
}
return const TextStyle(
color: Colors.black,
fontSize: 16.0,
fontWeight: FontWeight.bold);
},
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
),
),
);
}Outgoing message shape
The outgoingMessageShape property is used to specify the shape and border radius of outgoing message bubbles.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
outgoingMessageContentShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Incoming message shape
The incomingMessageShape property is used to specify the shape and border radius of incoming message content.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
incomingMessageContentShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
outgoingUser: '123-001',
),
),
);
}Suggestion background color
The suggestionBackgroundColor property is used to specify the background color of both outgoing and incoming message suggestion bubble.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
suggestionBackgroundColor: Colors.lightBlue[50],
),
child: Scaffold(
body: SfChat(
messages: _messages,
),
),
);
}Suggestion background shape
The suggestionBackgroundShape property is used to specify the background shape of both outgoing and incoming message suggestion bubble.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
suggestionBackgroundShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
),
),
);
}Suggestion item background color
The suggestionItemBackgroundColor property is used to specify the background color for both outgoing and incoming message suggestion items.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
suggestionItemBackgroundColor: WidgetStateProperty.resolveWith(
(Set<WidgetState> state) {
if (state.contains(WidgetState.selected)) {
return Colors.blue;
} else if (state.contains(WidgetState.focused)) {
return Colors.blueGrey;
} else if (state.contains(WidgetState.hovered)) {
return Colors.lightBlueAccent;
} else if (state.contains(WidgetState.disabled)) {
return Colors.grey[300];
}
return Colors.white;
},
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
),
),
);
}Suggestion item shape
The suggestionItemShape property is used to specify the shape for both outgoing and incoming message suggestion items.
// Load if there are existing messages.
final List<ChatMessage> _messages = <ChatMessage>[];
@override
Widget build(BuildContext context) {
return SfChatTheme(
data: const SfChatThemeData(
suggestionItemShape: WidgetStateProperty.resolveWith(
(Set<WidgetState> state) {
if (state.contains(WidgetState.selected)) {
return RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
);
} else if (state.contains(WidgetState.focused)) {
return RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
);
} else if (state.contains(WidgetState.hovered)) {
return RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6.0),
);
} else if (state.contains(WidgetState.disabled)) {
return RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0),
);
}
return RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
);
},
),
),
child: Scaffold(
body: SfChat(
messages: _messages,
),
),
);
}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.