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

Migrated guides in the docs to v4

Browse Source
This commit is contained in:
Ayush Shekhar
2022-04-28 16:03:13 +05:30
parent ec6ac99f36
commit 1fedb3005c
6 changed files with 65 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docusaurus/docs/Flutter/guides/adding_chat_to_video_livestreams.mdx
+4 -4
View File
@@ -40,9 +40,9 @@ Scaffold(
child: Column( child: Column(
children: [ children: [
Expanded( Expanded(
child: MessageListView(), child: StreamMessageListView(),
), ),
MessageInput(), StreamMessageInput(),
], ],
), ),
), ),
@@ -81,9 +81,9 @@ Scaffold(
child: Column( child: Column(
children: [ children: [
Expanded( Expanded(
child: MessageListView(), child: StreamMessageListView(),
), ),
MessageInput(), StreamMessageInput(),
], ],
), ),
), ),
docusaurus/docs/Flutter/guides/adding_custom_attachments.mdx
+11 -11
View File
@@ -13,7 +13,7 @@ own types of attachments through the SDK such as location, audio, etc.
This involves doing three things: 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 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) ![](../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: * 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). 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. 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. 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). 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`: First, we add a button which when clicked fetches and shares location into the `MessageInput`:
```dart ```dart
MessageInput( StreamMessageInput(
actions: [ actions: [
InkWell( InkWell(
child: Icon( 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 ```dart
MessageListView( StreamMessageListView(
messageBuilder: (context, details, messages, defaultMessage) { messageBuilder: (context, details, messages, defaultMessage) {
return defaultMessage.copyWith( return defaultMessage.copyWith(
customAttachmentBuilders: { customAttachmentBuilders: {
@@ -179,14 +179,14 @@ To do this, we will:
1) Add an attachment instead of sending a message 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: First, we add the attachment when the location button is clicked:
```dart ```dart
GlobalKey<MessageInputState> _messageInputKey = GlobalKey(); GlobalKey<StreamMessageInputState> _messageInputKey = GlobalKey();
MessageInput( StreamMessageInput(
key: _messageInputKey, key: _messageInputKey,
actions: [ actions: [
InkWell( InkWell(
@@ -219,7 +219,7 @@ First, we add the attachment when the location button is clicked:
After this, we can build the thumbnail: After this, we can build the thumbnail:
```dart ```dart
MessageInput( StreamMessageInput(
key: _messageInputKey, key: _messageInputKey,
actions: [ actions: [
InkWell( 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) ![](../assets/location_sharing_example_message_thumbnail.jpg)
docusaurus/docs/Flutter/guides/customize_message_actions.mdx
+5 -5
View File
@@ -38,10 +38,10 @@ Additionally, pinning a message requires you to add the roles which are allowed
### Partially remove some message actions ### Partially remove some message actions
For example, if you only want to keep "copy message" and "delete message", 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 ```dart
MessageListView( StreamMessageListView(
messageBuilder: (context, details, messages, defaultMessage) { messageBuilder: (context, details, messages, defaultMessage) {
return defaultMessage.copyWith( return defaultMessage.copyWith(
showFlagButton: false, 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": 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 ```dart
MessageListView( StreamMessageListView(
messageBuilder: (context, details, messages, defaultMessage) { messageBuilder: (context, details, messages, defaultMessage) {
return defaultMessage.copyWith( return defaultMessage.copyWith(
customActions: [ customActions: [
MessageAction( StreamMessageAction(
leading: Icon(Icons.add), leading: Icon(Icons.add),
title: Text('Demo Action'), title: Text('Demo Action'),
onTap: (message) { onTap: (message) {
docusaurus/docs/Flutter/guides/customize_message_widget.mdx
+23 -23
View File
@@ -1,7 +1,7 @@
--- ---
id: customize_message_widget id: customize_message_widget
sidebar_position: 11 sidebar_position: 11
title: Customizing The MessageWidget title: Customizing The StreamMessageWidget
--- ---
Customizing Text Messages 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 Every application provides a unique look and feel to their own messaging interface including and not
limited to fonts, colors, and shapes. 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 ### Building Custom Messages
This guide goes into detail about the ability to customize the `MessageWidget`. However, if you want This guide goes into detail about the ability to customize the `StreamMessageWidget`. However, if you want
to customize the default `MessageWidget` in the `MessageListView` provided, you can use the `.copyWith()` method to customize the default `StreamMessageWidget` in the `StreamMessageListView` provided, you can use the `.copyWith()` method
provided inside the `messageBuilder` parameter of the `MessageListView` like this: provided inside the `messageBuilder` parameter of the `StreamMessageListView` like this:
```dart ```dart
MessageListView( StreamMessageListView(
messageBuilder: (context, details, messageList, defaultImpl) { messageBuilder: (context, details, messageList, defaultImpl) {
// Your implementation of the message here // Your implementation of the message here
// E.g: return Text(details.message.text ?? ''); // E.g: return Text(details.message.text ?? '');
@@ -30,8 +30,8 @@ MessageListView(
### Theming ### Theming
You can customize the `MessageWidget` using the `StreamChatTheme` class, so that you can change the 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 `MessageWidget` at the lower implementation level. 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. 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( StreamChatThemeData(
/// Sets theme for user's messages /// Sets theme for user's messages
ownMessageTheme: MessageThemeData( ownMessageTheme: StreamMessageThemeData(
messageBackgroundColor: colorTheme.textHighEmphasis, messageBackgroundColor: colorTheme.textHighEmphasis,
), ),
/// Sets theme for received messages /// Sets theme for received messages
otherMessageTheme: MessageThemeData( otherMessageTheme: StreamMessageThemeData(
avatarTheme: AvatarThemeData( avatarTheme: StreamAvatarThemeData(
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
), ),
@@ -67,11 +67,11 @@ StreamChatThemeData(
#### Change message text style #### 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. are the actual message text, user name, message links, and the message timestamp.
```dart ```dart
MessageThemeData( StreamMessageThemeData(
messageTextStyle: TextStyle(...), messageTextStyle: TextStyle(...),
createdAtStyle: TextStyle(...), createdAtStyle: TextStyle(...),
messageAuthorStyle: TextStyle(...), messageAuthorStyle: TextStyle(...),
@@ -86,8 +86,8 @@ MessageThemeData(
You can change the attributes of the avatar (if displayed) using the `avatarTheme` property. You can change the attributes of the avatar (if displayed) using the `avatarTheme` property.
```dart ```dart
MessageThemeData( StreamMessageThemeData(
avatarTheme: AvatarThemeData( avatarTheme: StreamAvatarThemeData(
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
) )
@@ -100,7 +100,7 @@ MessageThemeData(
You also customize the reactions attached to every message using the theme. You also customize the reactions attached to every message using the theme.
```dart ```dart
MessageThemeData( StreamMessageThemeData(
reactionsBackgroundColor: Colors.red, reactionsBackgroundColor: Colors.red,
reactionsBorderColor: Colors.redAccent, reactionsBorderColor: Colors.redAccent,
reactionsMaskColor: Colors.pink, reactionsMaskColor: Colors.pink,
@@ -111,12 +111,12 @@ MessageThemeData(
### Changing Message Actions ### 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 ```dart
MessageWidget( StreamMessageWidget(
... ...
showUsername = true, showUsername = true,
showTimestamp = true, showTimestamp = true,
@@ -137,11 +137,11 @@ MessageWidget(
### Building attachments ### 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. in your own way. While a separate guide is written for this, it is included here because of relevance.
```dart ```dart
MessageListView( StreamMessageListView(
messageBuilder: (context, details, messages, defaultMessage) { messageBuilder: (context, details, messages, defaultMessage) {
return defaultMessage.copyWith( return defaultMessage.copyWith(
customAttachmentBuilders: { customAttachmentBuilders: {
@@ -163,7 +163,7 @@ MessageListView(
### Widget Builders ### 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: These are:
* `userAvatarBuilder` : Allows user to substitute their own widget in place of the user avatar. * `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. * `deletedBottomRowBuilder` : Allows user to substitute their own widget in the bottom of the message when deleted.
```dart ```dart
MessageWidget( StreamMessageWidget(
... ...
textBuilder: (context, message) { textBuilder: (context, message) {
// Add your own text implementation here. // Add your own text implementation here.
docusaurus/docs/Flutter/guides/customize_text_messages.mdx
+18 -18
View File
@@ -11,38 +11,38 @@ Customizing Text Messages
Every application provides a unique look and feel to their own messaging interface including and not Every application provides a unique look and feel to their own messaging interface including and not
limited to fonts, colors, and shapes. 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. Stream Chat Flutter UI SDK.
:::note :::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. 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. channel.
```dart ```dart
MessageListView( StreamMessageListView(
... ...
) )
``` ```
Now, we use the `messageBuilder` parameter to build a custom message. The builder function also provides 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. without redoing all of the default parameters.
:::note :::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 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. default message implementation as aforementioned.
::: :::
```dart ```dart
MessageListView( StreamMessageListView(
... ...
messageBuilder: (context, messageDetails, messageList, defaultWidget) { messageBuilder: (context, messageDetails, messageList, defaultWidget) {
return defaultWidget; return defaultWidget;
@@ -53,7 +53,7 @@ MessageListView(
We use `.copyWith()` to customize the widget: We use `.copyWith()` to customize the widget:
```dart ```dart
MessageListView( StreamMessageListView(
... ...
messageBuilder: (context, messageDetails, messageList, defaultWidget) { messageBuilder: (context, messageDetails, messageList, defaultWidget) {
return defaultWidget.copyWith( return defaultWidget.copyWith(
@@ -66,28 +66,28 @@ MessageListView(
### Customizing text ### Customizing text
If you intend to simply change the theme for the text, you need not recreate the whole widget. The 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. of the message.
```dart ```dart
MessageListView( StreamMessageListView(
... ...
messageBuilder: (context, messageDetails, messageList, defaultWidget) { messageBuilder: (context, messageDetails, messageList, defaultWidget) {
return defaultWidget.copyWith( 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 parameter which provides a builder for creating a widget to substitute the default text.parameter
```dart ```dart
MessageListView( StreamMessageListView(
... ...
messageBuilder: (context, messageDetails, messageList, defaultWidget) { messageBuilder: (context, messageDetails, messageList, defaultWidget) {
return defaultWidget.copyWith( return defaultWidget.copyWith(
@@ -101,10 +101,10 @@ MessageListView(
### Adding Hashtags ### 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 ```dart
MessageListView( StreamMessageListView(
... ...
messageBuilder: (context, messageDetails, messageList, defaultWidget) { messageBuilder: (context, messageDetails, messageList, defaultWidget) {
return defaultWidget.copyWith( return defaultWidget.copyWith(
docusaurus/docs/Flutter/guides/end_to_end_chat_encryption.mdx
+4 -4
View File
@@ -190,7 +190,7 @@ await client.connectUser(
Now you will use the `encryptMessage()` function created in the previous steps to encrypt the message. 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 ```dart
final receiverJwk = receiver.extraData['publicKey']; final receiverJwk = receiver.extraData['publicKey'];
@@ -200,7 +200,7 @@ final derivedKey = await deriveKey(keyPair.privateKey, receiverJwk);
``` ```
```dart ```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. 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 ```dart
MessageListView( StreamMessageListView(
... ...
messageBuilder: (context, messageDetails, currentMessages, defaultWidget) { messageBuilder: (context, messageDetails, currentMessages, defaultWidget) {
// Retrieving the message from details // Retrieving the message from details