diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_grid_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_grid_view.mdx new file mode 100644 index 00000000..16bad7dc --- /dev/null +++ b/docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_grid_view.mdx @@ -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 createState() => _ChannelGridPageState(); +} + +class _ChannelGridPageState extends State { + 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. diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/stream_message_search_grid_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/stream_message_search_grid_view.mdx new file mode 100644 index 00000000..59398e56 --- /dev/null +++ b/docusaurus/docs/Flutter/stream_chat_flutter/stream_message_search_grid_view.mdx @@ -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 createState() => _StreamMessageSearchState(); +} + +class _StreamMessageSearchState extends State { + 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, + ), + ); +} +``` diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/stream_message_search_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/stream_message_search_list_view.mdx index e08bed07..cf27facf 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/stream_message_search_list_view.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/stream_message_search_list_view.mdx @@ -53,7 +53,7 @@ class _StreamMessageSearchState extends State { @override Widget build(BuildContext context) => Scaffold( - body: StreamChannelListView( + body: StreamMessageSearchListView( controller: _controller, ), ); diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/stream_user_grid_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/stream_user_grid_view.mdx new file mode 100644 index 00000000..d2fb953d --- /dev/null +++ b/docusaurus/docs/Flutter/stream_chat_flutter/stream_user_grid_view.mdx @@ -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 createState() => _UserGridPageState(); +} + +class _UserGridPageState extends State { + 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(), + ), + ), + ), + ), + ), + ); +} +``` diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/stream_user_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/stream_user_list_view.mdx index 14cf92f9..1a8cbbf8 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/stream_user_list_view.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/stream_user_list_view.mdx @@ -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({