diff --git a/docusaurus/docs/Flutter/basics/introduction.mdx b/docusaurus/docs/Flutter/basics/introduction.mdx index 457fd5e6..4c45855c 100644 --- a/docusaurus/docs/Flutter/basics/introduction.mdx +++ b/docusaurus/docs/Flutter/basics/introduction.mdx @@ -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. Low Level Client (stream_chat) : A pure Dart package that can be used on any Dart project. +1. Low Level Client (stream_chat): 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. Core (stream_chat_flutter_core) : Provides business logic to fetch common things required +2. Core (stream_chat_flutter_core): 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. UI (stream_chat_flutter) : This library includes both a low-level chat SDK and a set of +3. UI (stream_chat_flutter): this library includes both a low-level chat SDK and a set of reusable and customisable UI components. -4. Persistence (stream_chat_persistence) : Provides a persistence client for fetching and +4. Persistence (stream_chat_persistence): 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 distinct channel created with two members (you cannot add or delete members in this channel), whereas a group created with two people would simply be a non distinct channel (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 list of channels - which on opening would show a list of messages that were sent by the users in the Channel. diff --git a/docusaurus/docs/Flutter/guides/adding_custom_attachments.mdx b/docusaurus/docs/Flutter/guides/adding_custom_attachments.mdx index f0514f64..fb1f7bbe 100644 --- a/docusaurus/docs/Flutter/guides/adding_custom_attachments.mdx +++ b/docusaurus/docs/Flutter/guides/adding_custom_attachments.mdx @@ -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, diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx index dc160952..d6930cb4 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx @@ -85,4 +85,4 @@ To enable this, use the `showConnectionStateTile` property. ChannelListHeader( showConnectionStateTile: true, ), -``` \ No newline at end of file +``` diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx index 7eb16189..eb7baf20 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx @@ -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( ), ``` - diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/introduction.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/introduction.mdx index 710cf3b5..28640483 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/introduction.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/introduction.mdx @@ -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. - diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx index 3f725bd5..f33f85e9 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/message_input.mdx @@ -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 { ### 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( ), ``` -![](../assets/message_input_change_position.png) \ No newline at end of file +![](../assets/message_input_change_position.png) diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/message_widget.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/message_widget.mdx index b1974f05..5060bcac 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/message_widget.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/message_widget.mdx @@ -95,4 +95,4 @@ MessageWidget( //... reverse = true, ) -``` \ No newline at end of file +``` diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/setup.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/setup.mdx index af429620..22e5c6c5 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/setup.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/setup.mdx @@ -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: - -``` - - - - - - - - - -``` - -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. diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx index 5ebfcede..5cc1ae40 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx @@ -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 diff --git a/docusaurus/docs/Flutter/stream_chat_flutter_core/channel_list_core.mdx b/docusaurus/docs/Flutter/stream_chat_flutter_core/channel_list_core.mdx index 7200def2..90ba02d8 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter_core/channel_list_core.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter_core/channel_list_core.mdx @@ -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(), ); diff --git a/docusaurus/docs/Flutter/stream_chat_flutter_core/channels_bloc.mdx b/docusaurus/docs/Flutter/stream_chat_flutter_core/channels_bloc.mdx index b44a7df3..c89668ef 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter_core/channels_bloc.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter_core/channels_bloc.mdx @@ -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 diff --git a/docusaurus/docs/Flutter/stream_chat_flutter_core/introduction.mdx b/docusaurus/docs/Flutter/stream_chat_flutter_core/introduction.mdx index 146bfa62..3c6a70f2 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter_core/introduction.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter_core/introduction.mdx @@ -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. \ No newline at end of file +This section goes into the individual core package widgets and their functional use. diff --git a/docusaurus/docs/Flutter/stream_chat_flutter_core/message_search_bloc.mdx b/docusaurus/docs/Flutter/stream_chat_flutter_core/message_search_bloc.mdx index b80dec61..ad6c7bbe 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter_core/message_search_bloc.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter_core/message_search_bloc.mdx @@ -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 diff --git a/docusaurus/docs/Flutter/stream_chat_flutter_core/message_search_list_core.mdx b/docusaurus/docs/Flutter/stream_chat_flutter_core/message_search_list_core.mdx index b9c42bd0..872c53a2 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter_core/message_search_list_core.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter_core/message_search_list_core.mdx @@ -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), ), ); diff --git a/docusaurus/docs/Flutter/stream_chat_flutter_core/setup.mdx b/docusaurus/docs/Flutter/stream_chat_flutter_core/setup.mdx index f39f243e..15b15a56 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter_core/setup.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter_core/setup.mdx @@ -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). diff --git a/docusaurus/docs/Flutter/stream_chat_flutter_core/stream_chat_core.mdx b/docusaurus/docs/Flutter/stream_chat_flutter_core/stream_chat_core.mdx index 91d7cf65..2a43ae52 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter_core/stream_chat_core.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter_core/stream_chat_core.mdx @@ -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 diff --git a/docusaurus/docs/Flutter/stream_chat_flutter_core/users_bloc.mdx b/docusaurus/docs/Flutter/stream_chat_flutter_core/users_bloc.mdx index 9bff8dba..b330b71e 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter_core/users_bloc.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter_core/users_bloc.mdx @@ -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`: diff --git a/packages/stream_chat_flutter_core/lib/src/channel_list_core.dart b/packages/stream_chat_flutter_core/lib/src/channel_list_core.dart index 6dc52647..c59b2030 100644 --- a/packages/stream_chat_flutter_core/lib/src/channel_list_core.dart +++ b/packages/stream_chat_flutter_core/lib/src/channel_list_core.dart @@ -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(), /// ); diff --git a/packages/stream_chat_flutter_core/lib/src/message_search_list_core.dart b/packages/stream_chat_flutter_core/lib/src/message_search_list_core.dart index d354daec..4901c332 100644 --- a/packages/stream_chat_flutter_core/lib/src/message_search_list_core.dart +++ b/packages/stream_chat_flutter_core/lib/src/message_search_list_core.dart @@ -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), /// ), /// );