StreamMessageWidget

This commit is contained in:
Salvatore Giordano
2022-04-29 09:45:33 +02:00
parent 94c4db0c80
commit d1e7a7a7b8
@@ -1,25 +1,25 @@
--- ---
id: message_widget id: stream_message_widget
sidebar_position: 11 sidebar_position: 11
title: MessageWidget title: StreamMessageWidget
--- ---
A Widget For Displaying Messages And Attachments A Widget For Displaying Messages And Attachments
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/MessageWidget-class.html) Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamMessageWidget-class.html)
### Background ### Background
There are several things that need to be displayed with text in a message in a modern messaging app: There are several things that need to be displayed with text in a message in a modern messaging app:
attachments, highlights if the message is pinned, user avatars of the sender, etc. attachments, highlights if the message is pinned, user avatars of the sender, etc.
To encapsulate all of this functionality into one widget, the Flutter SDK contains a `MessageWidget` To encapsulate all of this functionality into one widget, the Flutter SDK contains a `StreamMessageWidget`
widget which provides these out of the box. widget which provides these out of the box.
### Basic Example (Modifying `MessageWidget` in `MessageListView`) ### Basic Example (Modifying `StreamMessageWidget` in `StreamMessageListView`)
Primarily, the `MessageWidget` is used in the `MessageListView`. To customize only a few properties Primarily, the `StreamMessageWidget` is used in the `StreamMessageListView`. To customize only a few properties
of the `MessageWidget` without supplying all other properties, the `messageBuilder` builder supplies of the `StreamMessageWidget` without supplying all other properties, the `messageBuilder` builder supplies
a default implementation of the widget for us to modify. a default implementation of the widget for us to modify.
```dart ```dart
@@ -31,7 +31,7 @@ class ChannelPage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
body: MessageListView( body: StreamMessageListView(
messageBuilder: (context, details, messageList, defaultMessageWidget) { messageBuilder: (context, details, messageList, defaultMessageWidget) {
return defaultMessageWidget.copyWith( return defaultMessageWidget.copyWith(
showThreadReplyIndicator: false, showThreadReplyIndicator: false,
@@ -52,7 +52,7 @@ how to build it. For this purpose, we can use the `customAttachmentBuilders` par
As an example, if a message has a attachment type 'location', we do: As an example, if a message has a attachment type 'location', we do:
```dart ```dart
MessageWidget( StreamMessageWidget(
//... //...
customAttachmentBuilders: { customAttachmentBuilders: {
'location': (context, message, attachments) { 'location': (context, message, attachments) {
@@ -77,7 +77,7 @@ You can decide to show, hide, or remove user avatars of the sender of the messag
the `showUserAvatar` property like this: the `showUserAvatar` property like this:
```dart ```dart
MessageWidget( StreamMessageWidget(
//... //...
showUserAvatar = DisplayWidget.show, showUserAvatar = DisplayWidget.show,
) )
@@ -85,13 +85,13 @@ MessageWidget(
### Reverse the message ### Reverse the message
In most cases, `MessageWidget` needs to be a different orientation depending upon if the sender is the In most cases, `StreamMessageWidget` needs to be a different orientation depending upon if the sender is the
user or someone else. user or someone else.
For this, we use the `reverse` parameter to change the orientation of the message: For this, we use the `reverse` parameter to change the orientation of the message:
```dart ```dart
MessageWidget( StreamMessageWidget(
//... //...
reverse = true, reverse = true,
) )