StreamMessageWidget
This commit is contained in:
+12
-12
@@ -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,
|
||||||
)
|
)
|
||||||
Reference in New Issue
Block a user