This commit is contained in:
Ayush Shekhar
2022-04-28 16:03:20 +05:30
2 changed files with 15 additions and 38 deletions
@@ -1,30 +1,30 @@
---
id: message_list_view
id: stream_message_list_view
sidebar_position: 5
title: MessageListView
title: StreamMessageListView
---
A Widget For Displaying A List Of Messages
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/MessageListView-class.html)
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamMessageListView-class.html)
![](../assets/message_list_view.png)
### Background
Every channel can contain a list of messages sent by users inside it. The `MessageListView` widget
Every channel can contain a list of messages sent by users inside it. The `StreamMessageListView` widget
displays the list of messages inside a particular channel along with possible attachments and
other message attributes (if the message is pinned for example). This sets it apart from the `MessageSearchListView`
other message attributes (if the message is pinned for example). This sets it apart from the `StreamMessageSearchListView`
which may not contain messages only from a single channel and is used to search for messages across
many.
### Basic Example
The `MessageListView` shows the list of messages of the current channel. It has inbuilt support for
The `StreamMessageListView` shows the list of messages of the current channel. It has inbuilt support for
common messaging functionality: displaying and editing messages, adding / modifying reactions, support
for quoting messages, pinning messages, and more.
An example of how you can use the MessageListView is:
An example of how you can use the `StreamMessageListView` is:
```dart
class ChannelPage extends StatelessWidget {
@@ -35,19 +35,13 @@ class ChannelPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: ChannelHeader(),
appBar: StreamChannelHeader(),
body: Column(
children: <Widget>[
Expanded(
child: MessageListView(
threadBuilder: (_, parentMessage) {
return ThreadPage(
parent: parentMessage,
);
},
),
child: StreamMessageListView(),
),
MessageInput(),
StreamMessageInput(),
],
),
);
@@ -61,7 +55,7 @@ Threads are made of a parent message and replies linked to it. To enable threadi
to supply a `threadBuilder` which will supply the page when the thread is clicked.
```dart
MessageListView(
StreamMessageListView(
threadBuilder: (_, parentMessage) {
return ThreadPage(
parent: parentMessage,
@@ -72,10 +66,10 @@ MessageListView(
![](../assets/message_list_view_threads.png)
The `MessageListView` itself can render the thread by supplying the `parentMessage` parameter.
The `StreamMessageListView` itself can render the thread by supplying the `parentMessage` parameter.
```dart
MessageListView(
StreamMessageListView(
parentMessage: parent,
),
```
@@ -85,31 +79,14 @@ MessageListView(
You can also supply your own implementation for displaying messages using the `messageBuilder` parameter.
:::note
To customize the existing implementation, look at the `MessageWidget` documentation instead.
To customize the existing implementation, look at the `StreamMessageWidget` documentation instead.
:::
```dart
MessageListView(
StreamMessageListView(
messageBuilder: (context, details, messageList, defaultImpl) {
// Your implementation of the message here
// E.g: return Text(details.message.text ?? '');
},
),
```
### Enabling Message Pinning
Message pins save and highlight the message in the `MessageListView`. To enable users to pin the message,
make sure the pin permissions are granted for different types of users on the dashboard. After confirming
the appropriate users have permissions, add the user types in the `pinPermissions` parameter.
```dart
MessageListView(
//...
pinPermissions: ['admin', 'userType1', 'userType2'],
),
```
This will allow these user types to pin messages through the message actions modal.
![](../assets/message_list_view_pin.png)