How to customize the message widget?


The MessageListView widget accepts a property called messageBuilder: a builder used to return the widget that renders the message.

Using it, you can implement your own custom message component:

Note that in the messageBuilder you could even use our default MessageWidget and customize it using the properties it accepts:

You can also override specific message components; for example, you can use the textBuilder to override the default text implementation. In this case, we are using it to move the username directly into the MessageText:

How to customize message actions?


Message actions pop up in message overlay, when you longPress a message. We have provided granular control over these actions.

By default we render the following message actions:

  • edit message*

  • delete message*

  • reply

  • thread reply

  • copy message

  • flag message

*(only on own messages)

Partially remove some message actions


For example, if you only want to keep "copy message" and "delete message", here is how to do it using the messageBuilder with our MessageWidget

Add a new custom message action


For example, let's suppose you want to introduce a new message action - "Pin Message"

How to build custom attachments?


Attachments is simply a field of message class:

Depending on value of attachment.type, we render attachments in different views. By default, we have following built-in views for rendering attachments:

We have some default implementation for these type of attachments to display them in the MessageListView. But you can override these components with your own implementation, as shown in the following example:

customAttachmentBuilders is a Map<String, AttachmentBuilder> which key is the type of attachment and value is the AttachmentBuilder used to build it.

Attachments is a list of attachments containing all the attachments of that type.

You can also customize attachments in the MessageInput using the property attachmentThumbnailBuilders:

Location sharing example


Let's build an example of location sharing option in the app:

  • Show a "Share Location" button next to MessageInput Textfield.

  • When the user presses this button, it should fetch the current location coordinates of the user, and send a message on the channel as follows:

For our example, we are going to use geolocator library. Please check their setup instructions on their docs.

NOTE: If you are testing on iOS simulator, you will need to set some dummy coordinates, as mentioned here. Also don't forget to enable "location update" capability in background mode, from XCode.

On the receiver end, location type attachment should be rendered in map view, in the MessageListView. We are going to use Google Static Maps API to render the map in the message. You can use other libraries as well such as google_maps_flutter.

First, we add a button which when clicked fetches and shares location into the MessageInput:

Next, we build the Static Maps URL (Add your API key before using the code snippet):

And then modify the MessageListView and tell it how to build a location attachment:

This gives us the final location attachment -

Additionally, you can also add a thumbnail if a message has a location attachment (unlike in this case, where we sent the message directly).

To do this, we will:

1) Add an attachment instead of sending a message

2) Customize the MessageInput

First, we add the attachment when the location button is clicked:

After this, we can build the thumbnail:

And we can see the thumbnails in the MessageInput:

Message List For Livestreaming Video


There are two common scenarios in live-streaming applications. Let's explore creating both types:

1) Split-screen


In the split-screen implementation, we have a visual split between the video and the message list.

Adjust the flex of the Expanded widget to change screen : list ratio.

2) Overlapping chat with a transparency gradient


The second type looks like this:

We can use a Stack for achieving this:

Adding Hashtags


To add elements like hashtags, we can override the textBuilder in the MessageWidget or the MessageListView:

We can replace the hashtags using RegEx and add links for the MarkdownBody which is done here in the _replaceHashtags function. Inside the textBuilder, we use the flutter_markdown package to build our hashtags as links.