doc(docs): add grid docs

This commit is contained in:
Salvatore Giordano
2022-05-02 15:40:55 +02:00
parent 52e590371b
commit 1522181294
5 changed files with 204 additions and 3 deletions
@@ -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({