Flutter UI SDK

LAST EDIT Mar 05 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.

1
2
3
4
5
6
7
8
9
10
11
MessageListView( 
  ... 
  messageListBuilder: (context, list) { 
     return ListView.builder(context,  
       builder: (context, position) { 
         return Text(list[position].text); 
       },  
       itemCount: list.length, 
     ); 
  }, 
)

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:

1
2
3
4
5
MessageListView( 
  messageBuilder: (context, message, list) { 
    return Center(child: Text(message.message.text)); 
  }, 
),

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
MessageListView( 
  messageBuilder: (context, message, list) { 
    final isMyMessage = message.message.user.id == StreamChat.of(context).user.id; 
 
    return MessageWidget( 
      showThreadReplyIndicator: false, 
      showInChannelIndicator: false, 
      showReplyMessage: false, 
      showResendMessage: false, 
     showThreadReplyMessage: false, 
     showCopyMessage: false, 
     showDeleteMessage: false, 
     showEditMessage: false, 
     message: message.message, 
     reverse: isMyMessage, 
     showUsername: !isMyMessage, 
     padding: const EdgeInsets.all(8.0), 
     showSendingIndicator: false, 
     borderRadiusGeometry: BorderRadius.only( 
       topLeft: Radius.circular(16), 
       bottomLeft: Radius.circular(2), 
       topRight: Radius.circular(16), 
       bottomRight: Radius.circular(16), 
     ), 
     textPadding: EdgeInsets.symmetric( 
       vertical: 8.0, 
       horizontal: 16.0, 
     ), 
     borderSide: isMyMessage ? BorderSide.none : null, 
     showUserAvatar: isMyMessage ? DisplayWidget.gone : DisplayWidget.show, 
     messageTheme: isMyMessage 
         ? StreamChatTheme.of(context).ownMessageTheme 
         : StreamChatTheme.of(context).otherMessageTheme, 
     onReturnAction: (action) { 
       switch (action) { 
         case ReturnActionType.none: 
           break; 
         case ReturnActionType.reply: 
           FocusScope.of(context).unfocus(); 
           break; 
        } 
      }, 
    ); 
  }, 
),

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:

1
2
3
Scaffold( 
  appBar: ChannelHeader(), 
)

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:

1
2
3
4
5
6
7
8
9
10
11
return StreamChat( 
   child: widget, 
   client: client, 
   streamChatThemeData: StreamChatThemeData( 
      channelTheme: ChannelTheme( 
       channelHeaderTheme: ChannelHeaderTheme( 
         color: Colors.yellow, 
       ), 
     ), 
  ), 
);

Which turns our AppBar yellow:

Similarly, this allows you 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:

1
2
3
4
5
6
7
Scaffold( 
  appBar: ChannelHeader( 
    showBackButton: false, 
    showTypingIndicator: false, 
    showConnectionStateTile: true, 
  ), 
)

Attachments

Copied!

The UI SDK also allows you to build attachments differently that the default implementation without having the redo the entire message list section.

Message Input

Copied!