diff --git a/docusaurus/docs/Flutter/guides/adding_chat_to_video_livestreams.mdx b/docusaurus/docs/Flutter/guides/adding_chat_to_video_livestreams.mdx index 9e2afb44..cc6e868a 100644 --- a/docusaurus/docs/Flutter/guides/adding_chat_to_video_livestreams.mdx +++ b/docusaurus/docs/Flutter/guides/adding_chat_to_video_livestreams.mdx @@ -40,9 +40,9 @@ Scaffold( child: Column( children: [ Expanded( - child: MessageListView(), + child: StreamMessageListView(), ), - MessageInput(), + StreamMessageInput(), ], ), ), @@ -81,9 +81,9 @@ Scaffold( child: Column( children: [ Expanded( - child: MessageListView(), + child: StreamMessageListView(), ), - MessageInput(), + StreamMessageInput(), ], ), ), diff --git a/docusaurus/docs/Flutter/guides/adding_custom_attachments.mdx b/docusaurus/docs/Flutter/guides/adding_custom_attachments.mdx index 9fe7f6aa..e6b5f686 100644 --- a/docusaurus/docs/Flutter/guides/adding_custom_attachments.mdx +++ b/docusaurus/docs/Flutter/guides/adding_custom_attachments.mdx @@ -13,7 +13,7 @@ own types of attachments through the SDK such as location, audio, etc. This involves doing three things: -1) Rendering the attachment thumbnail in the `MessageInput` +1) Rendering the attachment thumbnail in the `StreamMessageInput` 2) Sending a message with the custom attachment @@ -27,7 +27,7 @@ Let's build an example of location sharing option in the app: ![](../assets/location_sharing_example.jpg) -* Show a "Share Location" button next to MessageInput Textfield. +* Show a "Share Location" button next to StreamMessageInput Textfield. * When the user presses this button, it should fetch the current location coordinates of the user, and send a message on the channel as follows: @@ -53,14 +53,14 @@ Please check their [setup instructions](https://pub.dev/packages/geolocator) on NOTE: If you are testing on iOS simulator, you will need to set some dummy coordinates, as mentioned [here](https://stackoverflow.com/a/31238119/7489541). Also don't forget to enable "location update" capability in background mode, from XCode. -On the receiver end, `location` type attachment should be rendered in map view, in the `MessageListView`. +On the receiver end, `location` type attachment should be rendered in map view, in the `StreamMessageListView`. We are going to use [Google Static Maps API](https://developers.google.com/maps/documentation/maps-static/overview) to render the map in the message. You can use other libraries as well such as [google_maps_flutter](https://pub.dev/packages/google_maps_flutter). First, we add a button which when clicked fetches and shares location into the `MessageInput`: ```dart -MessageInput( +StreamMessageInput( actions: [ InkWell( child: Icon( @@ -146,10 +146,10 @@ Next, we build the Static Maps URL (Add your API key before using the code snipp } ``` -And then modify the `MessageListView` and tell it how to build a location attachment, using the `messageBuilder` property and copying the default message implementation overriding the `customAttachmentBuilders` property: +And then modify the `StreamMessageListView` and tell it how to build a location attachment, using the `messageBuilder` property and copying the default message implementation overriding the `customAttachmentBuilders` property: ```dart -MessageListView( +StreamMessageListView( messageBuilder: (context, details, messages, defaultMessage) { return defaultMessage.copyWith( customAttachmentBuilders: { @@ -179,14 +179,14 @@ To do this, we will: 1) Add an attachment instead of sending a message -2) Customize the `MessageInput` +2) Customize the `StreamMessageInput` First, we add the attachment when the location button is clicked: ```dart - GlobalKey _messageInputKey = GlobalKey(); + GlobalKey _messageInputKey = GlobalKey(); - MessageInput( + StreamMessageInput( key: _messageInputKey, actions: [ InkWell( @@ -219,7 +219,7 @@ First, we add the attachment when the location button is clicked: After this, we can build the thumbnail: ```dart -MessageInput( +StreamMessageInput( key: _messageInputKey, actions: [ InkWell( @@ -259,6 +259,6 @@ MessageInput( ), ``` -And we can see the thumbnails in the MessageInput: +And we can see the thumbnails in the StreamMessageInput: ![](../assets/location_sharing_example_message_thumbnail.jpg) diff --git a/docusaurus/docs/Flutter/guides/customize_message_actions.mdx b/docusaurus/docs/Flutter/guides/customize_message_actions.mdx index c3dc2aba..12cc7715 100644 --- a/docusaurus/docs/Flutter/guides/customize_message_actions.mdx +++ b/docusaurus/docs/Flutter/guides/customize_message_actions.mdx @@ -38,10 +38,10 @@ Additionally, pinning a message requires you to add the roles which are allowed ### Partially remove some message actions For example, if you only want to keep "copy message" and "delete message", -here is how to do it using the `messageBuilder` with our `MessageWidget`. +here is how to do it using the `messageBuilder` with our `StreamMessageWidget`. ```dart -MessageListView( +StreamMessageListView( messageBuilder: (context, details, messages, defaultMessage) { return defaultMessage.copyWith( showFlagButton: false, @@ -61,14 +61,14 @@ The SDK also allows you to add new actions into the dialog. For example, let's suppose you want to introduce a new message action - "Demo Action": -We use the `customActions` parameter of the `MessageWidget` to add extra actions. +We use the `customActions` parameter of the `StreamMessageWidget` to add extra actions. ```dart -MessageListView( +StreamMessageListView( messageBuilder: (context, details, messages, defaultMessage) { return defaultMessage.copyWith( customActions: [ - MessageAction( + StreamMessageAction( leading: Icon(Icons.add), title: Text('Demo Action'), onTap: (message) { diff --git a/docusaurus/docs/Flutter/guides/customize_message_widget.mdx b/docusaurus/docs/Flutter/guides/customize_message_widget.mdx index af7014fb..600f05d1 100644 --- a/docusaurus/docs/Flutter/guides/customize_message_widget.mdx +++ b/docusaurus/docs/Flutter/guides/customize_message_widget.mdx @@ -1,7 +1,7 @@ --- id: customize_message_widget sidebar_position: 11 -title: Customizing The MessageWidget +title: Customizing The StreamMessageWidget --- Customizing Text Messages @@ -11,16 +11,16 @@ Customizing Text Messages Every application provides a unique look and feel to their own messaging interface including and not limited to fonts, colors, and shapes. -This guide details how to customize the `MessageWidget` in the Stream Chat Flutter UI SDK. +This guide details how to customize the `StreamMessageWidget` in the Stream Chat Flutter UI SDK. ### Building Custom Messages -This guide goes into detail about the ability to customize the `MessageWidget`. However, if you want -to customize the default `MessageWidget` in the `MessageListView` provided, you can use the `.copyWith()` method -provided inside the `messageBuilder` parameter of the `MessageListView` like this: +This guide goes into detail about the ability to customize the `StreamMessageWidget`. However, if you want +to customize the default `StreamMessageWidget` in the `StreamMessageListView` provided, you can use the `.copyWith()` method +provided inside the `messageBuilder` parameter of the `StreamMessageListView` like this: ```dart -MessageListView( +StreamMessageListView( messageBuilder: (context, details, messageList, defaultImpl) { // Your implementation of the message here // E.g: return Text(details.message.text ?? ''); @@ -30,8 +30,8 @@ MessageListView( ### Theming -You can customize the `MessageWidget` using the `StreamChatTheme` class, so that you can change the -message theme at the top instead of creating your own `MessageWidget` at the lower implementation level. +You can customize the `StreamMessageWidget` using the `StreamChatTheme` class, so that you can change the +message theme at the top instead of creating your own `StreamMessageWidget` at the lower implementation level. There are several things you can change in the theme including text styles and colors of various elements. @@ -49,13 +49,13 @@ Here is an example: StreamChatThemeData( /// Sets theme for user's messages - ownMessageTheme: MessageThemeData( + ownMessageTheme: StreamMessageThemeData( messageBackgroundColor: colorTheme.textHighEmphasis, ), /// Sets theme for received messages - otherMessageTheme: MessageThemeData( - avatarTheme: AvatarThemeData( + otherMessageTheme: StreamMessageThemeData( + avatarTheme: StreamAvatarThemeData( borderRadius: BorderRadius.circular(8), ), ), @@ -67,11 +67,11 @@ StreamChatThemeData( #### Change message text style -The `MessageWidget` has multiple `Text` widgets that you can manipulate the styles of. The three main +The `StreamMessageWidget` has multiple `Text` widgets that you can manipulate the styles of. The three main are the actual message text, user name, message links, and the message timestamp. ```dart -MessageThemeData( +StreamMessageThemeData( messageTextStyle: TextStyle(...), createdAtStyle: TextStyle(...), messageAuthorStyle: TextStyle(...), @@ -86,8 +86,8 @@ MessageThemeData( You can change the attributes of the avatar (if displayed) using the `avatarTheme` property. ```dart -MessageThemeData( - avatarTheme: AvatarThemeData( +StreamMessageThemeData( + avatarTheme: StreamAvatarThemeData( borderRadius: BorderRadius.circular(8), ), ) @@ -100,7 +100,7 @@ MessageThemeData( You also customize the reactions attached to every message using the theme. ```dart -MessageThemeData( +StreamMessageThemeData( reactionsBackgroundColor: Colors.red, reactionsBorderColor: Colors.redAccent, reactionsMaskColor: Colors.pink, @@ -111,12 +111,12 @@ MessageThemeData( ### Changing Message Actions -When a message is long pressed, the `MessageActionsModal` is shown. +When a message is long pressed, the `StreamMessageActionsModal` is shown. -The `MessageWidget` allows showing or hiding some options if you so choose. +The `StreamMessageWidget` allows showing or hiding some options if you so choose. ```dart -MessageWidget( +StreamMessageWidget( ... showUsername = true, showTimestamp = true, @@ -137,11 +137,11 @@ MessageWidget( ### Building attachments -The `customAttachmentBuilder` property allows you to build any kind of attachment (inbuilt or custom) +The `customAttachmentBuilders` property allows you to build any kind of attachment (inbuilt or custom) in your own way. While a separate guide is written for this, it is included here because of relevance. ```dart -MessageListView( +StreamMessageListView( messageBuilder: (context, details, messages, defaultMessage) { return defaultMessage.copyWith( customAttachmentBuilders: { @@ -163,7 +163,7 @@ MessageListView( ### Widget Builders -Some parameters allow you to construct your own widget in place of some elements in the `MessageWidget`. +Some parameters allow you to construct your own widget in place of some elements in the `StreamMessageWidget`. These are: * `userAvatarBuilder` : Allows user to substitute their own widget in place of the user avatar. @@ -173,7 +173,7 @@ These are: * `deletedBottomRowBuilder` : Allows user to substitute their own widget in the bottom of the message when deleted. ```dart -MessageWidget( +StreamMessageWidget( ... textBuilder: (context, message) { // Add your own text implementation here. diff --git a/docusaurus/docs/Flutter/guides/customize_text_messages.mdx b/docusaurus/docs/Flutter/guides/customize_text_messages.mdx index a2d37333..57b3301d 100644 --- a/docusaurus/docs/Flutter/guides/customize_text_messages.mdx +++ b/docusaurus/docs/Flutter/guides/customize_text_messages.mdx @@ -11,38 +11,38 @@ Customizing Text Messages Every application provides a unique look and feel to their own messaging interface including and not limited to fonts, colors, and shapes. -This guide details how to customize message text in the `MessageListView` / `MessageWidget` in the +This guide details how to customize message text in the `StreamMessageListView` / `StreamMessageWidget` in the Stream Chat Flutter UI SDK. :::note -This guide is specifically for the `MessageListView` but if you intend to display a `MessageWidget` +This guide is specifically for the `StreamMessageListView` but if you intend to display a `StreamMessageWidget` separately, follow the same process without the `.copyWith` and use the default constructor instead. ::: -### Basics of customizing a `MessageWidget` +### Basics of customizing a `StreamMessageWidget` -First, add a `MessageListView` in the appropriate place where you intend to display messages from a +First, add a `StreamMessageListView` in the appropriate place where you intend to display messages from a channel. ```dart -MessageListView( +StreamMessageListView( ... ) ``` Now, we use the `messageBuilder` parameter to build a custom message. The builder function also provides -the default implementation of the `MessageWidget` so that we can change certain aspects of the widget +the default implementation of the `StreamMessageWidget` so that we can change certain aspects of the widget without redoing all of the default parameters. :::note -In earlier versions of the SDK, some `MessageWidget` parameters were exposed directly through the `MessageListView`, +In earlier versions of the SDK, some `StreamMessageWidget` parameters were exposed directly through the `StreamMessageListView`, however, this quickly becomes hard to maintain as more parameters and customizations are added to the -`MessageWidget`. Newer version utilise a cleaner interface to change the parameters by supplying a +`StreamMessageWidget`. Newer version utilise a cleaner interface to change the parameters by supplying a default message implementation as aforementioned. ::: ```dart -MessageListView( +StreamMessageListView( ... messageBuilder: (context, messageDetails, messageList, defaultWidget) { return defaultWidget; @@ -53,7 +53,7 @@ MessageListView( We use `.copyWith()` to customize the widget: ```dart -MessageListView( +StreamMessageListView( ... messageBuilder: (context, messageDetails, messageList, defaultWidget) { return defaultWidget.copyWith( @@ -66,28 +66,28 @@ MessageListView( ### Customizing text If you intend to simply change the theme for the text, you need not recreate the whole widget. The -`MessageWidget` has a `messageTheme` parameter that allows you to pass the theme for most aspects +`StreamMessageWidget` has a `messageTheme` parameter that allows you to pass the theme for most aspects of the message. ```dart -MessageListView( +StreamMessageListView( ... messageBuilder: (context, messageDetails, messageList, defaultWidget) { return defaultWidget.copyWith( - messageTheme: MessageTheme( + messageTheme: StreamMessageThemeData( ... - messageText: TextStyle(), + messageTextStyle: TextStyle(), ), ); }, ) ``` -If you want to replace the entire text widget in the `MessageWidget`, you can use the `textBuilder` +If you want to replace the entire text widget in the `StreamMessageWidget`, you can use the `textBuilder` parameter which provides a builder for creating a widget to substitute the default text.parameter ```dart -MessageListView( +StreamMessageListView( ... messageBuilder: (context, messageDetails, messageList, defaultWidget) { return defaultWidget.copyWith( @@ -101,10 +101,10 @@ MessageListView( ### Adding Hashtags -To add elements like hashtags, we can override the `textBuilder` in the MessageWidget: +To add elements like hashtags, we can override the `textBuilder` in the StreamMessageWidget: ```dart -MessageListView( +StreamMessageListView( ... messageBuilder: (context, messageDetails, messageList, defaultWidget) { return defaultWidget.copyWith( diff --git a/docusaurus/docs/Flutter/guides/end_to_end_chat_encryption.mdx b/docusaurus/docs/Flutter/guides/end_to_end_chat_encryption.mdx index 8a85c6a5..8a463af4 100644 --- a/docusaurus/docs/Flutter/guides/end_to_end_chat_encryption.mdx +++ b/docusaurus/docs/Flutter/guides/end_to_end_chat_encryption.mdx @@ -190,7 +190,7 @@ await client.connectUser( Now you will use the `encryptMessage()` function created in the previous steps to encrypt the message. -To do that, you need to make some minor changes to the **MessageInput** widget. +To do that, you need to make some minor changes to the **StreamMessageInput** widget. ```dart final receiverJwk = receiver.extraData['publicKey']; @@ -200,7 +200,7 @@ final derivedKey = await deriveKey(keyPair.privateKey, receiverJwk); ``` ```dart -MessageInput( +StreamMessageInput( ... @@ -223,10 +223,10 @@ Here, you have used it to encrypt the message before sending it to Stream’s ba Now, it’s time to decrypt the message and present it in a human-readable format to the receiver. -You can customize the **MessageListView** widget to have a custom `messagebuilder`, that can decrypt the message. +You can customize the **StreamMessageListView** widget to have a custom `messagebuilder`, that can decrypt the message. ```dart -MessageListView( +StreamMessageListView( ... messageBuilder: (context, messageDetails, currentMessages, defaultWidget) { // Retrieving the message from details