Docs: reorganize sidebar docs + fix broken links (#1369)
* reorganize sidebar docs * fix broken links * tweaks
This commit is contained in:
Sacha Arbonel
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"label": "UI Widgets"
|
||||
}
|
||||
@@ -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,78 @@
|
||||
---
|
||||
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 the 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
|
||||
|
||||
As of v5, the`stream_chat_flutter` package (UI) added support for web, macOS, Windows, and Linux - on top of the original support for Android and iOS. It has, however, been possible to target desktop and web since Flutter added support for these platforms using the `stream_chat_flutter_core` (builder) and `stream_chat` (low-level client) packages - this remains unchanged.
|
||||
|
||||
Please note that Flutter Web may have additional constraints due to not supporting all plugins that Stream Chat relies on. The respective plugin creators will address this over time.
|
||||
|
||||
### Setup
|
||||
|
||||
This section provides setup instructions for the respective platforms.
|
||||
|
||||
#### Android
|
||||
|
||||
The package uses [photo_manager](https://pub.dev/packages/photo_manager) to access the device's photo library. Follow [this wiki](https://pub.dev/packages/photo_manager#android-10-q-29) to fulfill the Android requirements.
|
||||
|
||||
#### 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.
|
||||
|
||||
Stream Chat also uses the [video_player](https://pub.dev/packages/video_player) package to play videos. Follow [this guide](https://pub.dev/packages/video_player#installation) to fulfill the requirements.
|
||||
|
||||
Stream Chat uses the [image_picker](https://pub.dev/packages/image_picker) plugin.
|
||||
Follow [these instructions](https://pub.dev/packages/image_picker#ios) to check the requirements.
|
||||
|
||||
#### Web
|
||||
|
||||
For the web, edit your `index.html` and add the following in the `<body>` tag to allow the SDK to override the right-click behavior:
|
||||
|
||||
```html
|
||||
<body oncontextmenu="return false;"></body>
|
||||
```
|
||||
|
||||
#### macOS
|
||||
|
||||
For macOS Stream Chat uses the [file_selector](https://pub.dev/packages/file_selector#macos) package. Follow [these instructions](https://pub.dev/packages/file_selector#macos) to check the requirements.
|
||||
|
||||
You also need to add the following [entitlements](https://docs.flutter.dev/development/platform-integration/desktop#entitlements-and-the-app-sandbox) to `Release.entitlement` and `DebugProfile.entitlement`:
|
||||
|
||||
```xml
|
||||
<key>com.apple.security.network.client</key>
|
||||
<true/>
|
||||
<key>com.apple.security.files.user-selected.read-write</key>
|
||||
<true/>
|
||||
```
|
||||
|
||||
Which grants:
|
||||
|
||||
- Internet permission
|
||||
- File access permission
|
||||
@@ -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.
|
||||
@@ -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,
|
||||
),
|
||||
```
|
||||
@@ -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,
|
||||
),
|
||||
```
|
||||
@@ -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](../04-stream_chat_flutter_core/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:
|
||||
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: stream_member_grid_view
|
||||
sidebar_position: 7
|
||||
title: StreamMemberGridView
|
||||
---
|
||||
|
||||
A widget for displaying and selecting members in a grid view.
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamMemberGridView-class.html)
|
||||
|
||||
### Background
|
||||
|
||||
The `StreamMemberGridView` widget allows displaying a list of members in a `GridView`.
|
||||
|
||||
:::note
|
||||
See the [StreamMemberListView](./stream_member_list_view.mdx) documentation for displaying members in a `ListView`.
|
||||
:::
|
||||
|
||||
### Basic Example
|
||||
|
||||
```dart
|
||||
class MemberGridPage extends StatefulWidget {
|
||||
const MemberGridPage({
|
||||
Key? key,
|
||||
required this.client,
|
||||
}) : super(key: key);
|
||||
|
||||
final StreamChatClient client;
|
||||
|
||||
@override
|
||||
State<MemberGridPage> createState() => _MemberGridPageState();
|
||||
}
|
||||
|
||||
class _MemberGridPageState extends State<MemberGridPage> {
|
||||
late final _controller = StreamMemberListController(
|
||||
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: StreamMemberGridView(
|
||||
controller: _controller,
|
||||
onChannelTap: (channel) => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (_) => StreamChannel(
|
||||
channel: channel,
|
||||
child: const ChannelPage(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: stream_member_list_view
|
||||
sidebar_position: 7
|
||||
title: StreamMemberListView
|
||||
---
|
||||
|
||||
A widget for displaying and selecting members in a list view.
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamMemberListView-class.html)
|
||||
|
||||
### Background
|
||||
|
||||
A list of members is required for many different purposes, for example, showing a list of users in a Channel. The `StreamMemberListView` displays a list of members.
|
||||
|
||||
:::note
|
||||
Make sure to check the [StreamMemberListController](../04-stream_chat_flutter_core/stream_member_list_controller.mdx) documentation for more information on how to use the controller to manipulate the `StreamMemberListView`.
|
||||
:::
|
||||
|
||||
### Basic Example
|
||||
|
||||
```dart
|
||||
class MemberListPage extends StatefulWidget {
|
||||
const MemberListPage({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<MemberListPage> createState() => _MemberListPageState();
|
||||
}
|
||||
|
||||
class _MemberListPageState extends State<MemberListPage> {
|
||||
late final StreamMemberListController _memberListController =
|
||||
StreamMemberListController(
|
||||
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: () => _memberListController.refresh(),
|
||||
child: StreamMemberListView(
|
||||
controller: _memberListController,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Customize The Member Items
|
||||
|
||||
You can use your own widget for the member items using the `itemBuilder` parameter.
|
||||
|
||||
```dart
|
||||
StreamMemberListView(
|
||||
// ...
|
||||
itemBuilder: (context, members, index, defaultWidget) {
|
||||
return Text(members[index].name);
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
### Selecting Members
|
||||
|
||||
The `StreamMemberListView` widget allows selecting members in a list. The `defaultWidget` returned can be customized to indicate that it has been selected.
|
||||
|
||||
```dart
|
||||
Set<Member> _selectedMembers = {};
|
||||
|
||||
StreamMemberListView(
|
||||
controller: _memberListController,
|
||||
itemBuilder: (context, members, index, defaultWidget) {
|
||||
return defaultWidget.copyWith(
|
||||
selected: _selectedMembers.contains(members[index]),
|
||||
);
|
||||
},
|
||||
onMemberTap: (member) {
|
||||
setState(() {
|
||||
_selectedMembers.add(member);
|
||||
});
|
||||
},
|
||||
);
|
||||
```
|
||||
@@ -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](../04-stream_chat_flutter_core/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,
|
||||
),
|
||||
```
|
||||
|
||||
|
||||
@@ -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 ?? '');
|
||||
},
|
||||
),
|
||||
```
|
||||
@@ -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,
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -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](../04-stream_chat_flutter_core/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);
|
||||
},
|
||||
),
|
||||
```
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
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(
|
||||
attachmentWidget: attachmentWidget,
|
||||
attachmentShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
|
||||
);
|
||||
}
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
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,
|
||||
)
|
||||
```
|
||||
@@ -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(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -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](../04-stream_chat_flutter_core/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