doc(docs): add grid docs
This commit is contained in:
@@ -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,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: StreamMessageSearchListView(
|
||||
controller: _controller,
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -53,7 +53,7 @@ class _StreamMessageSearchState extends State<StreamMessageSearchPage> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
body: StreamChannelListView(
|
||||
body: StreamMessageSearchListView(
|
||||
controller: _controller,
|
||||
),
|
||||
);
|
||||
|
||||
@@ -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(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -22,8 +22,6 @@ Make sure to check the [StreamUserListController](./stream_user_list_controller.
|
||||
|
||||
### Basic Example
|
||||
|
||||
Let's take a look at an example where we use the widget to autocomplete user names:
|
||||
|
||||
```dart
|
||||
class UserListPage extends StatefulWidget {
|
||||
const UserListPage({
|
||||
|
||||
Reference in New Issue
Block a user