112 lines
3.0 KiB
Plaintext
112 lines
3.0 KiB
Plaintext
---
|
|
id: message_input
|
|
sidebar_position: 6
|
|
title: MessageInput
|
|
---
|
|
|
|
A Widget Dealing With Everything Related To Sending A Message
|
|
|
|
### Background
|
|
|
|
In Stream Chat, we can send messages in a channel. However, sending a message isn't as simple as adding
|
|
a `TextField` and logic for sending a message. It involves additional processes like addition of media,
|
|
quoting a messages, 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
|
|
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`:
|
|
|
|
```dart
|
|
class ChannelPage extends StatelessWidget {
|
|
const ChannelPage({
|
|
Key key,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: ChannelHeader(),
|
|
body: Column(
|
|
children: <Widget>[
|
|
Expanded(
|
|
child: MessageListView(
|
|
threadBuilder: (_, parentMessage) {
|
|
return ThreadPage(
|
|
parent: parentMessage,
|
|
);
|
|
},
|
|
),
|
|
),
|
|
MessageInput(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
It is common to put this widget in the same page of a [MessageListView] 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);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
``` |