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

StreamMessageInput

Browse Source
This commit is contained in:
Salvatore Giordano
2022-04-28 14:50:14 +02:00
parent 6edeca73da
commit bc6f392f5d
1 changed files with 17 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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,
), ),