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`
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.
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
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: <Widget>[
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<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)
:::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,
),
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);
});
},
),
```