UI SDK

LAST EDIT May 26 2021

Customizing Widgets

Copied!

The Flutter UI SDK (stream_chat_flutter) provides a set of components out of the box to allow you to integrate Stream Chat with your Flutter easily. Oftentimes, users may not need entirely custom UI but do need to tweak some aspects of the UI package widgets - which is why we have designed the SDK to be as flexible as possible.

Following are examples of how to customize the UI SDK components.

Message Item

Copied!

The UI SDK provides a MessageListView to serve all the messages from a channel to an end-user. Messages in the list can either be built by building the list from scratch or building individual list items.

To build the entire list from scratch, use the messageListBuilder parameter. This provides a fetched list of messages and allows a fully custom implementation of the message list.

In this way, several aspects such as threads will have to be handled in the implementation.

Another way to modify just the list items is to use the messageBuilder. This can either replace the individual messages while keeping other things such as separators and such or simply modify the existing message item by using the existing MessageWidget widget.

A simple example of a completely recreated item is:

To customize the existing widget, we use the MessageWidget in the messageBuilder:

Channel Header

Copied!

The ChannelHeader widget can display several things related to channel and the user's connection, i.e group name, members, connection state of users (online/offline), typing indicators, etc.

The default ChannelHeader does not need any setup code except a StreamChannel in the hierarchy:

This is the default view of a 1:1 channel header:

We use the StreamChatTheme to alter aspects of the header. As an example, if we wanted to set the background color of the AppBar to yellow, we can add this to the theme:

Which turns our AppBar yellow:

Similarly, this allows you to change the title theme, avatar theme, etc.

The other ChannelHeader parameters allow you to remove the back button or disable the typing indicator. You can also enable a connection state tile, which adds any connection events or errors outside the AppBar:

Attachments

Copied!

The UI SDK also allows you to build attachments differently than the default implementation (or add your own types of attachments) without having the redo the entire message list section.

The customAttachmentBuilders property in the MessageWidget as well as the MessageListView can be modified to build specific types of attachments. For example, if we need to render the image attachments differently, we can try:

This gives us the text with the number of attachments when it encounters an image attachment:

This can also be implemented when you choose to add custom dependencies such as a google map view for location for example.

Message Input

Copied!

The Message Input is one of the most important components when it comes to chat and most applications want to customize it according to their themes, styles, icons, etc.

The basic code for a MessageInput widget in the stream_chat_flutter package is rather simple:

The default implementation looks like this:

The default MessageInput contains (from left to right): a way to add attachments, a way to add commands, the TextField to type in the message, and a send button.

First things first, the theme of the send button is the most obvious subject to change in an app. To change the colors and visual aspects of the MessageInput, we modify the theme using the streamChatThemeData parameter passed to the StreamChat widget.

Here, we use the messageInputTheme to craft our colors and visuals (as well as aspects like the animation duration on the send button):

In terms of other elements you can tweak, the locations of the action buttons and send button as well.

Which pulls the buttons into the textfield border: