From bc6f392f5dc6b6878a5e8ad3e3e56c97477bc032 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 28 Apr 2022 14:50:01 +0200 Subject: [PATCH 1/3] StreamMessageInput --- ...age_input.mdx => stream_message_input.mdx} | 91 ++++--------------- 1 file changed, 17 insertions(+), 74 deletions(-) rename docusaurus/docs/Flutter/stream_chat_flutter/{message_input.mdx => stream_message_input.mdx} (52%) 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, ), From 4372b07e488cced7810db2294131d7bdc99028c1 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 28 Apr 2022 14:58:32 +0200 Subject: [PATCH 2/3] StreamUserListView --- .../stream_channel_list_view.mdx | 4 + .../stream_chat_flutter/user_list_view.mdx | 113 +++++++++--------- 2 files changed, 63 insertions(+), 54 deletions(-) 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/user_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx index 61dfbeb4..a37670d3 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx @@ -1,7 +1,7 @@ --- -id: user_list_view +id: stream_user_list_view sidebar_position: 7 -title: UserListView +title: StreamUserListView --- A Widget For Displaying And Selecting Users @@ -13,76 +13,81 @@ Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_ ### 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. +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 UsersListPage extends StatelessWidget { +class UserListPage extends StatefulWidget { + const UserListPage({ + Key? key, + required this.client, + }) : super(key: key); + + final StreamChatClient client; + @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, + 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(), + ), + ), ), - ], - pagination: PaginationParams( - limit: 25, ), ), - ), - ); - } + ); } ``` ### Customize The User Items -You can use your own widget for the user items using the `userItemBuilder` parameter. +You can use your own widget for the user items using the `itemBuilder` parameter. ```dart -UsersListView( +StreamUsersListView( // ... - userItemBuilder: (context, user, isSelected) { - return Text(user.name); + itemBuilder: (context, users, index, defaultWidget) { + return Text(user[index].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); - }); - }, -), -``` From 0568f81a202728484f1ddc401b745f4623bde20e Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 28 Apr 2022 14:58:48 +0200 Subject: [PATCH 3/3] rename file --- .../{user_list_view.mdx => stream_user_list_view.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docusaurus/docs/Flutter/stream_chat_flutter/{user_list_view.mdx => stream_user_list_view.mdx} (100%) diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/stream_user_list_view.mdx similarity index 100% rename from docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx rename to docusaurus/docs/Flutter/stream_chat_flutter/stream_user_list_view.mdx