docs: v5 (#1341)
* feat: version docs and add stream_member_list_controller docs * feat: add member list and grid doc * exported extensions on ui package * feat: add first version of v5 migration guide * docs: grammar fixes and other v5 release details * docs: add additional v5 migration info * update WrapAttachmentWidget doc * add back v4 migration guide * docs(doc): add customize_attachment_picker_modal.mdx guide. (#1343) Signed-off-by: xsahil03x <[email protected]> Signed-off-by: xsahil03x <[email protected]> * update link for attachment picker guide * update share_plus Signed-off-by: xsahil03x <[email protected]> Co-authored-by: Gordon Hayes <[email protected]> Co-authored-by: Sahil Kumar <[email protected]>
This commit is contained in:
Salvatore Giordano
co-authored by
Gordon Hayes
Sahil Kumar
Gordon Hayes
Sahil Kumar
parent
4f2542291c
commit
08295e5290
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Stream Chat Flutter",
|
||||
"position": 3
|
||||
}
|
||||
+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.
|
||||
@@ -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.
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: stream_channel_grid_view
|
||||
sidebar_position: 4
|
||||
title: StreamChannelGridView
|
||||
---
|
||||
|
||||
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/StreamChannelGridView-class.html)
|
||||
|
||||
### Background
|
||||
|
||||
The `StreamChannelGridView` widget allows displaying a list of channels to a user in a `GridView`.
|
||||
|
||||
:::note
|
||||
Make sure to check the [StreamChannelListView](./stream_channel_list_view.mdx) documentation to know how to show results in a `ListView`.
|
||||
:::
|
||||
|
||||
### Basic Example
|
||||
|
||||
Here is a basic example of the `StreamChannelGridView` widget. It consists of the main widget itself, a `StreamChannelListController` to control the list of channels and a callback to handle the tap of a channel.
|
||||
|
||||
```dart
|
||||
class ChannelGridPage extends StatefulWidget {
|
||||
const ChannelGridPage({
|
||||
Key? key,
|
||||
required this.client,
|
||||
}) : super(key: key);
|
||||
|
||||
final StreamChatClient client;
|
||||
|
||||
@override
|
||||
State<ChannelGridPage> createState() => _ChannelGridPageState();
|
||||
}
|
||||
|
||||
class _ChannelGridPageState extends State<ChannelGridPage> {
|
||||
late final _controller = StreamChannelListController(
|
||||
client: widget.client,
|
||||
filter: Filter.in_(
|
||||
'members',
|
||||
[StreamChat.of(context).currentUser!.id],
|
||||
),
|
||||
sort: const [SortOption('last_message_at')],
|
||||
);
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
body: RefreshIndicator(
|
||||
onRefresh: _controller.refresh,
|
||||
child: StreamChannelGridView(
|
||||
controller: _controller,
|
||||
onChannelTap: (channel) => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (_) => StreamChannel(
|
||||
channel: channel,
|
||||
child: const ChannelPage(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
This example by default displays the channels that a user is a part of. Now let's look at customizing
|
||||
the widget.
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: stream_channel_header
|
||||
sidebar_position: 10
|
||||
title: StreamChannelHeader
|
||||
---
|
||||
|
||||
A Widget To Display Common Channel Details
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChannelHeader-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 `StreamChannelHeader`
|
||||
widget which provides these out of the box.
|
||||
|
||||
### Basic Example
|
||||
|
||||
Let's just add a `StreamChannelHeader` to a page with a `StreamMessageListView` and a `StreamMessageInput` 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: StreaChannelHeader(),
|
||||
body: Column(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: StreamMessageListView(
|
||||
threadBuilder: (_, parentMessage) {
|
||||
return ThreadPage(
|
||||
parent: parentMessage,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
StreamMessageInput(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 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
|
||||
//...
|
||||
StreamChannelHeader(
|
||||
title: Text('My Custom Name'),
|
||||
),
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Showing Connection State
|
||||
|
||||
The `StreamChannelHeader` 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
|
||||
//...
|
||||
StreamChannelHeader(
|
||||
showConnectionStateTile: true,
|
||||
),
|
||||
```
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: stream_channel_list_header
|
||||
sidebar_position: 9
|
||||
title: StreamChannelListHeader
|
||||
---
|
||||
|
||||
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/StreamChannelListHeader-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 `StreamChannelListHeader`
|
||||
widget which provides these out of the box.
|
||||
|
||||
### Basic Example
|
||||
|
||||
This is a basic example of a page which has a `StreamChannelListView` and a `StreamChannelListHeader` to recreate a
|
||||
common Channels Page.
|
||||
|
||||
```dart
|
||||
class ChannelListPage extends StatefulWidget {
|
||||
const ChannelListPage({
|
||||
Key? key,
|
||||
required this.client,
|
||||
}) : super(key: key);
|
||||
|
||||
final StreamChatClient client;
|
||||
|
||||
@override
|
||||
State<ChannelListPage> createState() => _ChannelListPageState();
|
||||
}
|
||||
|
||||
class _ChannelListPageState extends State<ChannelListPage> {
|
||||
late final _controller = StreamChannelListController(
|
||||
client: widget.client,
|
||||
filter: Filter.in_(
|
||||
'members',
|
||||
[StreamChat.of(context).currentUser!.id],
|
||||
),
|
||||
sort: const [SortOption('last_message_at')],
|
||||
);
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
appBar: StreamChannelListHeader(),
|
||||
body: RefreshIndicator(
|
||||
onRefresh: _controller.refresh,
|
||||
child: StreamChannelListView(
|
||||
controller: _controller,
|
||||
onChannelTap: (channel) => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (_) => StreamChannel(
|
||||
channel: channel,
|
||||
child: const 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
|
||||
//...
|
||||
StreamChannelListHeader(
|
||||
subtitle: Text('My Custom Subtitle'),
|
||||
),
|
||||
```
|
||||
|
||||
|
||||
|
||||
The `titleBuilder` param helps you build different titles depending on the connection state:
|
||||
|
||||
```dart
|
||||
//...
|
||||
StreamChannelListHeader(
|
||||
titleBuilder: (context, status, client) {
|
||||
switch(status) {
|
||||
/// Return your title widget
|
||||
}
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
### Showing Connection State
|
||||
|
||||
The `StreamChannelListHeader` 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
|
||||
//...
|
||||
StreamChannelListHeader(
|
||||
showConnectionStateTile: true,
|
||||
),
|
||||
```
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
---
|
||||
id: stream_channel_list_view
|
||||
sidebar_position: 4
|
||||
title: StreamChannelListView
|
||||
---
|
||||
|
||||
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/StreamChannelListView-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 `StreamChannelListView` 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 `StreamChannelListView`
|
||||
widget.
|
||||
|
||||
:::note
|
||||
Make sure to check the [StreamChannelListController](./stream_channel_list_controller.mdx) documentation for more information on how to use the controller to manipulate the `StreamChannelListView`.
|
||||
:::
|
||||
|
||||
### Basic Example
|
||||
|
||||
Here is a basic example of the `StreamChannelListView` widget. It consists of the main widget itself, a `StreamChannelListController` to control the list of channels and a callback to handle the tap of a channel.
|
||||
|
||||
```dart
|
||||
class ChannelListPage extends StatefulWidget {
|
||||
const ChannelListPage({
|
||||
Key? key,
|
||||
required this.client,
|
||||
}) : super(key: key);
|
||||
|
||||
final StreamChatClient client;
|
||||
|
||||
@override
|
||||
State<ChannelListPage> createState() => _ChannelListPageState();
|
||||
}
|
||||
|
||||
class _ChannelListPageState extends State<ChannelListPage> {
|
||||
late final _controller = StreamChannelListController(
|
||||
client: widget.client,
|
||||
filter: Filter.in_(
|
||||
'members',
|
||||
[StreamChat.of(context).currentUser!.id],
|
||||
),
|
||||
sort: const [SortOption('last_message_at')],
|
||||
);
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
body: RefreshIndicator(
|
||||
onRefresh: _controller.refresh,
|
||||
child: StreamChannelListView(
|
||||
controller: _controller,
|
||||
onChannelTap: (channel) => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (_) => StreamChannel(
|
||||
channel: channel,
|
||||
child: const 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 `itemBuilder` parameter like this:
|
||||
|
||||
```dart
|
||||
StreamChannelListView(
|
||||
...
|
||||
itemBuilder: (context, channels, index, defaultTile) {
|
||||
return ListTile(
|
||||
tileColor: Colors.amberAccent,
|
||||
title: Center(
|
||||
child: StreamChannelName(channel: channels[index]),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
Which gives you a new Channel preview in the list:
|
||||
|
||||
|
||||
+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.
|
||||
|
||||
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: stream_message_input
|
||||
sidebar_position: 6
|
||||
title: StreamMessageInput
|
||||
---
|
||||
|
||||
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/StreamMessageInput-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 `StreamMessageInput` 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 `StreamMessageInput` 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 `StreamMessageInput`:
|
||||
|
||||
```dart
|
||||
class ChannelPage extends StatelessWidget {
|
||||
const ChannelPage({
|
||||
Key key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: StreaChannelHeader(),
|
||||
body: Column(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: StreamMessageListView(
|
||||
threadBuilder: (_, parentMessage) {
|
||||
return ThreadPage(
|
||||
parent: parentMessage,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
StreamMessageInput(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
It is common to put this widget in the same page of a `StreamMessageListView` as the bottom widget.
|
||||
|
||||
:::note
|
||||
Make sure to check the [StreamMessageInputController](./stream_message_input_controller.mdx) documentation for more information on how to use the controller to manipulate the `StreamMessageInput`.
|
||||
:::
|
||||
|
||||
### Adding Custom Actions
|
||||
|
||||
By default, the `StreamMessageInput` 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
|
||||
StreamMessageInput(
|
||||
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
|
||||
StreamMessageInput(
|
||||
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
|
||||
StreamMessageInput(
|
||||
sendButtonLocation: SendButtonLocation.inside,
|
||||
actionsLocation: ActionsLocation.right,
|
||||
),
|
||||
```
|
||||
|
||||
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: stream_message_list_view
|
||||
sidebar_position: 5
|
||||
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/StreamMessageListView-class.html)
|
||||
|
||||
|
||||
|
||||
### Background
|
||||
|
||||
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 `StreamMessageSearchListView`
|
||||
which may not contain messages only from a single channel and is used to search for messages across
|
||||
many.
|
||||
|
||||
### Basic Example
|
||||
|
||||
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 `StreamMessageListView` is:
|
||||
|
||||
```dart
|
||||
class ChannelPage extends StatelessWidget {
|
||||
const ChannelPage({
|
||||
Key key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: StreamChannelHeader(),
|
||||
body: Column(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: StreamMessageListView(),
|
||||
),
|
||||
StreamMessageInput(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 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
|
||||
StreamMessageListView(
|
||||
threadBuilder: (_, parentMessage) {
|
||||
return ThreadPage(
|
||||
parent: parentMessage,
|
||||
);
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
|
||||
|
||||
The `StreamMessageListView` itself can render the thread by supplying the `parentMessage` parameter.
|
||||
|
||||
```dart
|
||||
StreamMessageListView(
|
||||
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 `StreamMessageWidget` documentation instead.
|
||||
:::
|
||||
|
||||
```dart
|
||||
StreamMessageListView(
|
||||
messageBuilder: (context, details, messageList, defaultImpl) {
|
||||
// Your implementation of the message here
|
||||
// E.g: return Text(details.message.text ?? '');
|
||||
},
|
||||
),
|
||||
```
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: stream_message_search_grid_view
|
||||
sidebar_position: 8
|
||||
title: StreamMessageSearchGridView
|
||||
---
|
||||
|
||||
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/StreamMessageSearchGridView-class.html)
|
||||
|
||||
### Background
|
||||
|
||||
The `StreamMessageSearchGridView` widget allows displaying a list of searched messages in a `GridView`.
|
||||
|
||||
:::note
|
||||
Make sure to check the [StreamMessageSearchListView](./stream_message_search_list_view.mdx) documentation to know how to show results in a `ListView`.
|
||||
:::
|
||||
|
||||
### Basic Example
|
||||
|
||||
```dart
|
||||
class StreamMessageSearchPage extends StatefulWidget {
|
||||
const StreamMessageSearchPage({
|
||||
Key? key,
|
||||
required this.client,
|
||||
}) : super(key: key);`
|
||||
|
||||
final StreamChatClient client;
|
||||
|
||||
@override
|
||||
State<StreamMessageSearchPage> createState() => _StreamMessageSearchState();
|
||||
}
|
||||
|
||||
class _StreamMessageSearchState extends State<StreamMessageSearchPage> {
|
||||
late final _controller = StreamMessageSearchListController(
|
||||
client: widget.client,
|
||||
limit: 20,
|
||||
filters: Filter.in_('members', [StreamChat.of(context).user!.id],),
|
||||
searchQuery: 'your query here',
|
||||
);
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
body: StreamMessageSearchGridView(
|
||||
controller: _controller,
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: stream_message_search_list_view
|
||||
sidebar_position: 8
|
||||
title: StreamMessageSearchListView
|
||||
---
|
||||
|
||||
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/StreamMessageSearchListView-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 `StreamMessageSearchListView` comes in.
|
||||
|
||||
:::note
|
||||
Make sure to check the [StreamMessageSearchListController](./stream_message_search_list_controller.mdx) documentation for more information on how to use the controller to manipulate the `StreamMessageSearchListView`.
|
||||
:::
|
||||
|
||||
### Basic Example
|
||||
|
||||
While the `StreamMessageListView` is tied to a certain `StreamChannel`, a `StreamMessageSearchListView` is not.
|
||||
|
||||
```dart
|
||||
class StreamMessageSearchPage extends StatefulWidget {
|
||||
const StreamMessageSearchPage({
|
||||
Key? key,
|
||||
required this.client,
|
||||
}) : super(key: key);`
|
||||
|
||||
final StreamChatClient client;
|
||||
|
||||
@override
|
||||
State<StreamMessageSearchPage> createState() => _StreamMessageSearchState();
|
||||
}
|
||||
|
||||
class _StreamMessageSearchState extends State<StreamMessageSearchPage> {
|
||||
late final _controller = StreamMessageSearchListController(
|
||||
client: widget.client,
|
||||
limit: 20,
|
||||
filters: Filter.in_('members', [StreamChat.of(context).user!.id],),
|
||||
searchQuery: 'your query here',
|
||||
);
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
body: StreamMessageSearchListView(
|
||||
controller: _controller,
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Customize The Result Tiles
|
||||
|
||||
You can use your own widget for the result items using the `itemBuilder` parameter.
|
||||
|
||||
```dart
|
||||
StreamMessageSearchListView(
|
||||
// ...
|
||||
itemBuilder: (context, responses, index, defaultWidget) {
|
||||
return Text(responses[index].message.text);
|
||||
},
|
||||
),
|
||||
```
|
||||
+97
@@ -0,0 +1,97 @@
|
||||
---
|
||||
id: stream_message_widget
|
||||
sidebar_position: 11
|
||||
title: StreamMessageWidget
|
||||
---
|
||||
|
||||
A Widget For Displaying Messages And Attachments
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamMessageWidget-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 `StreamMessageWidget`
|
||||
widget which provides these out of the box.
|
||||
|
||||
### Basic Example (Modifying `StreamMessageWidget` in `StreamMessageListView`)
|
||||
|
||||
Primarily, the `StreamMessageWidget` is used in the `StreamMessageListView`. To customize only a few properties
|
||||
of the `StreamMessageWidget` 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: StreamMessageListView(
|
||||
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
|
||||
StreamMessageWidget(
|
||||
//...
|
||||
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
|
||||
StreamMessageWidget(
|
||||
//...
|
||||
showUserAvatar = DisplayWidget.show,
|
||||
)
|
||||
```
|
||||
|
||||
### Reverse the message
|
||||
|
||||
In most cases, `StreamMessageWidget` 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
|
||||
StreamMessageWidget(
|
||||
//...
|
||||
reverse = true,
|
||||
)
|
||||
```
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: stream_user_grid_view
|
||||
sidebar_position: 7
|
||||
title: StreamUserGridView
|
||||
---
|
||||
|
||||
A Widget For Displaying And Selecting Users
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamUserGridView-class.html)
|
||||
|
||||
### Background
|
||||
|
||||
The `StreamUserGridView` widget allows displaying a list of users in a `GridView`.
|
||||
|
||||
:::note
|
||||
Make sure to check the [StreamUserListView](./stream_user_list_view.mdx) documentation to know how to show results in a `ListView`.
|
||||
:::
|
||||
|
||||
### Basic Example
|
||||
|
||||
```dart
|
||||
class UserGridPage extends StatefulWidget {
|
||||
const UserGridPage({
|
||||
Key? key,
|
||||
required this.client,
|
||||
}) : super(key: key);
|
||||
|
||||
final StreamChatClient client;
|
||||
|
||||
@override
|
||||
State<UserGridPage> createState() => _UserGridPageState();
|
||||
}
|
||||
|
||||
class _UserGridPageState extends State<UserGridPage> {
|
||||
late final _controller = StreamUserListController(
|
||||
client: widget.client,
|
||||
limit: 25,
|
||||
filter: Filter.and([
|
||||
Filter.notEqual('id', StreamChat.of(context).currentUser!.id),
|
||||
]),
|
||||
sort: [
|
||||
SortOption(
|
||||
'name',
|
||||
direction: 1,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
body: RefreshIndicator(
|
||||
onRefresh: _controller.refresh,
|
||||
child: StreamUserGridView(
|
||||
controller: _controller,
|
||||
onChannelTap: (channel) => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (_) => StreamChannel(
|
||||
channel: channel,
|
||||
child: const ChannelPage(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: stream_user_list_view
|
||||
sidebar_position: 7
|
||||
title: StreamUserListView
|
||||
---
|
||||
|
||||
A Widget For Displaying And Selecting Users
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamUserListView-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 `StreamUserListView` displays a list
|
||||
of users.
|
||||
|
||||
:::note
|
||||
Make sure to check the [StreamUserListController](./stream_user_list_controller.mdx) documentation for more information on how to use the controller to manipulate the `StreamUserListView`.
|
||||
:::
|
||||
|
||||
### Basic Example
|
||||
|
||||
```dart
|
||||
class UserListPage extends StatefulWidget {
|
||||
const UserListPage({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<UserListPage> createState() => _UserListPageState();
|
||||
}
|
||||
|
||||
class _UserListPageState extends State<UserListPage> {
|
||||
late final StreamUserListController _userListController =
|
||||
StreamUserListController(
|
||||
client: StreamChat.of(context).client,
|
||||
limit: 25,
|
||||
filter: Filter.and(
|
||||
[Filter.notEqual('id', StreamChat.of(context).currentUser!.id)],
|
||||
),
|
||||
sort: [
|
||||
const SortOption(
|
||||
'name',
|
||||
direction: 1,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return RefreshIndicator(
|
||||
onRefresh: () => _userListController.refresh(),
|
||||
child: StreamUserListView(
|
||||
controller: _userListController,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Customize The User Items
|
||||
|
||||
You can use your own widget for the user items using the `itemBuilder` parameter.
|
||||
|
||||
```dart
|
||||
StreamUsersListView(
|
||||
// ...
|
||||
itemBuilder: (context, users, index, defaultWidget) {
|
||||
return Text(user[index].name);
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
### Selecting Users
|
||||
|
||||
The `StreamUserListView` widget allows selecting users in a list. The `defaultWidget` returned can be customized to indicate that it has been selected.
|
||||
|
||||
```dart
|
||||
Set<User> _selectedUsers = {};
|
||||
|
||||
StreamUserListView(
|
||||
controller: _userListController,
|
||||
itemBuilder: (context, users, index, defaultWidget) {
|
||||
return defaultWidget.copyWith(
|
||||
selected: _selectedUsers.contains(users[index]),
|
||||
);
|
||||
},
|
||||
onUserTap: (user) {
|
||||
setState(() {
|
||||
_selectedUsers.add(user);
|
||||
});
|
||||
},
|
||||
);
|
||||
```
|
||||
Reference in New Issue
Block a user