This page has been deprecated and will be deleted in the near future. Refer to the newer version of the Flutter Core docs for the most up to date info.

Introduction to stream_chat_flutter_core

Copied!

This package provides basic building blocks for integrating Stream Chat into your application. The core package allows more customisation and hence provides business logic but no UI components. Please use the stream_chat_flutter package for the full-fledged suite of UI components or stream_chat for the low-level client.

The package primarily contains three types of classes:

  1. Business Logic Components

  2. Core Components

  3. Core Controllers

Business Logic Components (BLoCs)

Copied!

These components allow you to have the maximum and lower-level control of the queries being executed. These widgets are used by the core components to access the API client.

The BLoCs we provide are:

  1. ChannelsBloc

  2. MessageSearchBloc

  3. UsersBloc

Core Components 

Copied!

Core components usually are an easy way to fetch data associated with Stream Chat which are decoupled from UI and often expose UI builders. Data fetching can be controlled with the controllers of the respective core components.

  1. ChannelListCore (Fetch a list of channels)

  2. MessageListCore (Fetch a list of messages from a channel)

  3. MessageSearchListCore (Fetch a list of search messages)

  4. UserListCore (Fetch a list of users)

  5. StreamChatCore (This is different from the other core components - it's an inherited widget that exposes the client to all the other widgets)

Core Controllers 

Copied!

Core Controllers are supplied to respective CoreList widgets which allows reloading and pagination of data whenever needed.

  1. ChannelListController

  2. MessageListController

  3. MessageSearchListController

  4. ChannelListController

Adding stream_chat_flutter_core to your app

Copied!

Add stream_chat_flutter_core to your dependencies, to do that just open pubspec.yaml and add it inside the dependencies section using the latest version you can find here

Instantiate the Dart API client and add the StreamChatCore widget to your widget tree.

Note that:

  1. The Dart API client is initialized with your API Key

  2. The current user is set by calling connectUser on the client

  3. The client is then passed to the top-level StreamChatCore widget

StreamChatCore is an inherited widget and must be the parent of all Chat related widgets.

Fetching and displaying a list of channels

Copied!

To display a list of channels you need two of our widgets

  • ChannelsBloc - a business logic component that handles API-calls/pagination

  • ChannelListCore - that renders the list of channels providing builders for every state of the list

Screenshot

As you can see the ChannelsBloc must be above the ChannelListCore in the widget hierarchy. That's because the latter uses the former to retrieve data from the client.

Note that on line 70 while pushing the new route we wrap it with a StreamChannel widget, needed to expose the channel information to the other widgets in MessageScreen.

Checkout the ChannelsBloc and ChannelListCore API reference to see the available options.

The package provides a LazyLoadScrollView that together with ChannelListController helps you implement pagination in a few lines of code.

Fetching and displaying channel information

Copied!

Once you tap on your channel preview tile you want to show the channel information.

Usually, you want a list of messages and other general channel details, like the channel name, image, number of online members and so on...

Screenshot

As you can see MessageListCore is similar to ChannelListCore. It shows the message list retrieving data from the API and lets you customize the state of the list using UI builders. It also accepts a MessageListController that helps you handle pagination.

In the snippet above you can find a basic message input implementation, but you can implement your own one and use StreamChannel.of(context) to access the specific Channel client and send/edit a message.

In the AppBar we show the channel title, but you can access other channel details using the channel client.

Checkout the MessageListCore, MessageListController, and Channel API reference to explore the main options.

Typing indicators

Copied!

Building a typing indicator is very simple.

You can find a Stream<List<User>> in channel.state.typingEventsStream that contains the list of users currently typing.

Using a StreamBuilder you can listen to changes and render the information the way you want.