Getting Started

Understanding The UI Package Of The Flutter SDK

What function does `stream_chat_flutter` serve?

The UI SDK (stream_chat_flutter) contains official Flutter components for Stream Chat, a service for building chat applications.

While the Stream Chat service functions as the messaging backend and the LLC offers a straightforward integration for Flutter apps, our goal was to ensure the quick incorporation of Chat functionality into your application. To further simplify this process, we developed a dedicated UI package.

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.

Add pub.dev dependency

First, you need to add the stream_chat_flutter dependency to your pubspec.yaml.

You can either run this command:

flutter pub add stream_chat_flutter

Add this line in the dependencies section of your pubspec.yaml after substituting the latest version:

dependencies:
  stream_chat_flutter: ^latest_version

You can find the package details on pub.dev.

Details On Platform Support

As of the latest version, thestream_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.

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

This section provides setup instructions for the respective platforms.

Android

The package uses photo_manager to access the device’s photo library. Follow this wiki to fulfill the Android requirements.

iOS

The library uses flutter file picker plugin to pick files from the os. Follow this wiki to fulfill iOS requirements.

Stream Chat also uses the video_player package to play videos. Follow this guide to fulfill the requirements.

Stream Chat uses the image_picker plugin. Follow these instructions 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:

<body oncontextmenu="return false;"></body>

macOS

For macOS Stream Chat uses the file_selector package. Follow these instructions to check the requirements.

You also need to add the following entitlements to Release.entitlement and DebugProfile.entitlement:

<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

Overview

Theming