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

fix(doc): fix broken documentation snippets

Browse Source
This commit is contained in:
Efthymis Sarmpanis
2023-10-11 15:05:12 +03:00
parent 31950419ee
commit b4dc9defd1
33 changed files with 222 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docusaurus/docs/Flutter/02-customization/01-custom-widgets/01-customize_message_widget.mdx
+3 -2
View File
@@ -21,8 +21,9 @@ provided inside the `messageBuilder` parameter of the `StreamMessageListView` li
```dart
StreamMessageListView(
messageBuilder: (context, details, messageList, defaultImpl) {
// Your implementation of the message here
// E.g: return Text(details.message.text ?? '');
return defaultWidget.copyWith(
...
);
},
),
```
docusaurus/docs/Flutter/02-customization/01-custom-widgets/02-customize_text_messages.mdx
+20 -15
View File
@@ -91,7 +91,7 @@ StreamMessageListView(
messageBuilder: (context, messageDetails, messageList, defaultWidget) {
return defaultWidget.copyWith(
textBuilder: (context, message) {
return Text(message.text);
return Text(message.text ?? '');
},
);
},
@@ -108,14 +108,16 @@ StreamMessageListView(
messageBuilder: (context, messageDetails, messageList, defaultWidget) {
return defaultWidget.copyWith(
textBuilder: (context, message) {
final text = _replaceHashtags(message.text).replaceAll('\n', '\\\n');
final text = _replaceHashtags(message.text)?.replaceAll('\n', '\\\n');
final messageTheme = StreamChatTheme.of(context).ownMessageTheme;
if (text == null) return const SizedBox();
return MarkdownBody(
data: text,
onTapLink: (
String link,
String href,
String? href,
String title,
) {
// Do something with tapped hashtag
@@ -123,16 +125,16 @@ StreamMessageListView(
styleSheet: MarkdownStyleSheet.fromTheme(
Theme.of(context).copyWith(
textTheme: Theme.of(context).textTheme.apply(
bodyColor: messageTheme.messageText.color,
decoration: messageTheme.messageText.decoration,
decorationColor: messageTheme.messageText.decorationColor,
decorationStyle: messageTheme.messageText.decorationStyle,
fontFamily: messageTheme.messageText.fontFamily,
bodyColor: messageTheme.messageTextStyle?.color,
decoration: messageTheme.messageTextStyle?.decoration,
decorationColor: messageTheme.messageTextStyle?.decorationColor,
decorationStyle: messageTheme.messageTextStyle?.decorationStyle,
fontFamily: messageTheme.messageTextStyle?.fontFamily,
),
),
).copyWith(
a: messageTheme.messageLinks,
p: messageTheme.messageText,
a: messageTheme.messageLinksStyle,
p: messageTheme.messageTextStyle,
),
);
},
@@ -140,13 +142,16 @@ StreamMessageListView(
},
)
String _replaceHashtags(String text) {
RegExp exp = new RegExp(r"\B#\w\w+");
String? _replaceHashtags(String? text) {
if (text == null) return null;
final exp = RegExp(r"\B#\w\w+");
String result = text;
exp.allMatches(text).forEach((match){
text = text.replaceAll(
'${match.group(0)}', '[${match.group(0)}](${match.group(0).replaceAll(' ', '')})');
text = text!.replaceAll(
'${match.group(0)}', '[${match.group(0)}](${match.group(0)?.replaceAll(' ', '')})');
});
return text;
return result;
}
```
docusaurus/docs/Flutter/02-customization/01-custom-widgets/03-customize_message_actions.mdx
+2 -2
View File
@@ -68,8 +68,8 @@ StreamMessageListView(
return defaultMessage.copyWith(
customActions: [
StreamMessageAction(
leading: Icon(Icons.add),
title: Text('Demo Action'),
leading: const Icon(Icons.add),
title: const Text('Demo Action'),
onTap: (message) {
/// Complete action here
},
docusaurus/docs/Flutter/02-customization/01-custom-widgets/04-adding_custom_attachments.mdx
+31 -28
View File
@@ -35,9 +35,9 @@ Message(
text: 'This is my location',
attachments: [
Attachment(
uploadState: UploadState.success(),
uploadState: const UploadState.success(),
type: 'location',
extraData: {
extraData: const {
'latitude': 'fetched_latitude',
'longitude': 'fetched_longitude',
},
@@ -62,14 +62,13 @@ First, we add a button which when clicked fetches and shares location into the `
StreamMessageInput(
actions: [
InkWell(
child: Icon(
child: const Icon(
Icons.location_on,
size: 20.0,
color: StreamChatTheme.of(context).colorTheme.grey,
size: 20,
color: Colors.grey,
),
onTap: () {
var channel = StreamChannel.of(context).channel;
var user = StreamChat.of(context).user;
final channel = StreamChannel.of(context).channel;
_determinePosition().then((value) {
channel.sendMessage(
@@ -77,7 +76,7 @@ StreamMessageInput(
text: 'This is my location',
attachments: [
Attachment(
uploadState: UploadState.success(),
uploadState: const UploadState.success(),
type: 'location',
extraData: {
'latitude': value.latitude.toString(),
@@ -126,8 +125,7 @@ Next, we build the Static Maps URL (Add your API key before using the code snipp
```dart
String _buildMapAttachment(String lat, String long) {
var baseURL = 'https://maps.googleapis.com/maps/api/staticmap?';
var url = Uri(
final url = Uri(
scheme: 'https',
host: 'maps.googleapis.com',
port: 443,
@@ -155,8 +153,8 @@ StreamMessageListView(
'location': (context, message, attachments) {
final attachmentWidget = Image.network(
_buildMapAttachment(
attachments[0].extraData['latitude'],
attachments[0].extraData['longitude'],
attachments[0].extraData['latitude'].toString(),
attachments[0].extraData['longitude'].toString(),
),
);
@@ -194,14 +192,14 @@ First, we add the attachment when the location button is clicked:
InkWell(
child: Icon(
Icons.location_on,
size: 20.0,
color: StreamChatTheme.of(context).colorTheme.grey,
size: 20,
color: Colors.grey,
),
onTap: () {
_determinePosition().then((value) {
_messageInputController.addAttachment(
Attachment(
uploadState: UploadState.success(),
uploadState: const UploadState.success(),
type: 'location',
extraData: {
'latitude': value.latitude.toString(),
@@ -227,14 +225,14 @@ StreamMessageInput(
InkWell(
child: Icon(
Icons.location_on,
size: 20.0,
color: StreamChatTheme.of(context).colorTheme.grey,
size: 20,
color: Colors.grey,
),
onTap: () {
_determinePosition().then((value) {
_messageInputController.addAttachment(
Attachment(
uploadState: UploadState.success(),
uploadState: const UploadState.success(),
type: 'location',
extraData: {
'latitude': value.latitude.toString(),
@@ -248,16 +246,21 @@ StreamMessageInput(
},
),
],
attachmentThumbnailBuilders: {
'location': (context, attachment) {
return Image.network(
_buildMapAttachment(
attachment.extraData['latitude'],
attachment.extraData['longitude'],
),
);
},
},
mediaAttachmentBuilder: (
BuildContext context,
Attachment attachment,
ValueSetter<Attachment>? onRemovePressed,
) {
if (attachment.type == 'location') {
return Image.network(
_buildMapAttachment(
attachment.extraData['latitude'].toString(),
attachment.extraData['longitude'].toString(),
),
);
}
return const SizedBox();
},
),
```
docusaurus/docs/Flutter/02-customization/01-custom-widgets/05-customize_attachment_picker_modal.mdx
+10 -7
View File
@@ -25,11 +25,14 @@ The initial attachments can be passed to the Attachment Picker Modal in two ways
* By passing the `initialAttachments` parameter.
```dart
StreamMessageInputController _messageInputController =
StreamMessageInputController();
...
showStreamAttachmentPickerModalBottomSheet(
context: context,
initialAttachments: [
// Pass the initial attachments to the modal here if any are available already (optional)
...messageInputController.attachments,
..._messageInputController.attachments,
],
);
```
@@ -65,7 +68,7 @@ However, you can also customize the options by passing the `customOptions` param
customOptions: [
// Pass the custom attachment picker options here
AttachmentPickerOption(
icon: Icon(Icons.audiotrack),
icon: const Icon(Icons.audiotrack),
supportedTypes: [AttachmentPickerType.audios],
optionViewBuilder: (context, attachmentPickerController) {
return AudioPicker(
@@ -87,7 +90,7 @@ The size of the attachment thumbnail item shown in the gallery picker can be def
```dart
showStreamAttachmentPickerModalBottomSheet(
context: context,
attachmentThumbnailSize: ThumbnailSize.square(600),
attachmentThumbnailSize: const ThumbnailSize.square(600),
);
```
@@ -121,13 +124,13 @@ Possible values are between 0 and 100.
The scale of the attachment thumbnail item shown in the gallery picker can be defined by passing the `attachmentThumbnailScale` parameter.
For example, if this is 2.0, it means that there are four image pixels for every one logical pixel, and the image's actual width and height are
For example, if this is 2, it means that there are four image pixels for every one logical pixel, and the image's actual width and height are
double the height and width that should be used when painting the image.
```dart
showStreamAttachmentPickerModalBottomSheet(
context: context,
attachmentThumbnailScale: 2.0,
attachmentThumbnailScale: 2,
);
```
@@ -145,13 +148,13 @@ The `showStreamAttachmentPickerModalBottomSheet` function also accepts the param
isDismissible: true,
clipBehavior: Clip.antiAlias,
barrierColor: Colors.black.withOpacity(0.5),
constraints: BoxConstraints(
constraints: const BoxConstraints(
maxHeight: 500,
maxWidth: 500,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(16.0),
top: Radius.circular(16),
),
),
);
docusaurus/docs/Flutter/02-customization/01-custom-widgets/06-autocomplete_triggers.mdx
+3 -3
View File
@@ -63,19 +63,19 @@ class StreamEmojiAutocompleteOptions extends StatelessWidget {
horizontalTitleGap: 0,
leading: Text(
emoji.char,
style: themeData.textTheme.headline6!.copyWith(
style: themeData.textTheme.titleLarge!.copyWith(
fontSize: 24,
),
),
title: SubstringHighlight(
text: emoji.shortName,
term: query,
textStyleHighlight: themeData.textTheme.headline6!.copyWith(
textStyleHighlight: themeData.textTheme.titleLarge!.copyWith(
color: Colors.yellow,
fontSize: 14.5,
fontWeight: FontWeight.bold,
),
textStyle: themeData.textTheme.headline6!.copyWith(
textStyle: themeData.textTheme.titleLarge!.copyWith(
fontSize: 14.5,
),
),
docusaurus/docs/Flutter/02-customization/01-custom-widgets/07-slidable_channel_list_preview.mdx
+4 -3
View File
@@ -25,8 +25,8 @@ If you're new to Stream Chat Flutter, we recommend looking at our [getting start
dependencies:
flutter:
sdk: flutter
stream_chat_flutter: ^4.0.0
flutter_slidable: ^1.2.0
stream_chat_flutter: ^6.0.0
flutter_slidable: ^3.0.0
```
⚠️ Note: The examples shown in this guide use the above packages and versions.
@@ -120,7 +120,8 @@ class _ChannelListPageState extends State<ChannelListPage> {
onRefresh: _controller.refresh,
child: StreamChannelListView(
controller: _controller,
itemBuilder: (context, channel, tile) {
itemBuilder: (context, channels, index, tile) {
final channel = channels[index];
final chatTheme = StreamChatTheme.of(context);
final backgroundColor = chatTheme.colorTheme.inputBg;
final canDeleteChannel = channel.ownCapabilities
docusaurus/docs/Flutter/02-customization/stream_chat_and_theming.mdx
+27 -24
View File
@@ -29,41 +29,44 @@ factory StreamChatThemeData({
Brightness? brightness,
TextTheme? textTheme,
ColorTheme? colorTheme,
ChannelListHeaderTheme? channelListHeaderTheme,
ChannelPreviewTheme? channelPreviewTheme,
ChannelTheme? channelTheme,
MessageTheme? otherMessageTheme,
MessageTheme? ownMessageTheme,
MessageInputTheme? messageInputTheme,
Widget Function(BuildContext, Channel)? defaultChannelImage,
StreamChannelListHeaderThemeData? channelListHeaderTheme,
StreamChannelPreviewThemeData? channelPreviewTheme,
StreamChannelHeaderThemeData? channelHeaderTheme,
StreamMessageThemeData? otherMessageTheme,
StreamMessageThemeData? ownMessageTheme,
StreamMessageInputThemeData? messageInputTheme,
Widget Function(BuildContext, User)? defaultUserImage,
PlaceholderUserImage? placeholderUserImage,
IconThemeData? primaryIconTheme,
List<ReactionIcon>? reactionIcons,
List<StreamReactionIcon>? reactionIcons,
StreamGalleryHeaderThemeData? imageHeaderTheme,
StreamGalleryFooterThemeData? imageFooterTheme,
StreamMessageListViewThemeData? messageListViewTheme,
});
```
### Stream Chat Theme in use
Let's take a look at customizing widgets using `StreamChatTheme`. In the example below, we can change the default color theme to yellow and override the channel header's typography and colors.
Let's take a look at customizing widgets using `StreamChatThemeData`. In the example below, we can change the default color theme to yellow and override the channel header's typography and colors.
```dart
builder: (context, child) => StreamChat(
client: client,
child: child,
streamChatThemeData: StreamChatThemeData(
colorTheme: ColorTheme.light(
primaryAccent: const Color(0xffffe072),
),
channelTheme: ChannelTheme(
channelHeaderTheme: ChannelHeaderTheme(
color: const Color(0xffd34646),
title: TextStyle(
color: Colors.white,
),
),
MaterialApp(
builder: (context, child) => StreamChat(
client: client,
streamChatThemeData: StreamChatThemeData(
colorTheme: StreamColorTheme.light(
accentPrimary: const Color(0xffffe072),
),
channelHeaderTheme: const ChannelHeaderThemeData(
color: const Color(0xffd34646),
titleStyle: TextStyle(
color: Colors.white,
),
),
),
),
child: child,
),
);
```
We are creating this class at the very top of our widget tree using the `streamChatThemeData` parameter found in the `StreamChat` widget.