versioning docs
This commit is contained in:
Salvatore Giordano
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Stream Chat Flutter",
|
||||
"position": 3
|
||||
}
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: channel_header
|
||||
sidebar_position: 10
|
||||
title: ChannelHeader
|
||||
---
|
||||
|
||||
A Widget To Display Common Channel Details
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelHeader-class.html)
|
||||
|
||||
|
||||
|
||||
### Background
|
||||
|
||||
When a user opens a channel, it is helpful to provide context of which channel they are in. This may
|
||||
be in the form of a channel name or the users in the channel. Along with that, there also needs to be
|
||||
a way for the user to look at more details of the channel (media, pinned messages, actions, etc.) and
|
||||
preferably also a way to navigate back to where they came from.
|
||||
|
||||
To encapsulate all of this functionality into one widget, the Flutter SDK contains a `ChannelHeader`
|
||||
widget which provides these out of the box.
|
||||
|
||||
### Basic Example
|
||||
|
||||
Let's just add a `ChannelHeader` to a page with a `MessageListView` and a `MessageInput` to display
|
||||
and send messages.
|
||||
|
||||
```dart
|
||||
class ChannelPage extends StatelessWidget {
|
||||
const ChannelPage({
|
||||
Key? key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: ChannelHeader(),
|
||||
body: Column(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: MessageListView(
|
||||
threadBuilder: (_, parentMessage) {
|
||||
return ThreadPage(
|
||||
parent: parentMessage,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
MessageInput(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Customizing Parts Of The Header
|
||||
|
||||
The header works like a `ListTile` widget.
|
||||
|
||||
Use the `title`, `subtitle`, `leading`, or `actions` parameters to substitute the widgets for your own.
|
||||
|
||||
```dart
|
||||
//...
|
||||
ChannelHeader(
|
||||
title: Text('My Custom Name'),
|
||||
),
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Showing Connection State
|
||||
|
||||
The `ChannelHeader` can also display connection state below the tile which shows the user if they
|
||||
are connected or offline, etc. on connection events.
|
||||
|
||||
To enable this, use the `showConnectionStateTile` property.
|
||||
|
||||
```dart
|
||||
//...
|
||||
ChannelHeader(
|
||||
showConnectionStateTile: true,
|
||||
),
|
||||
```
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: channel_list_header
|
||||
sidebar_position: 9
|
||||
title: ChannelListHeader
|
||||
---
|
||||
|
||||
A Header Widget For A List Of Channels
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelListHeader-class.html)
|
||||
|
||||
|
||||
|
||||
### Background
|
||||
|
||||
A common pattern for most messaging apps is to show a list of Channels (chats) on the first screen
|
||||
and navigate to an individual one on being clicked. On this first page where the list of channels are
|
||||
displayed, it is usual to have functionality such as adding a new chat, display the user logged in, etc.
|
||||
|
||||
To encapsulate all of this functionality into one widget, the Flutter SDK contains a `ChannelListHeader`
|
||||
widget which provides these out of the box.
|
||||
|
||||
### Basic Example
|
||||
|
||||
This is a basic example of a page which has a `ChannelListView` and a `ChannelListHeader` to recreate a
|
||||
common Channels Page.
|
||||
|
||||
```dart
|
||||
class DemoPage extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: ChannelListHeader(),
|
||||
body: ChannelsBloc(
|
||||
child: ChannelListView(
|
||||
filter: Filter.in_('members', [StreamChat.of(context).user.id]),
|
||||
sort: [SortOption('last_message_at')],
|
||||
pagination: PaginationParams(
|
||||
limit: 20,
|
||||
),
|
||||
channelWidget: ChannelPage(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Customizing Parts Of The Header
|
||||
|
||||
The header works like a `ListTile` widget.
|
||||
|
||||
Use the `titleBuilder`, `subtitle`, `leading`, or `actions` parameters to substitute the widgets for your own.
|
||||
|
||||
```dart
|
||||
//...
|
||||
ChannelListHeader(
|
||||
subtitle: Text('My Custom Subtitle'),
|
||||
),
|
||||
```
|
||||
|
||||
|
||||
|
||||
The `titleBuilder` param helps you build different titles depending on the connection state:
|
||||
|
||||
```dart
|
||||
//...
|
||||
ChannelListHeader(
|
||||
titleBuilder: (context, status, client) {
|
||||
switch(status) {
|
||||
/// Return your title widget
|
||||
}
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
### Showing Connection State
|
||||
|
||||
The `ChannelListHeader` can also display connection state below the tile which shows the user if they
|
||||
are connected or offline, etc. on connection events.
|
||||
|
||||
To enable this, use the `showConnectionStateTile` property.
|
||||
|
||||
```dart
|
||||
//...
|
||||
ChannelListHeader(
|
||||
showConnectionStateTile: true,
|
||||
),
|
||||
```
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: channel_list_view
|
||||
sidebar_position: 4
|
||||
title: ChannelListView
|
||||
---
|
||||
|
||||
A Widget For Displaying A List Of Channels
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelListView-class.html)
|
||||
|
||||
|
||||
|
||||
### Background
|
||||
|
||||
Channels are fundamental elements of Stream Chat and constitute shared spaces which allow users to
|
||||
message each other.
|
||||
|
||||
1:1 conversations and groups are both examples of channels, albeit with some (distinct/non-distinct)
|
||||
differences. Displaying the list of channels that a user is a part of is a pattern present in most messaging apps.
|
||||
|
||||
The `ChannelListView` widget allows displaying a list of channels to a user. By default, this is NOT
|
||||
ONLY the channels that the user is a part of. This section goes into setting up and using a `ChannelListView`
|
||||
widget.
|
||||
|
||||
### Basic Example
|
||||
|
||||
Here is a basic example of the `ChannelListView` widget. It consists of the main widget itself, a `Filter`
|
||||
to filter only the channels that the user is a part of, sorting by last message time, pagination params,
|
||||
and the widget to use when a particular channel is clicked.
|
||||
|
||||
```dart
|
||||
class ChannelListPage extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: ChannelsBloc(
|
||||
child: ChannelListView(
|
||||
filter: Filter.in_('members', [StreamChat.of(context).user.id]),
|
||||
sort: [SortOption('last_message_at')],
|
||||
pagination: PaginationParams(
|
||||
limit: 20,
|
||||
),
|
||||
channelWidget: ChannelPage(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This example by default displays the channels that a user is a part of. Now let's look at customizing
|
||||
the widget.
|
||||
|
||||
### Customizing the Channel Preview
|
||||
|
||||
A common aspect of the widget needed to be tweaked according to each app is the Channel Preview (the
|
||||
Channel tile in the list). To do this, we use the `channelPreviewBuilder` param like this:
|
||||
|
||||
```dart
|
||||
ChannelListView(
|
||||
...
|
||||
channelPreviewBuilder: (context, channel) {
|
||||
return ListTile(
|
||||
tileColor: Colors.amberAccent,
|
||||
title: Center(
|
||||
child: ChannelName(),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
Which gives you a new Channel preview in the list:
|
||||
|
||||
|
||||
|
||||
### Adding Swipe Actions
|
||||
|
||||
To add actions (such as delete, more info, etc) when Channel preview is swiped left, set the `swipeToAction`
|
||||
parameter to `true`.
|
||||
|
||||
```dart
|
||||
ChannelListView(
|
||||
...
|
||||
swipeToAction: true,
|
||||
),
|
||||
```
|
||||
|
||||
This adds two basic actions - info and delete:
|
||||
|
||||
|
||||
|
||||
To add custom actions of your own, use the `swipeActions` param:
|
||||
|
||||
```dart
|
||||
ChannelListView(
|
||||
...
|
||||
swipeToAction: true,
|
||||
swipeActions: [
|
||||
SwipeAction(
|
||||
color: Colors.blue,
|
||||
iconWidget: Icon(Icons.add),
|
||||
onTap: (channel) {
|
||||
// Things to do on icon tap
|
||||
},
|
||||
),
|
||||
// Other actions here
|
||||
]
|
||||
),
|
||||
```
|
||||
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
---
|
||||
id: introduction
|
||||
sidebar_position: 1
|
||||
title: Introduction
|
||||
---
|
||||
|
||||
Understanding The UI Package Of The Flutter SDK
|
||||
|
||||
### What function does `stream_chat_flutter` serve?
|
||||
|
||||
The UI SDK (`stream_chat_flutter`) contains official Flutter components for Stream Chat, a service for building chat applications.
|
||||
|
||||
While the Stream Chat service provides the backend for messaging and the LLC provides an easy way to
|
||||
use it in your Flutter apps, we wanted to make sure that adding Chat functionality to your app was as quick as possible.
|
||||
|
||||
The UI package is built on top of the low-level client and the core package and allows you to build a
|
||||
full fledged app with either the inbuilt components, modify existing components, or easily add widgets
|
||||
of your own to match your app's style better.
|
||||
+170
@@ -0,0 +1,170 @@
|
||||
---
|
||||
id: message_input
|
||||
sidebar_position: 6
|
||||
title: MessageInput
|
||||
---
|
||||
|
||||
A Widget Dealing With Everything Related To Sending A Message
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/MessageInput-class.html)
|
||||
|
||||
|
||||
|
||||
### Background
|
||||
|
||||
In Stream Chat, we can send messages in a channel. However, sending a message isn't as simple as adding
|
||||
a `TextField` and logic for sending a message. It involves additional processes like addition of media,
|
||||
quoting a message, adding a custom command like a GIF board, and much more. Moreover, most apps also
|
||||
need to customize the input to match their theme, overall color and structure pattern, etc.
|
||||
|
||||
To do this, we created a `MessageInput` widget which abstracts all expected functionality a modern input
|
||||
needs - and allows you to use it out of the box.
|
||||
|
||||
### Basic Example
|
||||
|
||||
A `StreamChannel` is required above the widget tree in which the `MessageInput` is rendered since the channel is
|
||||
where the messages sent actually go. Let's look at a common example of how we could use the `MessageInput`:
|
||||
|
||||
```dart
|
||||
class ChannelPage extends StatelessWidget {
|
||||
const ChannelPage({
|
||||
Key key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: ChannelHeader(),
|
||||
body: Column(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: MessageListView(
|
||||
threadBuilder: (_, parentMessage) {
|
||||
return ThreadPage(
|
||||
parent: parentMessage,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
MessageInput(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
It is common to put this widget in the same page of a `MessageListView` as the bottom widget.
|
||||
|
||||
### Quoting A Message
|
||||
|
||||
The quoting functionality allows us to 'reply' to a specific message without creating a thread out of it.
|
||||
It adds the other message as context when sending a message and also displays it above the sent message.
|
||||
|
||||
To quote a message, we provide a `quotedMessage` to the `MessageInput`.
|
||||
|
||||
```dart
|
||||
Message? message;
|
||||
|
||||
// ...
|
||||
MessageInput(
|
||||
quotedMessage: message,
|
||||
),
|
||||
```
|
||||
|
||||
This will add the message given above the message about to be sent.
|
||||
|
||||
While you can implement your own functionality to select which message to reply to, the `MessageListView`
|
||||
widget helps in this case since it has an inbuilt `onMessageSwiped` callback which we can use.
|
||||
|
||||
```dart
|
||||
|
||||
class ChannelPage extends StatefulWidget {
|
||||
@override
|
||||
_ChannelPageState createState() => _ChannelPageState();
|
||||
}
|
||||
|
||||
class _ChannelPageState extends State<ChannelPage> {
|
||||
Message? quotedMessage;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: MessageListView(
|
||||
// ...
|
||||
onMessageSwiped: (message) {
|
||||
setState(() {
|
||||
quotedMessage = message;
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
MessageInput(
|
||||
quotedMessage: _quotedMessage,
|
||||
onQuotedMessageCleared: () {
|
||||
setState(() => _quotedMessage = null);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Adding Custom Actions
|
||||
|
||||
By default, the `MessageInput` has two actions: one for attachments and one for commands like Giphy.
|
||||
To add your own action, we use the `actions` parameter like this:
|
||||
|
||||
```dart
|
||||
MessageInput(
|
||||
actions: [
|
||||
InkWell(
|
||||
child: Icon(
|
||||
Icons.location_on,
|
||||
size: 20.0,
|
||||
color: StreamChatTheme.of(context).colorTheme.grey,
|
||||
),
|
||||
onTap: () {
|
||||
// Do something here
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
```
|
||||
|
||||
This will add on your action to the existing ones.
|
||||
|
||||
### Disable Attachments
|
||||
|
||||
To disable attachments being added to the message, set the `disableAttachments` parameter to true.
|
||||
|
||||
```dart
|
||||
MessageInput(
|
||||
disableAttachments: true,
|
||||
),
|
||||
```
|
||||
|
||||
### Changing Position Of MessageInput Components
|
||||
|
||||
You can also change the position of the TextField, actions and 'send' button relative to each other.
|
||||
|
||||
To do this, use the `actionsLocation` or `sendButtonLocation` parameters which help you decide the location
|
||||
of the buttons in the input.
|
||||
|
||||
For example, if we want the actions on the right and the send button inside the TextField, we can do:
|
||||
|
||||
```dart
|
||||
MessageInput(
|
||||
sendButtonLocation: SendButtonLocation.inside,
|
||||
actionsLocation: ActionsLocation.right,
|
||||
),
|
||||
```
|
||||
|
||||
|
||||
+115
@@ -0,0 +1,115 @@
|
||||
---
|
||||
id: message_list_view
|
||||
sidebar_position: 5
|
||||
title: MessageListView
|
||||
---
|
||||
|
||||
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)
|
||||
|
||||
|
||||
|
||||
### Background
|
||||
|
||||
Every channel can contain a list of messages sent by users inside it. The `MessageListView` 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`
|
||||
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
|
||||
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:
|
||||
|
||||
```dart
|
||||
class ChannelPage extends StatelessWidget {
|
||||
const ChannelPage({
|
||||
Key key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: ChannelHeader(),
|
||||
body: Column(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: MessageListView(
|
||||
threadBuilder: (_, parentMessage) {
|
||||
return ThreadPage(
|
||||
parent: parentMessage,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
MessageInput(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Enable Threads
|
||||
|
||||
Threads are made of a parent message and replies linked to it. To enable threading, the SDK requires you
|
||||
to supply a `threadBuilder` which will supply the page when the thread is clicked.
|
||||
|
||||
```dart
|
||||
MessageListView(
|
||||
threadBuilder: (_, parentMessage) {
|
||||
return ThreadPage(
|
||||
parent: parentMessage,
|
||||
);
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
|
||||
|
||||
The `MessageListView` itself can render the thread by supplying the `parentMessage` parameter.
|
||||
|
||||
```dart
|
||||
MessageListView(
|
||||
parentMessage: parent,
|
||||
),
|
||||
```
|
||||
|
||||
### Building Custom Messages
|
||||
|
||||
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.
|
||||
:::
|
||||
|
||||
```dart
|
||||
MessageListView(
|
||||
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.
|
||||
|
||||
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: message_search_list_view
|
||||
sidebar_position: 8
|
||||
title: MessageSearchListView
|
||||
---
|
||||
|
||||
A Widget To Search For Messages Across Channels
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/MessageSearchListView-class.html)
|
||||
|
||||
|
||||
|
||||
### Background
|
||||
|
||||
Users in Stream Chat can have several channels and it can get hard to remember which channel has the
|
||||
message they are searching for. As such, there needs to be a way to search for a message across multiple
|
||||
channels. This is where `MessageSearchListView` comes in.
|
||||
|
||||
### Basic Example
|
||||
|
||||
While the MessageListView is tied to a certain `StreamChannel`, a `MessageSearchListView` is not.
|
||||
|
||||
```dart
|
||||
class MessageSearchPage extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: MessageSearchBloc(
|
||||
child: MessageSearchListView(
|
||||
filters: Filter.in_('members', [StreamChat.of(context).user!.id],),
|
||||
messageQuery: 'your query here',
|
||||
limit: 20,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Customize The Result Tiles
|
||||
|
||||
You can use your own widget for the result items using the `itemBuilder` parameter.
|
||||
|
||||
```dart
|
||||
MessageSearchListView(
|
||||
// ...
|
||||
itemBuilder: (context, response) {
|
||||
return Text(response.message.text);
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
### Show Result Count
|
||||
|
||||
You show the number of results via the `showResultCount` parameter.
|
||||
|
||||
```dart
|
||||
MessageSearchListView(
|
||||
// ...
|
||||
showResultCount: true,
|
||||
),
|
||||
```
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: message_widget
|
||||
sidebar_position: 11
|
||||
title: MessageWidget
|
||||
---
|
||||
|
||||
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)
|
||||
|
||||
### Background
|
||||
|
||||
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.
|
||||
|
||||
To encapsulate all of this functionality into one widget, the Flutter SDK contains a `MessageWidget`
|
||||
widget which provides these out of the box.
|
||||
|
||||
### Basic Example (Modifying `MessageWidget` in `MessageListView`)
|
||||
|
||||
Primarily, the `MessageWidget` is used in the `MessageListView`. To customize only a few properties
|
||||
of the `MessageWidget` without supplying all other properties, the `messageBuilder` builder supplies
|
||||
a default implementation of the widget for us to modify.
|
||||
|
||||
```dart
|
||||
class ChannelPage extends StatelessWidget {
|
||||
const ChannelPage({
|
||||
Key key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: MessageListView(
|
||||
messageBuilder: (context, details, messageList, defaultMessageWidget) {
|
||||
return defaultMessageWidget.copyWith(
|
||||
showThreadReplyIndicator: false,
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Building A Custom Attachment
|
||||
|
||||
When a custom attachment type (location, audio, etc.) is sent, the MessageWidget also needs to know
|
||||
how to build it. For this purpose, we can use the `customAttachmentBuilders` parameter.
|
||||
|
||||
As an example, if a message has a attachment type 'location', we do:
|
||||
|
||||
```dart
|
||||
MessageWidget(
|
||||
//...
|
||||
customAttachmentBuilders: {
|
||||
'location': (context, message, attachments) {
|
||||
var attachmentWidget = Image.network(
|
||||
_buildMapAttachment(
|
||||
attachments[0].extraData['latitude'],
|
||||
attachments[0].extraData['longitude'],
|
||||
),
|
||||
);
|
||||
|
||||
return wrapAttachmentWidget(context, attachmentWidget, null, true, BorderRadius.circular(8.0));
|
||||
}
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
You can also override the builder for existing attachment types like `image` and `video`.
|
||||
|
||||
### Show User Avatar For Messages
|
||||
|
||||
You can decide to show, hide, or remove user avatars of the sender of the message. To do this, set
|
||||
the `showUserAvatar` property like this:
|
||||
|
||||
```dart
|
||||
MessageWidget(
|
||||
//...
|
||||
showUserAvatar = DisplayWidget.show,
|
||||
)
|
||||
```
|
||||
|
||||
### Reverse the message
|
||||
|
||||
In most cases, `MessageWidget` needs to be a different orientation depending upon if the sender is the
|
||||
user or someone else.
|
||||
|
||||
For this, we use the `reverse` parameter to change the orientation of the message:
|
||||
|
||||
```dart
|
||||
MessageWidget(
|
||||
//...
|
||||
reverse = true,
|
||||
)
|
||||
```
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
id: setup
|
||||
sidebar_position: 2
|
||||
title: Setup
|
||||
---
|
||||
|
||||
Understanding Setup For `stream_chat_flutter`
|
||||
|
||||
### Add pub.dev dependency
|
||||
|
||||
First, you need to add the `stream_chat_flutter` dependency to your `pubspec.yaml`.
|
||||
|
||||
You can either run this command:
|
||||
|
||||
```shell
|
||||
flutter pub add stream_chat_flutter
|
||||
```
|
||||
|
||||
OR
|
||||
|
||||
Add this line in the dependencies section of your pubspec.yaml after substituting latest version:
|
||||
|
||||
```yaml
|
||||
dependencies:
|
||||
stream_chat_flutter: ^latest_version
|
||||
```
|
||||
|
||||
You can find the package details on [pub.dev](https://pub.dev/packages/stream_chat_flutter).
|
||||
|
||||
### Details On Platform Support
|
||||
|
||||
`stream_chat_flutter` was originally created for Android and iOS mobile platforms. As Flutter matured,
|
||||
support for additional platforms was added and the package now has experimental support for web and desktop as
|
||||
[detailed here](https://getstream.io/blog/announcing-experimental-multi-platform-support-for-the-stream-flutter-sdk/).
|
||||
|
||||
However, platforms other than mobile may have additional constraints due to not supporting all plugins,
|
||||
which will be addressed by the respective plugin creators over time.
|
||||
|
||||
### Setup: iOS
|
||||
|
||||
The library uses [flutter file picker plugin](https://github.com/miguelpruivo/flutter_file_picker) to pick files from the os.
|
||||
Follow [this wiki](https://github.com/miguelpruivo/flutter_file_picker/wiki/Setup#ios) to fulfill iOS requirements.
|
||||
|
||||
We also use [video_player](https://pub.dev/packages/video_player) to reproduce videos.
|
||||
Follow [this guide](https://pub.dev/packages/video_player#installation) to fulfill the requirements.
|
||||
|
||||
To pick images from the camera, we use the [image_picker](https://pub.dev/packages/image_picker) plugin.
|
||||
Follow [these instructions](https://pub.dev/packages/image_picker#ios) to check the requirements.
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: stream_chat_and_theming
|
||||
sidebar_position: 3
|
||||
title: StreamChat And Theming
|
||||
---
|
||||
|
||||
Understanding How To Customize Widgets Using `StreamChatTheme`
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChatTheme-class.html) and [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChatThemeData-class.html)
|
||||
|
||||
### Background
|
||||
|
||||
Stream's UI SDK makes it easy for developers to add custom styles and attributes to our widgets. Like most Flutter frameworks, Stream exposes a dedicated widget for theming.
|
||||
|
||||
Using `StreamChatTheme`, users can customize most aspects of our UI widgets by setting attributes using `StreamChatThemeData`.
|
||||
|
||||
Similar to the `Theme` and `ThemeData` in Flutter, Stream Chat uses a top level [inherited widget](https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html) to provide theming information throughout your application. This can be optionally set at the top of your application tree or at a localized point in your widget sub-tree.
|
||||
|
||||
If you'd like to customize the look and feel of Stream chat across your entire application, we recommend setting your theme at the top level. Conversely, users can customize specific screens or widgets by wrapping components in a `StreamChatTheme`.
|
||||
|
||||
### A closer look at StreamChatThemeData
|
||||
|
||||
Looking at the constructor for `StreamChatThemeData`, we can see the full list of properties and widgets available for customization.
|
||||
|
||||
Some high-level properties such as `textTheme` or `colorTheme` can be set application-wide directly from this class. In contrast, larger components such as `ChannelHeader`, `MessageInputs`, etc. have been broken up into smaller theme objects.
|
||||
|
||||
```dart
|
||||
factory StreamChatThemeData({
|
||||
Brightness? brightness,
|
||||
TextTheme? textTheme,
|
||||
ColorTheme? colorTheme,
|
||||
ChannelListHeaderTheme? channelListHeaderTheme,
|
||||
ChannelPreviewTheme? channelPreviewTheme,
|
||||
ChannelTheme? channelTheme,
|
||||
MessageTheme? otherMessageTheme,
|
||||
MessageTheme? ownMessageTheme,
|
||||
MessageInputTheme? messageInputTheme,
|
||||
Widget Function(BuildContext, Channel)? defaultChannelImage,
|
||||
Widget Function(BuildContext, User)? defaultUserImage,
|
||||
IconThemeData? primaryIconTheme,
|
||||
List<ReactionIcon>? reactionIcons,
|
||||
});
|
||||
```
|
||||
|
||||
### Stream Chat Theme in use
|
||||
|
||||
Let's take a look at customizing widgets using `StreamChatTheme`. In the example below, we can change the default color theme to yellow and override the channel header's typography and colors.
|
||||
|
||||
```dart
|
||||
builder: (context, child) => StreamChat(
|
||||
client: client,
|
||||
child: child,
|
||||
streamChatThemeData: StreamChatThemeData(
|
||||
colorTheme: ColorTheme.light(
|
||||
primaryAccent: const Color(0xffffe072),
|
||||
),
|
||||
channelTheme: ChannelTheme(
|
||||
channelHeaderTheme: ChannelHeaderTheme(
|
||||
color: const Color(0xffd34646),
|
||||
title: TextStyle(
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
```
|
||||
|
||||
We are creating this class at the very top of our widget tree using the `streamChatThemeData` parameter found in the `StreamChat` widget.
|
||||
|
||||
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: user_list_view
|
||||
sidebar_position: 7
|
||||
title: UserListView
|
||||
---
|
||||
|
||||
A Widget For Displaying And Selecting Users
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/UserListView-class.html)
|
||||
|
||||
|
||||
|
||||
### Background
|
||||
|
||||
A list of users is required for many different purposes: showing a list of users in a Channel,
|
||||
selecting users to add in a channel, etc. The `UserListView` displays and allows selection of a list
|
||||
of users along with multiple display configurations like a list and grid.
|
||||
|
||||
### Basic Example
|
||||
|
||||
Let's take a look at an example where we use the widget to autocomplete user names:
|
||||
|
||||
```dart
|
||||
class UsersListPage extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: UsersBloc(
|
||||
child: UsersListView(
|
||||
filter: Filter.notEqual('id', StreamChat.of(context).user!.id),
|
||||
sort: [
|
||||
SortOption(
|
||||
'name',
|
||||
direction: 1,
|
||||
),
|
||||
],
|
||||
pagination: PaginationParams(
|
||||
limit: 25,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Customize The User Items
|
||||
|
||||
You can use your own widget for the user items using the `userItemBuilder` parameter.
|
||||
|
||||
```dart
|
||||
UsersListView(
|
||||
// ...
|
||||
userItemBuilder: (context, user, isSelected) {
|
||||
return Text(user.name);
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
### Group Alphabetically
|
||||
|
||||
You can group alphabetically using the `groupAlphabetically` parameter:
|
||||
|
||||
```dart
|
||||
UsersListView(
|
||||
//...
|
||||
groupAlphabetically: true,
|
||||
),
|
||||
```
|
||||
|
||||
### Selecting Users
|
||||
|
||||
The `UserListView` widget allows selecting users in a list by supplying a selected users list and callbacks
|
||||
for when user items are tapped.
|
||||
|
||||
```dart
|
||||
Set<User>? selectedUsers = {};
|
||||
|
||||
UsersListView(
|
||||
//...
|
||||
selectedUsers: selectedUsers,
|
||||
onUserTap: (user, _) {
|
||||
setState(() {
|
||||
selectedUsers.add(user);
|
||||
});
|
||||
},
|
||||
),
|
||||
```
|
||||
Reference in New Issue
Block a user