Merge remote-tracking branch 'origin/docusaurus' into docusaurus
This commit is contained in:
Deven Joshi
@@ -19,14 +19,14 @@ giving you complete control to ones that give you a rich out-of-the-box chat exp
|
||||
|
||||
The packages that make up the Stream Chat SDK are:
|
||||
|
||||
1. <b>Low Level Client (stream_chat)</b> : A pure Dart package that can be used on any Dart project.
|
||||
1. <b>Low Level Client (stream_chat)</b>: a pure Dart package that can be used on any Dart project.
|
||||
It provides a low-level client to access the Stream Chat service.
|
||||
2. <b>Core (stream_chat_flutter_core)</b> : Provides business logic to fetch common things required
|
||||
2. <b>Core (stream_chat_flutter_core)</b>: provides business logic to fetch common things required
|
||||
for integrating Stream Chat into your application.
|
||||
The core package allows more customisation and hence provides business logic but no UI components.
|
||||
3. <b>UI (stream_chat_flutter)</b> : This library includes both a low-level chat SDK and a set of
|
||||
3. <b>UI (stream_chat_flutter)</b>: this library includes both a low-level chat SDK and a set of
|
||||
reusable and customisable UI components.
|
||||
4. <b>Persistence (stream_chat_persistence)</b> : Provides a persistence client for fetching and
|
||||
4. <b>Persistence (stream_chat_persistence)</b>: provides a persistence client for fetching and
|
||||
saving chat data locally.
|
||||
|
||||
We recommend building prototypes using the full UI package since it contains UI widgets already
|
||||
@@ -37,7 +37,7 @@ The Flutter SDK enables you to build any type of chat or messaging experience fo
|
||||
and Desktop.
|
||||
|
||||
If you're building a very custom UI and would prefer a more lean package,
|
||||
our core package will be suited to this use case. Core allows you to build custom,
|
||||
our [core package](https://pub.dev/packages/stream_chat_flutter) will be suited to this use case. Core allows you to build custom,
|
||||
expressive UIs while retaining the benefits of our full Flutter SDK.
|
||||
APIs for accessing and controlling users, sending messages, etc are seamlessly integrated into
|
||||
this package and accessible via providers and builders.
|
||||
@@ -55,7 +55,7 @@ but there is a way to create a unique chat between a certain number of people by
|
||||
|
||||
In essence, a normal two-person chat would be a <b>distinct channel</b> created with two members (you cannot add or delete members in this channel), whereas a group created with two people would simply be a <b>non distinct channel</b> (possible to add or remove members).
|
||||
|
||||
Note: It is also possible to add more than two people in a distinct channel which retains the same add/removal properties and resembles the Slack DMs where you can DM two or more people as well.
|
||||
Note: It is also possible to add more than two people in a distinct channel which retains the same add/removal properties and resembles the Slack DMs where you can DM one or more people as well.
|
||||
|
||||
In summary, if you were creating a Whatsapp-like app, the first screen would be a <b>list of channels</b> - which on opening would show a <b>list of messages</b> that were sent by the users in the Channel.
|
||||
|
||||
|
||||
@@ -14,7 +14,9 @@ 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`
|
||||
|
||||
2) Sending a message with the custom attachment
|
||||
|
||||
3) Rendering the custom message attachment
|
||||
|
||||
To do this, let's check out an example to add location sharing to Stream Chat.
|
||||
@@ -126,7 +128,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 = new Uri(
|
||||
var url = Uri(
|
||||
scheme: 'https',
|
||||
host: 'maps.googleapis.com',
|
||||
port: 443,
|
||||
|
||||
@@ -85,4 +85,4 @@ To enable this, use the `showConnectionStateTile` property.
|
||||
ChannelListHeader(
|
||||
showConnectionStateTile: true,
|
||||
),
|
||||
```
|
||||
```
|
||||
|
||||
@@ -13,9 +13,10 @@ Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_
|
||||
### Background
|
||||
|
||||
Channels are fundamental elements of Stream Chat and constitute shared spaces which allow users to
|
||||
message each other. 1:1 conversations and groups are both examples of channels, albeit with some (distinct/non-distinct)
|
||||
differences. Displaying the list of channels that a user is a part of is a pattern that is part of
|
||||
most messaging apps.
|
||||
message each other.
|
||||
|
||||
1:1 conversations and groups are both examples of channels, albeit with some (distinct/non-distinct)
|
||||
differences. Displaying the list of channels that a user is a part of is a pattern present in most messaging apps.
|
||||
|
||||
The `ChannelListView` widget allows displaying a list of channels to a user. By default, this is NOT
|
||||
ONLY the channels that the user is a part of. This section goes into setting up and using a `ChannelListView`
|
||||
@@ -108,4 +109,3 @@ ChannelListView(
|
||||
),
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -16,4 +16,3 @@ use it in your Flutter apps, we wanted to make sure that adding Chat functionali
|
||||
The UI package is built on top of the low-level client and the core package and allows you to build a
|
||||
full fledged app with either the inbuilt components, modify existing components, or easily add widgets
|
||||
of your own to match your app's style better.
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_
|
||||
|
||||
In Stream Chat, we can send messages in a channel. However, sending a message isn't as simple as adding
|
||||
a `TextField` and logic for sending a message. It involves additional processes like addition of media,
|
||||
quoting a messages, adding a custom command like a GIF board, and much more. Moreover, most apps also
|
||||
quoting a message, adding a custom command like a GIF board, and much more. Moreover, most apps also
|
||||
need to customize the input to match their theme, overall color and structure pattern, etc.
|
||||
|
||||
To do this, we created a `MessageInput` widget which abstracts all expected functionality a modern input
|
||||
@@ -54,7 +54,7 @@ class ChannelPage extends StatelessWidget {
|
||||
}
|
||||
```
|
||||
|
||||
It is common to put this widget in the same page of a [MessageListView] as the bottom widget.
|
||||
It is common to put this widget in the same page of a `MessageListView` as the bottom widget.
|
||||
|
||||
### Quoting A Message
|
||||
|
||||
@@ -119,7 +119,7 @@ class _ChannelPageState extends State<ChannelPage> {
|
||||
|
||||
### Adding Custom Actions
|
||||
|
||||
By default, the `MessageInput` has two actions: one for attachments and one for commands like giphy.
|
||||
By default, the `MessageInput` has two actions: one for attachments and one for commands like Giphy.
|
||||
To add your own action, we use the `actions` parameter like this:
|
||||
|
||||
```dart
|
||||
@@ -167,4 +167,4 @@ MessageInput(
|
||||
),
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -95,4 +95,4 @@ MessageWidget(
|
||||
//...
|
||||
reverse = true,
|
||||
)
|
||||
```
|
||||
```
|
||||
|
||||
@@ -4,7 +4,7 @@ sidebar_position: 2
|
||||
title: Setup
|
||||
---
|
||||
|
||||
Understanding Setup For stream_chat_flutter
|
||||
Understanding Setup For `stream_chat_flutter`
|
||||
|
||||
### Add pub.dev dependency
|
||||
|
||||
@@ -12,7 +12,7 @@ First, you need to add the `stream_chat_flutter` dependency to your `pubspec.yam
|
||||
|
||||
You can either run this command:
|
||||
|
||||
```
|
||||
```shell
|
||||
flutter pub add stream_chat_flutter
|
||||
```
|
||||
|
||||
@@ -20,15 +20,17 @@ OR
|
||||
|
||||
Add this line in the dependencies section of your pubspec.yaml after substituting latest version:
|
||||
|
||||
```
|
||||
```yaml
|
||||
dependencies:
|
||||
stream_chat_flutter_core: ^latest_version
|
||||
stream_chat_flutter: ^latest_version
|
||||
```
|
||||
|
||||
You can find the package details on [pub.dev](https://pub.dev/packages/stream_chat_flutter).
|
||||
|
||||
### Details On Platform Support
|
||||
|
||||
`stream_chat_flutter` was originally created for Android and iOS mobile platforms. As Flutter matured,
|
||||
additional platforms were added and the package now has experimental support for web and desktop as
|
||||
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/).
|
||||
|
||||
However, platforms other than mobile may have additional constraints due to not supporting all plugins,
|
||||
@@ -44,22 +46,3 @@ Follow [this guide](https://pub.dev/packages/video_player#installation) to fulfi
|
||||
|
||||
To pick images from the camera, we use the [image_picker](https://pub.dev/packages/image_picker) plugin.
|
||||
Follow [these instructions](https://pub.dev/packages/image_picker#ios) to check the requirements.
|
||||
|
||||
### Setup: Web
|
||||
|
||||
Due to Moor web (for offline storage) you need to include the sql.js library:
|
||||
|
||||
```
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script defer src="sql-wasm.js"></script>
|
||||
<script defer src="main.dart.js" type="application/javascript"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
You can grab the latest version of sql-wasm.js and sql-wasm.wasm [here](https://github.com/sql-js/sql.js/releases)
|
||||
and copy them into your `/web` folder.
|
||||
|
||||
@@ -74,7 +74,7 @@ UsersListView(
|
||||
|
||||
### Selecting Users
|
||||
|
||||
The `UserListView` widget allows selecting users in a list by supplying a selected users and callbacks
|
||||
The `UserListView` widget allows selecting users in a list by supplying a selected users list and callbacks
|
||||
for when user items are tapped.
|
||||
|
||||
```dart
|
||||
|
||||
@@ -18,16 +18,15 @@ class ChannelListPage extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: ChannelListCore(
|
||||
filter: {
|
||||
'members': {
|
||||
'\$in': [StreamChat.of(context).user.id],
|
||||
}
|
||||
},
|
||||
filter: Filter.in_(
|
||||
'members',
|
||||
[StreamChat.of(context).user!.id],
|
||||
),
|
||||
sort: [SortOption('last_message_at')],
|
||||
pagination: PaginationParams(
|
||||
limit: 20,
|
||||
),
|
||||
errorBuilder: (err) {
|
||||
errorBuilder: (context, err) {
|
||||
return Center(
|
||||
child: Text('An error has occured'),
|
||||
);
|
||||
@@ -37,7 +36,7 @@ class ChannelListPage extends StatelessWidget {
|
||||
child: Text('Nothing here...'),
|
||||
);
|
||||
},
|
||||
emptyBuilder: (context) {
|
||||
loadingBuilder: (context) {
|
||||
return Center(
|
||||
child: CircularProgressIndicator(),
|
||||
);
|
||||
|
||||
@@ -9,7 +9,7 @@ title: ChannelsBloc
|
||||
Channels with pagination, re-ordering, querying and other operations
|
||||
associated with Channels.
|
||||
|
||||
`ChannelsBloc` can be accessed at anytime by using the static of method
|
||||
`ChannelsBloc` can be accessed at anytime by using the static `.of` method
|
||||
using Flutter's `BuildContext`.
|
||||
|
||||
```dart
|
||||
@@ -63,7 +63,7 @@ ChannelsBloc(
|
||||
|
||||
#### Decide if channel should be added on new message event
|
||||
|
||||
When a new message arrives, a `message.new` event is created. We can decide if we want to add the channel
|
||||
When a new message arrives, a `message.new` event is received. We can decide if we want to add the channel
|
||||
to the list using the `shouldAddChannel` parameter which is a callback supplying the event data:
|
||||
|
||||
```dart
|
||||
|
||||
@@ -15,10 +15,11 @@ Please use the `stream_chat_flutter` package for the full fledged suite of UI co
|
||||
In the early days of the Flutter SDK, the SDK was only split into the LLC (`stream_chat`) and
|
||||
the UI package (`stream_chat_flutter`). With this you could use a fully built interface with the UI package
|
||||
or a fully custom interface with the LLC. However, we soon recognised the need for a third intermediary
|
||||
package which made tasks like building and modifying a list or channels or messages easy but without
|
||||
package which made tasks like building and modifying a list of channels or messages easy but without
|
||||
the complexity of using low level components. The Core package (`stream_chat_flutter_core`) is a manifestation
|
||||
of the same idea and allows you to build an interface with Stream Chat without having to deal with
|
||||
low level code and architecture as well as implementing your own theme and UI effortlessly.
|
||||
low level code and architecture as well as implementing your own theme and UI effortlessly.
|
||||
Also, it has very few dependencies.
|
||||
|
||||
We will now explore the components of this intermediary package and understand how it helps you build
|
||||
the experience you want your users to have.
|
||||
@@ -46,7 +47,7 @@ The BLoCs we provide are:
|
||||
### Core Components
|
||||
|
||||
Core components usually are an easy way to fetch data associated with Stream Chat.
|
||||
Core components use functions exposed by the respective BLoCs (the ChannelListCore uses the ChannelsBloc)
|
||||
Core components use functions exposed by the respective BLoCs (for example the ChannelListCore uses the ChannelsBloc)
|
||||
and use the respective controllers for various operations. Unlike heavier components from the UI
|
||||
package, core components are decoupled from UI and they expose builders instead to help you build
|
||||
a fully custom interface.
|
||||
@@ -76,4 +77,4 @@ specific function (reload / paginate) whenever such an event is triggered throug
|
||||
* MessageSearchListController
|
||||
* ChannelListController
|
||||
|
||||
This section goes into the individual core package widgets and their functional use.
|
||||
This section goes into the individual core package widgets and their functional use.
|
||||
|
||||
@@ -7,7 +7,7 @@ title: MessageSearchListBloc
|
||||
`MessageSearchBloc` is used to manage a list of messages with pagination.
|
||||
This class can be used to load messages, perform queries, etc.
|
||||
|
||||
`MessageSearchBloc` can be accessed at anytime by using the static of method
|
||||
`MessageSearchBloc` can be accessed at anytime by using the static `.of` method
|
||||
using Flutter's BuildContext.
|
||||
|
||||
```dart
|
||||
|
||||
@@ -15,12 +15,8 @@ class MessageSearchPage extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: MessageSearchListCore(
|
||||
messageQuery: _channelQuery,
|
||||
filters: {
|
||||
'members': {
|
||||
r'$in': [user.id]
|
||||
}
|
||||
},
|
||||
messageQuery: _messageFilter,
|
||||
filters: _channelsFilter,
|
||||
paginationParams: PaginationParams(limit: 20),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -4,7 +4,7 @@ sidebar_position: 2
|
||||
title: Setup
|
||||
---
|
||||
|
||||
Understanding Setup For stream_chat_flutter_core
|
||||
Understanding Setup For `stream_chat_flutter_core`
|
||||
|
||||
### Add pub.dev dependency
|
||||
|
||||
@@ -12,7 +12,7 @@ First, you need to add the `stream_chat_flutter_core` dependency to your pubspec
|
||||
|
||||
You can either run this command:
|
||||
|
||||
```
|
||||
```shell
|
||||
flutter pub add stream_chat_flutter_core
|
||||
```
|
||||
|
||||
@@ -20,8 +20,9 @@ OR
|
||||
|
||||
Add this line in the dependencies section of your pubspec.yaml after substituting latest version:
|
||||
|
||||
```
|
||||
```yaml
|
||||
dependencies:
|
||||
stream_chat_flutter_core: ^latest_version
|
||||
```
|
||||
|
||||
You can find the package details on [pub.dev](https://pub.dev/packages/stream_chat_flutter_core).
|
||||
|
||||
@@ -4,15 +4,14 @@ sidebar_position: 3
|
||||
title: StreamChatCore
|
||||
---
|
||||
|
||||
`StreamChatCore` is a version of `StreamChat` found in stream_chat_flutter that is decoupled from
|
||||
`StreamChatCore` is a version of `StreamChat` found in `stream_chat_flutter` that is decoupled from
|
||||
theme and initialisations.
|
||||
|
||||
`StreamChatCore` is used to provide information about the chat client to the widget tree.
|
||||
This Widget is used to react to life cycle changes and system updates.
|
||||
When the app goes into the background, the websocket connection is kept
|
||||
alive for two minutes before being terminated.
|
||||
When the app goes into the background, the websocket connection is automatically closed and when it goes back to foreground the connection is opened again.
|
||||
|
||||
Like the StreamChat widget in the higher level UI package, the StreamChatCore widget should
|
||||
Like the `StreamChat` widget in the higher level UI package, the `StreamChatCore` widget should
|
||||
be on the top level before using any Stream functionality:
|
||||
|
||||
```dart
|
||||
|
||||
@@ -6,15 +6,14 @@ title: UsersBloc
|
||||
|
||||
Widget dedicated to the management of a users list with pagination.
|
||||
|
||||
`UsersBloc` can be accessed at anytime by using the static of method
|
||||
`UsersBloc` can be accessed at anytime by using the static `.of` method
|
||||
using Flutter's `BuildContext`.
|
||||
|
||||
```dart
|
||||
var _userBloc_ = UsersBloc.of(context);
|
||||
```
|
||||
|
||||
The `UsersBloc` widget encapsulates common functionality related to searching for users
|
||||
and also supplies them down the widget tree.
|
||||
The `UsersBloc` widget encapsulates common functionality related to user lists and also supplies them down the widget tree.
|
||||
|
||||
Here is a basic implementation of `UsersBloc`:
|
||||
|
||||
|
||||
@@ -19,16 +19,15 @@ import 'package:stream_chat_flutter_core/src/typedef.dart';
|
||||
/// Widget build(BuildContext context) {
|
||||
/// return Scaffold(
|
||||
/// body: ChannelListCore(
|
||||
/// filter: {
|
||||
/// 'members': {
|
||||
/// '\$in': [StreamChat.of(context).user.id],
|
||||
/// }
|
||||
/// },
|
||||
/// filter: Filter.in_(
|
||||
/// 'members',
|
||||
/// [StreamChat.of(context).user!.id],
|
||||
/// ),
|
||||
/// sort: [SortOption('last_message_at')],
|
||||
/// pagination: PaginationParams(
|
||||
/// limit: 20,
|
||||
/// ),
|
||||
/// errorBuilder: (err) {
|
||||
/// errorBuilder: (context, err) {
|
||||
/// return Center(
|
||||
/// child: Text('An error has occured'),
|
||||
/// );
|
||||
@@ -38,7 +37,7 @@ import 'package:stream_chat_flutter_core/src/typedef.dart';
|
||||
/// child: Text('Nothing here...'),
|
||||
/// );
|
||||
/// },
|
||||
/// emptyBuilder: (context) {
|
||||
/// loadingBuilder: (context) {
|
||||
/// return Center(
|
||||
/// child: CircularProgressIndicator(),
|
||||
/// );
|
||||
|
||||
@@ -17,12 +17,8 @@ import 'package:stream_chat_flutter_core/src/typedef.dart';
|
||||
/// Widget build(BuildContext context) {
|
||||
/// return Scaffold(
|
||||
/// body: MessageSearchListCore(
|
||||
/// messageQuery: _channelQuery,
|
||||
/// filters: {
|
||||
/// 'members': {
|
||||
/// r'$in': [user.id]
|
||||
/// }
|
||||
/// },
|
||||
/// messageQuery: _messageFilter,
|
||||
/// filters: _channelsFilter,
|
||||
/// paginationParams: PaginationParams(limit: 20),
|
||||
/// ),
|
||||
/// );
|
||||
|
||||
Reference in New Issue
Block a user