diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_list_view.mdx index f0835d23..dbb3f266 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_list_view.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_list_view.mdx @@ -22,6 +22,10 @@ The `StreamChannelListView` widget allows displaying a list of channels to a use 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. diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/stream_message_input.mdx similarity index 52% rename from docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx rename to docusaurus/docs/Flutter/stream_chat_flutter/stream_message_input.mdx index f33f85e9..b60696ae 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/stream_message_input.mdx @@ -1,12 +1,12 @@ --- -id: message_input +id: stream_message_input sidebar_position: 6 -title: MessageInput +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/MessageInput-class.html) +Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamMessageInput-class.html) ![](../assets/message_input.png) @@ -17,13 +17,13 @@ a `TextField` and logic for sending a message. It involves additional processes 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 `MessageInput` widget which abstracts all expected functionality a modern input +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 `MessageInput` 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 `MessageInput`: +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 { @@ -34,11 +34,11 @@ class ChannelPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - appBar: ChannelHeader(), + appBar: StreaChannelHeader(), body: Column( children: [ Expanded( - child: MessageListView( + child: StreamMessageListView( threadBuilder: (_, parentMessage) { return ThreadPage( parent: parentMessage, @@ -46,7 +46,7 @@ class ChannelPage extends StatelessWidget { }, ), ), - MessageInput(), + StreamMessageInput(), ], ), ); @@ -54,76 +54,19 @@ class ChannelPage extends StatelessWidget { } ``` -It is common to put this widget in the same page of a `MessageListView` as the bottom widget. +It is common to put this widget in the same page of a `StreamMessageListView` as the bottom widget. -### Quoting A Message - -The quoting functionality allows us to 'reply' to a specific message without creating a thread out of it. -It adds the other message as context when sending a message and also displays it above the sent message. - -To quote a message, we provide a `quotedMessage` to the `MessageInput`. - -```dart -Message? message; - -// ... -MessageInput( - quotedMessage: message, -), -``` - -This will add the message given above the message about to be sent. - -While you can implement your own functionality to select which message to reply to, the `MessageListView` -widget helps in this case since it has an inbuilt `onMessageSwiped` callback which we can use. - -```dart - -class ChannelPage extends StatefulWidget { - @override - _ChannelPageState createState() => _ChannelPageState(); -} - -class _ChannelPageState extends State { - Message? quotedMessage; - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Column( - children: [ - Expanded( - child: MessageListView( - // ... - onMessageSwiped: (message) { - setState(() { - quotedMessage = message; - }); - }, - ), - ), - MessageInput( - quotedMessage: _quotedMessage, - onQuotedMessageCleared: () { - setState(() => _quotedMessage = null); - }, - ), - ], - ), - ); - } -} -``` - -![](../assets/message_input_quoted_message.png) +:::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 `MessageInput` has two actions: one for attachments and one for commands like Giphy. +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 -MessageInput( +StreamMessageInput( actions: [ InkWell( child: Icon( @@ -146,7 +89,7 @@ This will add on your action to the existing ones. To disable attachments being added to the message, set the `disableAttachments` parameter to true. ```dart -MessageInput( +StreamMessageInput( disableAttachments: true, ), ``` @@ -161,7 +104,7 @@ 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 -MessageInput( +StreamMessageInput( sendButtonLocation: SendButtonLocation.inside, actionsLocation: ActionsLocation.right, ), 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 new file mode 100644 index 00000000..a37670d3 --- /dev/null +++ b/docusaurus/docs/Flutter/stream_chat_flutter/stream_user_list_view.mdx @@ -0,0 +1,93 @@ +--- +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/UserListView-class.html) + +![](../assets/user_list_view.png) + +### 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 + +Let's take a look at an example where we use the widget to autocomplete user names: + +```dart +class UserListPage extends StatefulWidget { + const UserListPage({ + Key? key, + required this.client, + }) : super(key: key); + + final StreamChatClient client; + + @override + State createState() => _UserListPageState(); +} + +class _UserListPageState 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: StreamChannelListView( + controller: _controller, + onChannelTap: (channel) => Navigator.push( + context, + MaterialPageRoute( + builder: (_) => StreamChannel( + channel: channel, + child: const ChannelPage(), + ), + ), + ), + ), + ), + ); +} +``` + +### 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); + }, +), +``` diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx deleted file mode 100644 index 61dfbeb4..00000000 --- a/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: user_list_view -sidebar_position: 7 -title: UserListView ---- - -A Widget For Displaying And Selecting Users - -Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/UserListView-class.html) - -![](../assets/user_list_view.png) - -### 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 `UserListView` displays and allows selection of a list -of users along with multiple display configurations like a list and grid. - -### Basic Example - -Let's take a look at an example where we use the widget to autocomplete user names: - -```dart -class UsersListPage extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Scaffold( - body: UsersBloc( - child: UsersListView( - filter: Filter.notEqual('id', StreamChat.of(context).user!.id), - sort: [ - SortOption( - 'name', - direction: 1, - ), - ], - pagination: PaginationParams( - limit: 25, - ), - ), - ), - ); - } -} -``` - -### Customize The User Items - -You can use your own widget for the user items using the `userItemBuilder` parameter. - -```dart -UsersListView( - // ... - userItemBuilder: (context, user, isSelected) { - return Text(user.name); - }, -), -``` - -### Group Alphabetically - -You can group alphabetically using the `groupAlphabetically` parameter: - -```dart -UsersListView( - //... - groupAlphabetically: true, -), -``` - -### Selecting Users - -The `UserListView` widget allows selecting users in a list by supplying a selected users list and callbacks -for when user items are tapped. - -```dart -Set? selectedUsers = {}; - -UsersListView( - //... - selectedUsers: selectedUsers, - onUserTap: (user, _) { - setState(() { - selectedUsers.add(user); - }); - }, -), -```