---
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));
          }
        },
    );
  },
),
```