From bc6f392f5dc6b6878a5e8ad3e3e56c97477bc032 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 28 Apr 2022 14:50:01 +0200 Subject: [PATCH] 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, ),