Theming

LAST EDIT Oct 08 2021
This page has been deprecated and will be deleted in the near future. Refer to the newer version of the Flutter UI SDK Theming docs.

Stream's UI SDK makes it easy for developers to add custom styles and attributes to our widgets. Like most Flutter frameworks, Stream exposes a dedicated widget for theming.

Using StreamChatTheme, users can customize most aspects of our UI widgets by setting attributes using StreamChatThemeData .

Similar to the Theme and ThemeData in Flutter, Stream Chat uses a top level inherited widget to provide theming information throughout your application. This can be optionally set at the top of your application tree or at a localized point in your widget sub-tree.

If you'd like to customize the look and feel of Stream chat across your entire application, we recommend setting your theme at the top level. Conversely, users can customize specific screens or widgets by wrapping components in a StreamChatTheme.

A closer look at StreamChatThemeData 🔍

Copied!

Looking at the constructor for StreamChatThemeData, we can see the full list of properties and widgets available for customization.

Some high-level properties such as textTheme can be set application-wide directly from this class. In contrast, larger components such as ChannelHeader, MessageInputs, etc. have been broken up into smaller theme objects.

Stream Chat Theme in use 🤓

Copied!

Let's take a look at customizing widgets using StreamChatTheme. In the example below, we can change the default color theme to yellow and override the channel header's typography and colors.

We are creating this class at the very top of our widget tree using the streamChatThemeData found in the StreamChat widget.

Customizing widgets on the fly ⚡️

Copied!

Taking things one step further, we can also customize widgets via their constructor or override the default widget entirely.

Looking at Stream's channel header, we can change behavior such as hiding or showing the back button. This can be done at the widget level by changing properties defined in the widget's constructor:

Finally, in cases where defining a custom widget is appropriate, developers can utilize builders to override default implementation with their own.

These are just some of the theming and customization options available to developers using Stream chat. To look at a fully custom application, check out our sample app repository or watch our Getting Started with Stream Chat on our Youtube channel.