Deven Joshi
140 lines
3.7 KiB
Plaintext
140 lines
3.7 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.
|
|
|
|
### 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(
|
|
...
|
|
this.showUsername = true,
|
|
this.showTimestamp = true,
|
|
this.showReactions = true,
|
|
this.showDeleteMessage = true,
|
|
this.showEditMessage = true,
|
|
this.showReplyMessage = true,
|
|
this.showThreadReplyMessage = true,
|
|
this.showResendMessage = true,
|
|
this.showCopyMessage = true,
|
|
this.showFlagButton = true,
|
|
this.showPinButton = true,
|
|
this.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));
|
|
}
|
|
},
|
|
);
|
|
},
|
|
),
|
|
```
|
|
|
|
|