Parameters |
Type |
Value |
Default |
primaryColor |
Color |
The theme color of the chat widget. |
Papercups blue:
|
primaryGradient |
Gradient |
Gradient to specify, should be used instead of primaryColor . DO NOT USE BOTH!
|
N/A |
backgroundColor |
Color |
Color used in the background of the entire widget. |
Theme.of(context).canvasColor |
titleStyle |
TextStyle |
The text style of the title at the top of the chat widget. |
TextStyle(
color: textColor, // Using computeLuminance
fontSize: 21,
fontWeight: FontWeight.w600,
) |
titleAlign |
TextAlign |
The widget title alignment. |
|
subtitleStyle |
TextStyle |
The chat widget sub title text style. |
TextStyle(
color: props.style.titleStyle?.color?.withOpacity(0.8),
) |
headerHeight |
double |
The chat widget header height. |
N/A |
headerPadding |
EdgeInsetsGeometry |
The chat widget header padding. |
EdgeInsets.only(
top: 16,
right: 20,
left: 20,
bottom: 12,
) |
noConnectionIcon |
Widget |
The widget displayed in the chat when there's no Internet connection. |
Icon(
Icons.wifi_off_rounded,
size: 100,
color: Colors.grey,
) |
noConnectionTextStyle |
TextStyle |
The text style of the text displayed in the chat widget when there's no Internet connection. |
Theme.of(context).textTheme.headlineSmall?.copyWith(color: code.grey) |
requireEmailUpfrontInputDecoration |
InputDecoration |
The input decoration of the require email text field. |
InputDecoration(
border: UnderlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).dividerColor,
width: 0.5,
style: BorderStyle.solid,
),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).dividerColor,
width: 0.5,
style: BorderStyle.solid,
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).dividerColor,
width: 0.5,
style: BorderStyle.solid,
),
),
hintText: widget.props.translations.enterEmailPlaceholder,
hintStyle: widget.props.style.requireEmailUpfrontInputHintStyle,
), |
requireEmailUpfrontKeyboardAppearance |
Brightness |
The keyboard brightness of the require email text field. |
|
requireEmailUpfrontInputHintStyle |
TextStyle |
The text style of the require email text field hint. |
|
requireEmailUpfrontInputTextStyle |
TextStyle |
The text style of the require email text field. |
N/A |
floatingSendMessageBoxDecoration |
BoxDecoration |
The box decoration of the message text field when floatingSendMessage prop is true . |
BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
blurRadius: 10,
color: Theme.of(context).brightness == Brightness.light
? Colors.grey.withOpacity(0.4)
: Colors.black.withOpacity(0.8),
),
],
) |
sendMessageBoxDecoration |
BoxDecoration |
The box decoration of the message text field. |
BoxDecoration(
color: Theme.of(context).cardColor,
border: widget.showDivider
? Border(
top: BorderSide(color: Theme.of(context).dividerColor),
)
: null,
boxShadow: [
BoxShadow(
blurRadius: 30,
color: Theme.of(context).shadowColor.withOpacity(0.1),
)
],
) |
sendMessageKeyboardAppearance |
Brightness |
The keyboard brightness of the send message text field. |
|
sendMessagePlaceholderInputDecoration |
InputDecoration |
The input decoration of the message text field. |
InputDecoration(
border: InputBorder.none,
hintText: widget.props.translations.newMessagePlaceholder,
hintStyle: widget.props.style.sendMessagePlaceholderTextStyle,
) |
sendMessagePlaceholderTextStyle |
TextStyle |
The text style of the message text field input hint text. |
|
sendMessageInputTextStyle |
TextStyle |
The text style of the message text field input. |
N/A |
botBubbleBoxDecoration |
BoxDecoration |
The box decoration of the bot chat bubbles. |
BoxDecoration(
color: Theme.of(context).brightness == Brightness.light
? brighten(Theme.of(context).disabledColor, 80)
: const Color(0xff282828,
),
borderRadius: BorderRadius.circular(4),
) |
botBubbleTextStyle |
TextStyle |
The text style of the bot chat bubbles. |
TextStyle(
color: Theme.of(context).textTheme.bodyLarge?.color,
) |
botAttachmentBoxDecoration |
BoxDecoration |
The box decoration of the bot attachment (images, files) chat bubbles. |
BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Theme.of(context).brightness == Brightness.light
? brighten(Theme.of(context).disabledColor, 70)
: Color(0xff282828,
),
) |
botAttachmentTextStyle |
TextStyle |
The text style of the bot attachments file name. |
TextStyle(
color: Theme.of(context).textTheme.bodyLarge?.color,
) |
botBubbleUsernameTextStyle |
TextStyle |
The text style of bot user name displayed below its chat bubbles. |
TextStyle(
color: Theme.of(context).textTheme.bodyLarge?.color?.withOpacity(0.5),
fontSize: 14,
) |
userBubbleBoxDecoration |
BoxDecoration |
The box decoration of the user chat bubbles. |
BoxDecoration(
color: widget.props.style.primaryColor,
gradient: widget.props.style.primaryGradient,
borderRadius: BorderRadius.circular(4),
) |
userBubbleTextStyle |
TextStyle |
The text style of the user chat bubbles. |
TextStyle(color: widget.textColor)
Depending on the luminance of the provided primaryColor , textColor can be either Colors.black or Colors.white .
|
userAttachmentBoxDecoration |
BoxDecoration |
The box decoration of the user attachment (images, files) chat bubbles. |
BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: darken(widget.props.style.primaryColor!, 20),
) |
userAttachmentTextStyle |
TextStyle |
The text style of the user attachments file name. |
TextStyle(color: widget.textColor)
Depending on the luminance of the provided primaryColor , textColor can be either Colors.black or Colors.white .
|
userBubbleSentAtTextStyle |
TextStyle |
The text style of the "Sent x ago" (or "Sending...") text displayed below the latest user chat bubble. |
TextStyle(color: Colors.grey) |
chatBubbleTimeTextStyle |
TextStyle |
The text style of the time stamp displayed (on tap) next to the any chat bubble. |
TextStyle(
color: Theme.of(context).textTheme.bodyLarge?.color?.withAlpha(100),
fontSize: 10,
) |
chatBubbleFullDateTextStyle |
TextStyle |
The text style of the date displayed centered in the chat before the chat bubbles of a given day. |
TextStyle(color: Colors.grey) |
chatUploadingAlertTextStyle |
TextStyle |
The text style of the alert shown when an attachment is being uploaded. |
Theme.of(context).textTheme.bodyMedium |
chatUploadingAlertBackgroundColor |
Color |
The background color of the alert shown when an attachment is being uploaded. |
BottomAppBarTheme.of(context).color! |
chatUploadErrorAlertTextStyle |
TextStyle |
The text style of the error alert shown when an attachment failed to upload. |
Theme.of(context).textTheme.bodyMedium |
chatUploadErrorAlertBackgroundColor |
Color |
The background color of the error alert shown when an attachment failed to upload. |
BottomAppBarTheme.of(context).color! |
chatNoConnectionAlertTextStyle |
TextStyle |
The text style of the alert shown when the chat is displayed but no Internet connection is available. |
Theme.of(context).textTheme.bodyMedium |
chatNoConnectionAlertBackgroundColor |
Color |
The background color of the alert shown when the chat is displayed but no Internet connection is available. |
BottomAppBarTheme.of(context).color! |
chatCopiedTextAlertTextStyle |
TextStyle |
The text style of the alert shown when a chat bubble gets long pressed and its text copied. |
Theme.of(context).textTheme.bodyMedium |
chatCopiedTextAlertBackgroundColor |
Color |
The background color of the alert shown when a chat bubble gets long pressed and its text copied. |
BottomAppBarTheme.of(context).color! |