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(
children: [
Expanded(
child: MessageListView(),
child: StreamMessageListView(),
),
MessageInput(),
StreamMessageInput(),
],
),
),
@@ -81,9 +81,9 @@ Scaffold(
child: Column(
children: [
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:
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<MessageInputState> _messageInputKey = GlobalKey();
GlobalKey<StreamMessageInputState> _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)
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
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) {
docusaurus/docs/Flutter/guides/customize_message_widget.mdx
+23 -23
View File
@@ -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.
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
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(
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.
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