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
@@ -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)),
|
||||
);
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user