Stream Chat Flutter v5: Announcing Desktop and Web Support

We’re happy to announce that Windows, macOS, Linux, and Web support is now available with the Stream Chat Flutter UI package. Learn how to easily add native feeling chat to your Flutter desktop and web applications.

Gordon H.
Gordon H.
Published October 5, 2022
Stream Chat Flutter Desktop and Web Support - Announcement

It’s always been possible to build beautiful chat applications on desktop and web using Flutter and Stream Chat with our core or low-level client chat packages. But, users can now target desktop and web using our UI package, enabling you to get the complete Stream Chat experience regardless of platform.

Version 5.0.0 has been overhauled to support larger screen sizes better and provide native feeling web and desktop platform interactions that feel intuitive and expected. Support for desktop and web brings along all the features available on Android and iOS.

This means you’ll be able to create a fully functional chat experience on desktop and web in no time while still having fine-grained control over customization. This article will discuss the most important changes introduced in this version. For a more detailed overview, including migration steps and code samples, see our v5 migration guide.

Desktop and Web Support: What Changed?

Please note that the changes discussed below are platform-dependent and will not affect your current Android and iOS builds.

Supporting Large Screen Sizes

By default, the Stream Chat UI widgets will now better adapt to varying screen sizes:

  • Widgets are constrained to a maximum size, for example, appropriate message sizing for larger screens.
  • UI changes to make use of larger screen real estate. For example, reactions are added to the bottom of a message on desktop and web.

Below is an example running on macOS, with a split-screen view showing channels on the left and messages on the right. You can find the sample code here if you want to experiment yourself.

Stream Chat Flutter - delete message desktop

Native Platform Interactions

The user experience of interacting with a desktop application differs from a mobile counterpart. There are several factors to consider for an application to feel native and intuitive on the platform it is running on. For example:

  • Input controls: touch, keyboard, and mouse interactions
  • Gestures and shortcuts
  • Native file system or gallery access
  • Dialogs and notifications

Stream Chat Flutter will default use the correct input controls and visual elements for the target platform. For example, touch and swipe controls will be the default on mobile, while on web and desktop, these will be disabled, and interactions with the mouse and keyboard will be preferred.

The following interactions are available by default for Stream Chat Flutter desktop and web.

Right-click context menus for messages and full-screen attachments.

Stream Chat Flutter - right click popup desktop

Dialogs, instead of bottom sheets, where appropriate.

Stream Chat Flutter - delete message desktop

Updated UI and visual elements for certain actions, for example, when editing a message.

Stream Chat Flutter - edit message desktop

Drag and drop attachments from the file system to the message input field.

Stream Chat Flutter - drag and drop desktop

Hovering over a message reaction shows the users that have reacted to the message.

Stream Chat Flutter - user reactions desktop

Selectable message text.

Stream Chat Flutter - desktop select text

Desktop attachment sharing UI.

Stream Chat Flutter - desktop share

Other changes:

  • Upload and download attachments using the native desktop file system.
  • Gallery navigation controls with keyboard shortcuts (left and right arrow keys).
  • Press the enter key to send a message.
  • If you are quoting a message and have not yet typed any text, you can press the esc key to remove the quoted message.
  • A dedicated "X" button for removing a quoted message with your mouse.

What Changed in the Core and Low-Level Client Packages?

Using our core and low-level client packages on Flutter desktop and web has long been possible. This remains unchanged; however, with this release, many widgets and classes marked as deprecated in v4 are now removed completely.

Please see our v4 migration guide for more information if you have not yet migrated. Additionally, other changes introduced in this release may impact you. Please see our v5 migration guide for full details.

Other Improvements and Changes

Excluding desktop and web support, this release introduces several other improvements.

Stream Chat Configuration

A newly introduced StreamChatConfiguration class is an inherited widget that allows you to configure the Stream Chat Flutter SDK more easily. At the time of release, it supports:

  • Specifying a default and placeholder user image.
  • Enforcing unique reactions, for example, only allowing a single reaction per type.
  • Provide custom reaction icons.

Moving forward, we will continue to expand this class to group certain global configuration logic.

Stream Member List and Grid Views

The StreamMemberListView and StreamMemberGridView widgets are new widgets that allow you to display a list of members in a channel - either in a list or grid view.

Attachment Picker

As part of the v5 release, we've refactored the AttachmentPicker to be more flexible and customizable. This allows you to use the AttachmentPicker in various ways and customize the UI to your liking.

Check out the dedicated guide for more information.

Other Changes

Other changes include new translations, better UI control when uploading attachments, more message input fields, and the ability to define custom autocomplete triggers in the message input field.

The underlying code readability, reusability, and internal documentation have also undergone significant improvements. With this change, it will be easier for you to inspect and understand the underlying Stream Chat UI components. This allows you to selectively use smaller UI components and combine them with your own code or easily inspect the underlying source code and take inspiration for your custom needs.

Please see the migration guide for a list of all changes.

Conclusion

Version 5 of the Stream Chat Flutter SDK is a huge milestone for the Stream Chat Flutter SDK. At Stream, we’re dedicated to creating a world-class chat experience for your Flutter application, regardless of platform. We will continue improving our mobile, desktop, and web support as the Flutter ecosystem improves.

We also have support for the most popular native SDKs if you prefer to develop directly for your target platforms.

We’re excited to see you add in-app chat components to your macOS, Windows, Linux, and Web applications. Please share what you create on Twitter with us.

Our sample app, tutorial, and guides have all been updated to support the latest version and are there to serve as help if needed:

If you have feedback or feature requests, please submit an issue on GitHub — it will help us improve our Chat SDK and build the APIs you need.

New to Stream? Try our 30-day free trial to access the latest version of our Flutter SDK, and check out our Maker Account that allows small teams and hobbyists to use Stream Chat for free.

Follow us on Twitter @getstream_io and LinkedIn for all of our future updates.

decorative lines
Integrating Video With Your App?
We've built an audio and video solution just for you. Launch in days with our new APIs & SDKs!
Check out the BETA!