talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'docs/v4' of https://github.com/GetStream/stream-chat-flutter into docs/v4

Browse Source
This commit is contained in:
Ayush Shekhar
2022-04-28 18:45:05 +05:30
parent 936872cb55 0568f81a20
commit 5c5e0be210
4 changed files with 114 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_list_view.mdx
+4
View File
@@ -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` ONLY the channels that the user is a part of. This section goes into setting up and using a `StreamChannelListView`
widget. 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 ### 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. 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.
docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx → docusaurus/docs/Flutter/stream_chat_flutter/stream_message_input.mdx
+17 -74
View File
@@ -1,12 +1,12 @@
--- ---
id: message_input id: stream_message_input
sidebar_position: 6 sidebar_position: 6
title: MessageInput title: StreamMessageInput
--- ---
A Widget Dealing With Everything Related To Sending A Message 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) ![](../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 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. 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. needs - and allows you to use it out of the box.
### Basic Example ### Basic Example
A `StreamChannel` is required above the widget tree in which the `MessageInput` is rendered since the channel is 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 `MessageInput`: where the messages sent actually go. Let's look at a common example of how we could use the `StreamMessageInput`:
```dart ```dart
class ChannelPage extends StatelessWidget { class ChannelPage extends StatelessWidget {
@@ -34,11 +34,11 @@ class ChannelPage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: ChannelHeader(), appBar: StreaChannelHeader(),
body: Column( body: Column(
children: <Widget>[ children: <Widget>[
Expanded( Expanded(
child: MessageListView( child: StreamMessageListView(
threadBuilder: (_, parentMessage) { threadBuilder: (_, parentMessage) {
return ThreadPage( return ThreadPage(
parent: parentMessage, 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 :::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`.
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<ChannelPage> {
Message? quotedMessage;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: MessageListView(
// ...
onMessageSwiped: (message) {
setState(() {
quotedMessage = message;
});
},
),
),
MessageInput(
quotedMessage: _quotedMessage,
onQuotedMessageCleared: () {
setState(() => _quotedMessage = null);
},
),
],
),
);
}
}
```
![](../assets/message_input_quoted_message.png)
### Adding Custom Actions ### 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: To add your own action, we use the `actions` parameter like this:
```dart ```dart
MessageInput( StreamMessageInput(
actions: [ actions: [
InkWell( InkWell(
child: Icon( 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. To disable attachments being added to the message, set the `disableAttachments` parameter to true.
```dart ```dart
MessageInput( StreamMessageInput(
disableAttachments: true, 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: For example, if we want the actions on the right and the send button inside the TextField, we can do:
```dart ```dart
MessageInput( StreamMessageInput(
sendButtonLocation: SendButtonLocation.inside, sendButtonLocation: SendButtonLocation.inside,
actionsLocation: ActionsLocation.right, actionsLocation: ActionsLocation.right,
), ),
docusaurus/docs/Flutter/stream_chat_flutter/stream_user_list_view.mdx
+93
View File
@@ -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<UserListPage> createState() => _UserListPageState();
}
class _UserListPageState extends State<UserListPage> {
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);
},
),
```
docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx
-88
View File
@@ -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<User>? selectedUsers = {};
UsersListView(
//...
selectedUsers: selectedUsers,
onUserTap: (user, _) {
setState(() {
selectedUsers.add(user);
});
},
),
```