183 lines
5.1 KiB
Plaintext
183 lines
5.1 KiB
Plaintext
---
|
|
id: customize_message_widget
|
|
sidebar_position: 11
|
|
title: Customizing The MessageWidget
|
|
---
|
|
|
|
Customizing Text Messages
|
|
|
|
### Introduction
|
|
|
|
Every application provides a unique look and feel to their own messaging interface including and not
|
|
limited to fonts, colors, and shapes.
|
|
|
|
This guide details how to customize the `MessageWidget` in the Stream Chat Flutter UI SDK.
|
|
|
|
### Building Custom Messages
|
|
|
|
This guide goes into detail about the ability to customize the `MessageWidget`. However, if you want
|
|
to customize the default `MessageWidget` in the `MessageListView` provided, you can use the `.copyWith()` method
|
|
provided inside the `messageBuilder` parameter of the `MessageListView` like this:
|
|
|
|
```dart
|
|
MessageListView(
|
|
messageBuilder: (context, details, messageList, defaultImpl) {
|
|
// Your implementation of the message here
|
|
// E.g: return Text(details.message.text ?? '');
|
|
},
|
|
),
|
|
```
|
|
|
|
### Theming
|
|
|
|
You can customize the `MessageWidget` using the `StreamChatTheme` class, so that you can change the
|
|
message theme at the top instead of creating your own `MessageWidget` at the lower implementation level.
|
|
|
|
There are several things you can change in the theme including text styles and colors of various elements.
|
|
|
|
You can also set a different theme for the user's own messages and messages received by them.
|
|
|
|
:::note
|
|
Theming allows you to change minor factors like style while using the widget directly allows you much
|
|
more customization such as replacing a certain widget with another. Some things can only be customized
|
|
through the widget and not the theme.
|
|
:::
|
|
|
|
Here is an example:
|
|
|
|
```dart
|
|
StreamChatThemeData(
|
|
|
|
/// Sets theme for user's messages
|
|
ownMessageTheme: MessageThemeData(
|
|
messageBackgroundColor: colorTheme.textHighEmphasis,
|
|
),
|
|
|
|
/// Sets theme for received messages
|
|
otherMessageTheme: MessageThemeData(
|
|
avatarTheme: AvatarThemeData(
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
|
|
)
|
|
```
|
|
|
|
|
|
|
|
#### Change message text style
|
|
|
|
The `MessageWidget` has multiple `Text` widgets that you can manipulate the styles of. The three main
|
|
are the actual message text, user name, message links, and the message timestamp.
|
|
|
|
```dart
|
|
MessageThemeData(
|
|
messageTextStyle: TextStyle(...),
|
|
createdAtStyle: TextStyle(...),
|
|
messageAuthorStyle: TextStyle(...),
|
|
messageLinksStyle: TextStyle(...),
|
|
)
|
|
```
|
|
|
|
|
|
|
|
#### Change avatar theme
|
|
|
|
You can change the attributes of the avatar (if displayed) using the `avatarTheme` property.
|
|
|
|
```dart
|
|
MessageThemeData(
|
|
avatarTheme: AvatarThemeData(
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
)
|
|
```
|
|
|
|
|
|
|
|
#### Changing Reaction theme
|
|
|
|
You also customize the reactions attached to every message using the theme.
|
|
|
|
```dart
|
|
MessageThemeData(
|
|
reactionsBackgroundColor: Colors.red,
|
|
reactionsBorderColor: Colors.redAccent,
|
|
reactionsMaskColor: Colors.pink,
|
|
),
|
|
```
|
|
|
|
|
|
|
|
### Changing Message Actions
|
|
|
|
When a message is long pressed, the `MessageActionsModal` is shown.
|
|
|
|
The `MessageWidget` allows showing or hiding some options if you so choose.
|
|
|
|
```dart
|
|
MessageWidget(
|
|
...
|
|
showUsername = true,
|
|
showTimestamp = true,
|
|
showReactions = true,
|
|
showDeleteMessage = true,
|
|
showEditMessage = true,
|
|
showReplyMessage = true,
|
|
showThreadReplyMessage = true,
|
|
showResendMessage = true,
|
|
showCopyMessage = true,
|
|
showFlagButton = true,
|
|
showPinButton = true,
|
|
showPinHighlight = true,
|
|
),
|
|
```
|
|
|
|
|
|
|
|
### Building attachments
|
|
|
|
The `customAttachmentBuilder` property allows you to build any kind of attachment (inbuilt or custom)
|
|
in your own way. While a separate guide is written for this, it is included here because of relevance.
|
|
|
|
```dart
|
|
MessageListView(
|
|
messageBuilder: (context, details, messages, defaultMessage) {
|
|
return defaultMessage.copyWith(
|
|
customAttachmentBuilders: {
|
|
'location': (context, message, attachments) {
|
|
final attachmentWidget = Image.network(
|
|
_buildMapAttachment(
|
|
attachments[0].extraData['latitude'],
|
|
attachments[0].extraData['longitude'],
|
|
),
|
|
);
|
|
|
|
return wrapAttachmentWidget(context, attachmentWidget, null, true, BorderRadius.circular(8.0));
|
|
}
|
|
},
|
|
);
|
|
},
|
|
),
|
|
```
|
|
|
|
### Widget Builders
|
|
|
|
Some parameters allow you to construct your own widget in place of some elements in the `MessageWidget`.
|
|
|
|
These are:
|
|
* `userAvatarBuilder` : Allows user to substitute their own widget in place of the user avatar.
|
|
* `editMessageInputBuilder` : Allows user to substitute their own widget in place of the input in edit mode.
|
|
* `textBuilder` : Allows user to substitute their own widget in place of the text.
|
|
* `bottomRowBuilder` : Allows user to substitute their own widget in the bottom of the message when not deleted.
|
|
* `deletedBottomRowBuilder` : Allows user to substitute their own widget in the bottom of the message when deleted.
|
|
|
|
```dart
|
|
MessageWidget(
|
|
...
|
|
textBuilder: (context, message) {
|
|
// Add your own text implementation here.
|
|
},
|
|
),
|
|
```
|