From b279b840a8f5ced77d041f307a4363b2c4f39203 Mon Sep 17 00:00:00 2001
From: Deven Joshi <deven9852@gmail.com>
Date: Wed, 25 Aug 2021 19:00:49 +0530
Subject: [PATCH] added new guide

---
 .../guides/customize_message_widget.mdx       | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 docusaurus/docs/Flutter/guides/customize_message_widget.mdx

diff --git a/docusaurus/docs/Flutter/guides/customize_message_widget.mdx b/docusaurus/docs/Flutter/guides/customize_message_widget.mdx
new file mode 100644
index 00000000..96e1e37c
--- /dev/null
+++ b/docusaurus/docs/Flutter/guides/customize_message_widget.mdx
@@ -0,0 +1,62 @@
+---
+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.
+
+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.
+