docs: v5 (#1341)
* feat: version docs and add stream_member_list_controller docs * feat: add member list and grid doc * exported extensions on ui package * feat: add first version of v5 migration guide * docs: grammar fixes and other v5 release details * docs: add additional v5 migration info * update WrapAttachmentWidget doc * add back v4 migration guide * docs(doc): add customize_attachment_picker_modal.mdx guide. (#1343) Signed-off-by: xsahil03x <[email protected]> Signed-off-by: xsahil03x <[email protected]> * update link for attachment picker guide * update share_plus Signed-off-by: xsahil03x <[email protected]> Co-authored-by: Gordon Hayes <[email protected]> Co-authored-by: Sahil Kumar <[email protected]>
This commit is contained in:
Salvatore Giordano
co-authored by
Gordon Hayes
Sahil Kumar
Gordon Hayes
Sahil Kumar
parent
4f2542291c
commit
08295e5290
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@@ -161,7 +161,10 @@ StreamMessageListView(
|
||||
),
|
||||
);
|
||||
|
||||
return wrapAttachmentWidget(context, attachmentWidget, null, true, BorderRadius.circular(8.0));
|
||||
return WrapAttachmentWidget(
|
||||
attachmentWidget: attachmentWidget,
|
||||
attachmentShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
@@ -32,6 +32,9 @@ At the moment we support the following languages:
|
||||
- [Spanish](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/lib/src/stream_chat_localizations_es.dart)
|
||||
- [Japanese](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/lib/src/stream_chat_localizations_ja.dart)
|
||||
- [Korean](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/lib/src/stream_chat_localizations_ko.dart)
|
||||
- [Portuguese](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/lib/src/stream_chat_localizations_pt.dart)
|
||||
- [German](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/lib/src/stream_chat_localizations_de.dart)
|
||||
- [Norwegian](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/lib/src/stream_chat_localizations_no.dart)
|
||||
More languages will be added in the future. Feel free to [contribute](https://github.com/GetStream/stream-chat-flutter/blob/master/CONTRIBUTING.md) to add more languages.
|
||||
|
||||
### Add dependency
|
||||
@@ -71,6 +74,9 @@ class MyApp extends StatelessWidget {
|
||||
Locale('es'),
|
||||
Locale('ja'),
|
||||
Locale('ko'),
|
||||
Locale('pt'),
|
||||
Locale('de'),
|
||||
Locale('no'),
|
||||
],
|
||||
// Add GlobalStreamChatLocalizations.delegates
|
||||
localizationsDelegates: GlobalStreamChatLocalizations.delegates,
|
||||
@@ -180,12 +186,15 @@ Example:
|
||||
```xml
|
||||
<key>CFBundleLocalizations</key>
|
||||
<array>
|
||||
<string>en</string>
|
||||
<string>nb</string>
|
||||
<string>fr</string>
|
||||
<string>it</string>
|
||||
<string>en</string>
|
||||
<string>hi</string>
|
||||
<string>fr</string>
|
||||
<string>it</string>
|
||||
<string>es</string>
|
||||
<string>ja</string>
|
||||
<string>ko</string>
|
||||
<string>pt</string>
|
||||
<string>de</string>
|
||||
<string>no</string>
|
||||
</array>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
id: customize_attachment_picker_modal
|
||||
title: Customizing the Attachment Picker Modal
|
||||
---
|
||||
|
||||
Customizing the Attachment Picker Modal
|
||||
|
||||
### Introduction
|
||||
|
||||
The Attachment Picker is a modal that allows users to select attachments from their device.
|
||||
It is generally used when a user taps the attachment button in the [StreamMessageInput](../stream_chat_flutter/message_input.mdx).
|
||||
|
||||
By default, the Attachment Picker provides multiple picker options as per the platform.
|
||||
- For example, on Mobile, the default options are Camera, Gallery, File, and Video.
|
||||
- On Web and Desktop, the default options are Image, Video and File.
|
||||
|
||||
### Customizing the Attachment Picker Modal
|
||||
|
||||
The Attachment Picker Modal can be customized by passing the different values to the `showStreamAttachmentPickerModalBottomSheet` function.
|
||||
|
||||
#### Initial Attachments
|
||||
|
||||
The initial attachments can be passed to the Attachment Picker Modal in two ways.
|
||||
|
||||
* By passing the `initialAttachments` parameter.
|
||||
|
||||
```dart
|
||||
showStreamAttachmentPickerModalBottomSheet(
|
||||
context: context,
|
||||
initialAttachments: [
|
||||
// Pass the initial attachments to the modal here if any are available already (optional)
|
||||
...messageInputController.attachments,
|
||||
],
|
||||
);
|
||||
```
|
||||
|
||||
* By creating a new instance of the `AttachmentPickerModalController` and passing it to the `controller` parameter.
|
||||
|
||||
```dart
|
||||
final attachmentPickerController = StreamAttachmentPickerController(
|
||||
initialAttachments: [
|
||||
// Pass the initial attachments to the modal here if any are available already (optional)
|
||||
...messageInputController.attachments,
|
||||
],
|
||||
|
||||
// The `maxAttachmentSize` and `maxAttachmentCount` can also be set while creating a controller.
|
||||
maxAttachmentSize: 10 * 1024 * 1024, // 10 MB
|
||||
maxAttachmentCount: 10, // 10 attachments
|
||||
);
|
||||
|
||||
showStreamAttachmentPickerModalBottomSheet(
|
||||
context: context,
|
||||
controller: attachmentPickerController,
|
||||
);
|
||||
```
|
||||
|
||||
#### Custom Attachment Picker Options
|
||||
|
||||
The Attachment Picker Modal provides a default set of options as per the platform.
|
||||
However, you can also customize the options by passing the `customOptions` parameter.
|
||||
|
||||
```dart
|
||||
showStreamAttachmentPickerModalBottomSheet(
|
||||
context: context,
|
||||
customOptions: [
|
||||
// Pass the custom attachment picker options here
|
||||
AttachmentPickerOption(
|
||||
icon: Icon(Icons.audiotrack),
|
||||
supportedTypes: [AttachmentPickerType.audios],
|
||||
optionViewBuilder: (context, attachmentPickerController) {
|
||||
return AudioPicker(
|
||||
onAudioPicked: (audio) async {
|
||||
await attachmentPickerController.addAttachment(audio);
|
||||
return Navigator.pop(context, attachmentPickerController.value);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
```
|
||||
|
||||
#### Attachment thumbnail size
|
||||
|
||||
The size of the attachment thumbnail item shown in the gallery picker can be defined by passing the `attachmentThumbnailSize` parameter.
|
||||
|
||||
```dart
|
||||
showStreamAttachmentPickerModalBottomSheet(
|
||||
context: context,
|
||||
attachmentThumbnailSize: ThumbnailSize.square(600),
|
||||
);
|
||||
```
|
||||
|
||||
#### Attachment thumbnail format
|
||||
|
||||
The format of the attachment thumbnail item shown in the gallery picker can be defined by passing the `attachmentThumbnailFormat` parameter.
|
||||
|
||||
Possible values are `ThumbnailFormat.jpeg` and `ThumbnailFormat.png`.
|
||||
|
||||
```dart
|
||||
showStreamAttachmentPickerModalBottomSheet(
|
||||
context: context,
|
||||
attachmentThumbnailFormat: ThumbnailFormat.jpeg,
|
||||
);
|
||||
```
|
||||
|
||||
#### Attachment thumbnail quality
|
||||
|
||||
The quality of the attachment thumbnail item shown in the gallery picker can be defined by passing the `attachmentThumbnailQuality` parameter.
|
||||
|
||||
Possible values are between 0 and 100.
|
||||
|
||||
```dart
|
||||
showStreamAttachmentPickerModalBottomSheet(
|
||||
context: context,
|
||||
attachmentThumbnailQuality: 70,
|
||||
);
|
||||
```
|
||||
|
||||
#### Attachment thumbnail scale
|
||||
|
||||
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
|
||||
double the height and width that should be used when painting the image.
|
||||
|
||||
```dart
|
||||
showStreamAttachmentPickerModalBottomSheet(
|
||||
context: context,
|
||||
attachmentThumbnailScale: 2.0,
|
||||
);
|
||||
```
|
||||
|
||||
#### Additional modal bottom sheet parameters
|
||||
|
||||
The `showStreamAttachmentPickerModalBottomSheet` function also accepts the parameters that are available in the `showModalBottomSheet` function.
|
||||
|
||||
```dart
|
||||
showStreamAttachmentPickerModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
backgroundColor: Colors.transparent,
|
||||
useRootNavigator: true,
|
||||
elevation: 4,
|
||||
isDismissible: true,
|
||||
clipBehavior: Clip.antiAlias,
|
||||
barrierColor: Colors.black.withOpacity(0.5),
|
||||
constraints: BoxConstraints(
|
||||
maxHeight: 500,
|
||||
maxWidth: 500,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: Radius.circular(16.0),
|
||||
),
|
||||
),
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -153,7 +153,10 @@ StreamMessageListView(
|
||||
),
|
||||
);
|
||||
|
||||
return wrapAttachmentWidget(context, attachmentWidget, null, true, BorderRadius.circular(8.0));
|
||||
return WrapAttachmentWidget(
|
||||
attachmentWidget: attachmentWidget,
|
||||
attachmentShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
---
|
||||
id: migration_guide_5_0
|
||||
sidebar_position: 15
|
||||
title: Migration Guide v5.0
|
||||
---
|
||||
|
||||
**Version 5.0.0** of the Stream Chat Flutter SDK UI package has been overhauled to support larger screen sizes better and provide native feeling web and desktop platform interactions that feel intuitive and expected.
|
||||
|
||||
These newly introduced changes are platform-dependent and will not affect your current Android and iOS builds.
|
||||
|
||||
This guide enumerates and better explains the SDK changes introduced in v5.
|
||||
|
||||
If you find any bugs or have any questions, please file an [issue on our GitHub repository](https://github.com/GetStream/stream-chat-flutter/issues). We want to support you as much as we can with this migration.
|
||||
|
||||
Code examples:
|
||||
|
||||
- See our [Stream Chat Flutter tutorial](https://getstream.io/chat/flutter/tutorial/) for an up-to-date guide using the latest Stream Chat version.
|
||||
- See the [Stream Flutter Samples repository](https://github.com/GetStream/flutter-samples) with our fully-fledged messaging [sample application](https://github.com/GetStream/flutter-samples/tree/main/packages/stream_chat_v1).
|
||||
|
||||
Our documentation has also been updated to support v5, so all guides and examples will have updated code.
|
||||
|
||||
### Dependencies
|
||||
|
||||
To migrate to v5.0.0, update your `pubspec.yaml` with the correct Stream chat package you're using:
|
||||
|
||||
```yaml
|
||||
dependencies:
|
||||
stream_chat_flutter: ^5.0.0 # full UI, core and client packages
|
||||
stream_chat_flutter_core: ^5.0.0 # core and client packages
|
||||
stream_chat: ^5.0.0 # client package
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Desktop and Web Support: What Changed?
|
||||
|
||||
This section highlights our efforts on Desktop (macOS, Windows, and Linux) and Web support.
|
||||
|
||||
### Setup
|
||||
|
||||
See the [setup guide](../stream_chat_flutter/setup.mdx) for platform specific instructions.
|
||||
|
||||
### Supporting Larger Screens
|
||||
|
||||
We've added support for larger screens and have made changes to the UI to support larger screen sizes better.
|
||||
|
||||
- Widgets are constrained to a maximum size, for example, appropriate message sizing for larger screens.
|
||||
- UI changes to use larger screen real estate. For example, reactions are added to the bottom of a message on desktop and web.
|
||||
|
||||
Below is an example running on macOS, with a split-screen view showing channels on the left and messages on the right.
|
||||
|
||||
|
||||
|
||||
### Native Platform Interactions
|
||||
|
||||
The user experience of interacting with a desktop application differs from a mobile counterpart. There are several factors to consider for an application to feel native and intuitive on the platform it is running, for example:
|
||||
|
||||
- Input controls: touch, keyboard, and mouse interactions
|
||||
- Native file system or gallery access (as well as sharing functionality)
|
||||
- Shortcuts
|
||||
- Dialogs
|
||||
|
||||
By default, Stream Chat Flutter will use the correct input controls and visual elements for the target platform. For example, touch and swipe controls will be the default on mobile, while on web and desktop these will be disabled and interactions with the mouse and keyboard will be preferred.
|
||||
|
||||
On desktop and web it's also possible to add attachments by simply dragging them into the message input box.
|
||||
|
||||
### All UI/Behaviour Changes for Desktop and Web
|
||||
|
||||
- Right-click context menus for messages and full-screen attachments.
|
||||
- Upload and download attachments using the native desktop file system.
|
||||
- Press the "enter" key to send a message.
|
||||
- If you are quoting a message and have not yet typed any text, you can press the "esc" key to remove the quoted message.
|
||||
- A dedicated "X" button for removing a quoted message with your mouse.
|
||||
- Drag and drop attachment files to `StreamMessageInput`.
|
||||
- New `StreamMessageInput.draggingBorder` property to customize the border color of the message input when dropping a file.
|
||||
- Message reactions bubbles differ per platform.
|
||||
- Hovering over a message reaction will show the users that have reacted to the message.
|
||||
- Desktop attachment sharing UI.
|
||||
- Selectable message text with mouse input.
|
||||
- Gallery navigation controls with keyboard shortcuts (left and right arrow keys).
|
||||
- Appropriate message sizing for large screens.
|
||||
- Right-click context menu for `StreamMessageListView` items.
|
||||
- `StreamMessageListView` items not swipeable on desktop & web.
|
||||
- Video support for Windows & Linux through `dart_vlc`.
|
||||
- Video support for macOS through `video_player_macos`.
|
||||
- Replace bottom sheets with dialogs where appropriate.
|
||||
|
||||
## What's New?
|
||||
|
||||
We improved the overall user experience of the Stream Chat Flutter SDK and added new features to make it easier to customize the SDK to your needs.
|
||||
|
||||
We've also fixed several bugs and improved the overall stability of the SDK.
|
||||
|
||||
### StreamChatConfiguration
|
||||
|
||||
The `StreamChatConfiguration` class is a new inherited widget that allows you to configure the Stream Chat Flutter SDK.
|
||||
|
||||
It provides a few configuration options. For example, it lets you specify if you want to `enforceUniqueReactions` or not and allows you to set the `reactionIcons` to use in your app.
|
||||
|
||||
You can retrieve the current configuration using `StreamChatConfiguration.of(context)`, as long as there is a `StreamChat` or `StreamChatConfiguration` widget higher up the widget tree. You can provide a custom `StreamChatConfigurationData` directly to `StreamChat` or wrap a section of the widget tree with a `StreamChatConfiguration`.
|
||||
|
||||
For additional information, see [#1125](https://github.com/GetStream/stream-chat-flutter/issues/1125). The `defaultUserImage`, `placeholderUserImage`, `reactionIcons`, and `enforceUniqueReactions` have been refactored out of `StreamChatThemeData` and into the new`StreamChatConfigurationData` class.
|
||||
|
||||
### StreamMemberListView and StreamMemberGridView
|
||||
|
||||
The `StreamMemberListView` and `StreamMemberGridView` widgets are new widgets that allow you to display a list of members in a channel.
|
||||
|
||||
Check out the dedicated [documentation](../stream_chat_flutter/stream_member_list_view.mdx) for more information.
|
||||
|
||||
### Attachment Picker
|
||||
|
||||
As part of the v5 release, we've refactored the `AttachmentPicker` to be more flexible and customizable. This allows you to use the `AttachmentPicker` in various ways and customize the UI to your liking.
|
||||
|
||||
Check out the dedicated [guide](./customize_attachment_picker_modal.mdx) for more information.
|
||||
|
||||
### Other Changes
|
||||
|
||||
The following was also introduced:
|
||||
|
||||
- Added support for additional text field params in`StreamMessageInput`: `maxLines`, `minLines`, `textInputAction`, `keyboardType`, and `textCapitalization`.
|
||||
- Added `showStreamAttachmentPickerModalBottomSheet` to show the attachment picker modal bottom sheet.
|
||||
- Added `onQuotedMessageCleared` to `StreamMessageInput`
|
||||
- `selected` and `selectedTileColor` to `StreamChannelListTile`
|
||||
- Added `AttachmentUploadStateBuilder.inProgressBuilder` to `AttachmentUploadStateBuilder`
|
||||
- Added `AttachmentUploadStateBuilder.successBuilder` to `AttachmentUploadStateBuilder`
|
||||
- Added `AttachmentUploadStateBuilder.failedBuilder` to `AttachmentUploadStateBuilder`
|
||||
- Added `StreamAutocomplete` widget for auto-complete triggers in `StreamMessageInput`.
|
||||
- Added `StreamMessageInput.customAutocompleteTriggers` to allow users to define their custom triggers.
|
||||
|
||||
New translations:
|
||||
|
||||
- `couldNotReadBytesFromFileError`
|
||||
- `downloadLabel`
|
||||
- `toggleMuteUnmuteAction`
|
||||
- `toggleMuteUnmuteGroupQuestion`
|
||||
- `toggleMuteUnmuteGroupText`
|
||||
- `toggleMuteUnmuteUserQuestion`
|
||||
- `toggleMuteUnmuteUserText`
|
||||
|
||||
## Deprecated
|
||||
|
||||
The following components have been deprecated in v5.0.0:
|
||||
|
||||
- Deprecated `showConfirmationDialog` in favor of `showConfirmationBottomSheet`
|
||||
- Deprecated `showInfoDialog` in favor of `showInfoBottomSheet`
|
||||
- Deprecated `wrapAttachmentWidget` in favor of the `WrapAttachmentWidget` class
|
||||
|
||||
## Breaking changes
|
||||
|
||||
The following components have been removed in v5.0.0:
|
||||
|
||||
- `StreamImageAttachment.size` has been removed in favor of `StreamImageAttachment.constraints`.
|
||||
- `StreamFileAttachment.size` has been removed in favor of `StreamFileAttachment.constraints`.
|
||||
- `StreamGiphyAttachment.size` has been removed in favor of `StreamGiphyAttachment.constraints`.
|
||||
- `StreamVideoAttachment.size` has been removed in favor of `StreamVideoAttachment.constraints`.
|
||||
- `StreamVideoThumbnailImage.width` and `StreamVideoThumbnailImage.height` have been removed in favor of `StreamVideoThumbnailImage.constraints`.
|
||||
|
||||
To fix these deprecations in your code, you can use a `BoxConstraints.tight` passing the desired fixed size as a parameter.
|
||||
|
||||
```dart
|
||||
/// BEFORE
|
||||
StreamImageAttachment(
|
||||
size: size,
|
||||
)
|
||||
|
||||
/// AFTER
|
||||
StreamImageAttachment(
|
||||
constraints: BoxConstraints.tight(size),
|
||||
)
|
||||
```
|
||||
|
||||
- Removed `StreamMessageInput.customOverlays` in favor of `StreamMessageInput.customAutocompleteTriggers`. Read the guide on [Adding Custom Autocomplete Triggers](./autocomplete_triggers.mdx) to learn how to migrate your code.
|
||||
|
||||
- Removed the default emoji overlay picker. Read the guide on [Adding Custom Autocomplete Triggers](./autocomplete_triggers.mdx) to learn how to migrate your code.
|
||||
@@ -39,7 +39,7 @@ In this example, you are doing a few important things in the ChannelListPage wid
|
||||
- Using the **flutter_slidable** package to easily add slide functionality.
|
||||
- Passing in the `itemBuilder` argument for the **StreamChannelListView** widget. This gives access to the current **BuildContext**, **Channel**, and **StreamChannelListTile**, and allows you to create, or customize, the stream channel list tiles.
|
||||
- Returning a Slidable widget with two CustomSlidableAction widgets - to delete a channel and show more options. These widgets come from the flutter_slidable package.
|
||||
- Adding `onPressed` behaviour to call `showConfirmationDialog` and `showChannelInfoModalBottomSheet`. These methods come from the **stream_chat_flutter** package. They have a few different on-tap callbacks you can supply, for example, `onViewInfoTap`. Alternatively, you can create custom dialogs from scratch.
|
||||
- Adding `onPressed` behaviour to call `showConfirmationBottomSheet` and `showChannelInfoModalBottomSheet`. These methods come from the **stream_chat_flutter** package. They have a few different on-tap callbacks you can supply, for example, `onViewInfoTap`. Alternatively, you can create custom dialogs from scratch.
|
||||
- Using the **StreamChannelListController** to perform actions, such as, `deleteChannel`.
|
||||
|
||||
```dart
|
||||
@@ -153,7 +153,7 @@ class _ChannelListPageState extends State<ChannelListPage> {
|
||||
color: chatTheme.colorTheme.accentError,
|
||||
),
|
||||
onPressed: (_) async {
|
||||
final res = await showConfirmationDialog(
|
||||
final res = await showConfirmationBottomSheet(
|
||||
context,
|
||||
title: 'Delete Conversation',
|
||||
question:
|
||||
|
||||
@@ -18,7 +18,7 @@ flutter pub add stream_chat_flutter
|
||||
|
||||
OR
|
||||
|
||||
Add this line in the dependencies section of your pubspec.yaml after substituting latest version:
|
||||
Add this line in the dependencies section of your `pubspec.yaml` after substituting the latest version:
|
||||
|
||||
```yaml
|
||||
dependencies:
|
||||
@@ -29,20 +29,50 @@ You can find the package details on [pub.dev](https://pub.dev/packages/stream_ch
|
||||
|
||||
### Details On Platform Support
|
||||
|
||||
`stream_chat_flutter` was originally created for Android and iOS mobile platforms. As Flutter matured,
|
||||
support for additional platforms was added and the package now has experimental support for web and desktop as
|
||||
[detailed here](https://getstream.io/blog/announcing-experimental-multi-platform-support-for-the-stream-flutter-sdk/).
|
||||
As of v5, the`stream_chat_flutter` package (UI) added support for web, macOS, Windows, and Linux - on top of the original support for Android and iOS. It has, however, been possible to target desktop and web since Flutter added support for these platforms using the `stream_chat_flutter_core` (builder) and `stream_chat` (low-level client) packages - this remains unchanged.
|
||||
|
||||
However, platforms other than mobile may have additional constraints due to not supporting all plugins,
|
||||
which will be addressed by the respective plugin creators over time.
|
||||
Please note that Flutter Web may have additional constraints due to not supporting all plugins that Stream Chat relies on. The respective plugin creators will address this over time.
|
||||
|
||||
### Setup: iOS
|
||||
### Setup
|
||||
|
||||
The library uses [flutter file picker plugin](https://github.com/miguelpruivo/flutter_file_picker) to pick files from the os.
|
||||
Follow [this wiki](https://github.com/miguelpruivo/flutter_file_picker/wiki/Setup#ios) to fulfill iOS requirements.
|
||||
This section provides setup instructions for the respective platforms.
|
||||
|
||||
We also use [video_player](https://pub.dev/packages/video_player) to reproduce videos.
|
||||
Follow [this guide](https://pub.dev/packages/video_player#installation) to fulfill the requirements.
|
||||
#### Android
|
||||
|
||||
To pick images from the camera, we use the [image_picker](https://pub.dev/packages/image_picker) plugin.
|
||||
The package uses [photo_manager](https://pub.dev/packages/photo_manager) to access the device's photo library. Follow [this wiki](https://pub.dev/packages/photo_manager#android-10-q-29) to fulfill the Android requirements.
|
||||
|
||||
#### iOS
|
||||
|
||||
The library uses [flutter file picker plugin](https://github.com/miguelpruivo/flutter_file_picker) to pick
|
||||
files from the os. Follow [this wiki](https://github.com/miguelpruivo/flutter_file_picker/wiki/Setup#ios) to fulfill iOS requirements.
|
||||
|
||||
Stream Chat also uses the [video_player](https://pub.dev/packages/video_player) package to play videos. Follow [this guide](https://pub.dev/packages/video_player#installation) to fulfill the requirements.
|
||||
|
||||
Stream Chat uses the [image_picker](https://pub.dev/packages/image_picker) plugin.
|
||||
Follow [these instructions](https://pub.dev/packages/image_picker#ios) to check the requirements.
|
||||
|
||||
#### Web
|
||||
|
||||
For the web, edit your `index.html` and add the following in the `<body>` tag to allow the SDK to override the right-click behavior:
|
||||
|
||||
```html
|
||||
<body oncontextmenu="return false;"></body>
|
||||
```
|
||||
|
||||
#### macOS
|
||||
|
||||
For macOS Stream Chat uses the [file_selector](https://pub.dev/packages/file_selector#macos) package. Follow [these instructions](https://pub.dev/packages/file_selector#macos) to check the requirements.
|
||||
|
||||
You also need to add the following [entitlements](https://docs.flutter.dev/development/platform-integration/desktop#entitlements-and-the-app-sandbox) to `Release.entitlement` and `DebugProfile.entitlement`:
|
||||
|
||||
```xml
|
||||
<key>com.apple.security.network.client</key>
|
||||
<true/>
|
||||
<key>com.apple.security.files.user-selected.read-write</key>
|
||||
<true/>
|
||||
```
|
||||
|
||||
Which grants:
|
||||
|
||||
- Internet permission
|
||||
- File access permission
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: stream_member_grid_view
|
||||
sidebar_position: 7
|
||||
title: StreamMemberGridView
|
||||
---
|
||||
|
||||
A widget for displaying and selecting members in a grid view.
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamMemberGridView-class.html)
|
||||
|
||||
### Background
|
||||
|
||||
The `StreamMemberGridView` widget allows displaying a list of members in a `GridView`.
|
||||
|
||||
:::note
|
||||
See the [StreamMemberListView](./stream_member_list_view.mdx) documentation for displaying members in a `ListView`.
|
||||
:::
|
||||
|
||||
### Basic Example
|
||||
|
||||
```dart
|
||||
class MemberGridPage extends StatefulWidget {
|
||||
const MemberGridPage({
|
||||
Key? key,
|
||||
required this.client,
|
||||
}) : super(key: key);
|
||||
|
||||
final StreamChatClient client;
|
||||
|
||||
@override
|
||||
State<MemberGridPage> createState() => _MemberGridPageState();
|
||||
}
|
||||
|
||||
class _MemberGridPageState extends State<MemberGridPage> {
|
||||
late final _controller = StreamMemberListController(
|
||||
client: widget.client,
|
||||
limit: 25,
|
||||
filter: Filter.and([
|
||||
Filter.notEqual('id', StreamChat.of(context).currentUser!.id),
|
||||
]),
|
||||
sort: [
|
||||
SortOption(
|
||||
'name',
|
||||
direction: 1,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
body: RefreshIndicator(
|
||||
onRefresh: _controller.refresh,
|
||||
child: StreamMemberGridView(
|
||||
controller: _controller,
|
||||
onChannelTap: (channel) => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (_) => StreamChannel(
|
||||
channel: channel,
|
||||
child: const ChannelPage(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: stream_member_list_view
|
||||
sidebar_position: 7
|
||||
title: StreamMemberListView
|
||||
---
|
||||
|
||||
A widget for displaying and selecting members in a list view.
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamMemberListView-class.html)
|
||||
|
||||
### Background
|
||||
|
||||
A list of members is required for many different purposes, for example, showing a list of users in a Channel. The `StreamMemberListView` displays a list of members.
|
||||
|
||||
:::note
|
||||
Make sure to check the [StreamMemberListController](./stream_member_list_controller.mdx) documentation for more information on how to use the controller to manipulate the `StreamMemberListView`.
|
||||
:::
|
||||
|
||||
### Basic Example
|
||||
|
||||
```dart
|
||||
class MemberListPage extends StatefulWidget {
|
||||
const MemberListPage({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<MemberListPage> createState() => _MemberListPageState();
|
||||
}
|
||||
|
||||
class _MemberListPageState extends State<MemberListPage> {
|
||||
late final StreamMemberListController _memberListController =
|
||||
StreamMemberListController(
|
||||
client: StreamChat.of(context).client,
|
||||
limit: 25,
|
||||
filter: Filter.and(
|
||||
[Filter.notEqual('id', StreamChat.of(context).currentUser!.id)],
|
||||
),
|
||||
sort: [
|
||||
const SortOption(
|
||||
'name',
|
||||
direction: 1,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return RefreshIndicator(
|
||||
onRefresh: () => _memberListController.refresh(),
|
||||
child: StreamMemberListView(
|
||||
controller: _memberListController,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Customize The Member Items
|
||||
|
||||
You can use your own widget for the member items using the `itemBuilder` parameter.
|
||||
|
||||
```dart
|
||||
StreamMemberListView(
|
||||
// ...
|
||||
itemBuilder: (context, members, index, defaultWidget) {
|
||||
return Text(members[index].name);
|
||||
},
|
||||
),
|
||||
```
|
||||
|
||||
### Selecting Members
|
||||
|
||||
The `StreamMemberListView` widget allows selecting members in a list. The `defaultWidget` returned can be customized to indicate that it has been selected.
|
||||
|
||||
```dart
|
||||
Set<Member> _selectedMembers = {};
|
||||
|
||||
StreamMemberListView(
|
||||
controller: _memberListController,
|
||||
itemBuilder: (context, members, index, defaultWidget) {
|
||||
return defaultWidget.copyWith(
|
||||
selected: _selectedMembers.contains(members[index]),
|
||||
);
|
||||
},
|
||||
onMemberTap: (member) {
|
||||
setState(() {
|
||||
_selectedMembers.add(member);
|
||||
});
|
||||
},
|
||||
);
|
||||
```
|
||||
@@ -62,7 +62,10 @@ StreamMessageWidget(
|
||||
),
|
||||
);
|
||||
|
||||
return wrapAttachmentWidget(context, attachmentWidget, null, true, BorderRadius.circular(8.0));
|
||||
return WrapAttachmentWidget(
|
||||
attachmentWidget: attachmentWidget,
|
||||
attachmentShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
|
||||
);
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
---
|
||||
id: stream_member_list_controller
|
||||
sidebar_position: 5
|
||||
title: StreamMemberListController
|
||||
---
|
||||
|
||||
A widget for controlling a list of members.
|
||||
|
||||
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter_core/latest/stream_chat_flutter_core/StreamMemberListController-class.html)
|
||||
|
||||
### Background
|
||||
|
||||
The `StreamMemberListController` is a controller class that allows you to control a list of users.
|
||||
`StreamMemberListController` is a required parameter of the `StreamMemberListView` widget.
|
||||
Check the [`StreamMemberListView` documentation](../stream_chat_flutter/stream_member_list_view.mdx) to read more about that.
|
||||
|
||||
### Basic Example
|
||||
|
||||
Building a custom member list is a very common task. Here is an example of how to use the `StreamMemberListController` to build a simple list with pagination.
|
||||
|
||||
First, create an instance of the `StreamMemberListController` and provide it with the `StreamChatClient` instance.
|
||||
You can also add a `Filter`, a list of `SortOption`s, and other pagination-related parameters.
|
||||
|
||||
```dart
|
||||
class MemberListPageState extends State<MemberListPage> {
|
||||
/// Controller used for loading more data and controlling pagination in
|
||||
/// [StreamMemberListController].
|
||||
late final memberListController = StreamMemberListController(
|
||||
client: StreamChatCore.of(context).client,
|
||||
);
|
||||
```
|
||||
|
||||
Make sure you call `memberListController.doInitialLoad()` to load the initial data and `memberListController.dispose()` when the controller is no longer required.
|
||||
|
||||
```dart
|
||||
@override
|
||||
void initState() {
|
||||
memberListController.doInitialLoad();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
memberListController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
```
|
||||
|
||||
The `StreamMemberListController` is basically a [`PagedValueNotifier`](./paged_value_notifier.mdx) that notifies you when the list of members has changed.
|
||||
You can use a [`PagedValueListenableBuilder`](./paged_value_listenable_builder.mdx) to build your UI depending on the latest members.
|
||||
|
||||
```dart
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
body: PagedValueListenableBuilder<int, List<Member>>(
|
||||
valueListenable: memberListController,
|
||||
builder: (context, value, child) {
|
||||
return value.when(
|
||||
(members, nextPageKey, error) => LazyLoadScrollView(
|
||||
onEndOfPage: () async {
|
||||
if (nextPageKey != null) {
|
||||
memberListController.loadMore(nextPageKey);
|
||||
}
|
||||
},
|
||||
child: ListView.builder(
|
||||
/// We're using the members length when there are no more
|
||||
/// pages to load and there are no errors with pagination.
|
||||
/// In case we need to show a loading indicator or and error
|
||||
/// tile we're increasing the count by 1.
|
||||
itemCount: (nextPageKey != null || error != null)
|
||||
? members.length + 1
|
||||
: members.length,
|
||||
itemBuilder: (BuildContext context, int index) {
|
||||
if (index == members.length) {
|
||||
if (error != null) {
|
||||
return TextButton(
|
||||
onPressed: () {
|
||||
memberListController.retry();
|
||||
},
|
||||
child: Text(error.message),
|
||||
);
|
||||
}
|
||||
return CircularProgressIndicator();
|
||||
}
|
||||
|
||||
final _item = members[index];
|
||||
return ListTile(
|
||||
title: Text(_item.name ?? ''),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
loading: () => const Center(
|
||||
child: SizedBox(
|
||||
height: 100,
|
||||
width: 100,
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
),
|
||||
error: (e) => Center(
|
||||
child: Text(
|
||||
'Oh no, something went wrong. '
|
||||
'Please check your config. $e',
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
```
|
||||
|
||||
In this case, we're using the [LazyLoadScrollView](./lazy_load_scroll_view.mdx) widget to load more data when the user scrolls to the bottom of the list.
|
||||
@@ -52,7 +52,7 @@ You can use a [`PagedValueListenableBuilder`](./paged_value_listenable_builder.m
|
||||
```dart
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
body: PagedValueListenableBuilder<int, Channel>(
|
||||
body: PagedValueListenableBuilder<int, List<User>>(
|
||||
valueListenable: userListController,
|
||||
builder: (context, value, child) {
|
||||
return value.when(
|
||||
|
||||
Reference in New Issue
Block a user