We didn't add any dependencies for working with files and images, since there are a couple of them and you might want to use different ones.
In this example, we will use image_picker, follow the instructions there to install it. After it is done we can use the image picker to select an image and send it as a message (full example with images and files can be found here):
Similar to the text message, you will need to create an image message using data from the image picker. In this example, we use local path just for demo purposes, but for the backend service, you will upload the image first and then send the received URL using the
To keep the UI clean, the image message renders in two different ways, if the aspect ratio is too low or too high it renders like a file message, so you don't see a narrow line on the UI. The second way is a classic image in the chat. Go give it a try.
You can use this URL https://bit.ly/2P0cn2g to test the file message presentation, remove height and width from the
message so the library will calculate it automatically and replace
uri's data with this URL.
On tap, images will be previewed inside an interactive image gallery. To disable the image gallery pass
disableImageGallery parameter to the Chat widget.
In this example, we will use file_picker, follow the instructions there to install it. After it is done we can use the file picker to select a file and send it as a message (full example with images and files can be found here):
Similar to the text message, you will need to create a file message using data from the document picker. In this example,
uri will point to the local filesystem just for demo purposes, but for the backend service, you will upload the file first and then send the received URL using the
Right now, nothing will happen when a user taps on a file message, we will need to add another dependency. In this case, let's add open_file. As usual, follow the instructions there to install it. Now we can open a file:
Link preview works automatically, we created a separate package for that, you can found it here. It can be disabled by setting
usePreviewData to false. Usually, however, you'll want to save the preview data so it stays the same, you can do that using
Now to choose between images and files from a single button we will use
showModalBottomSheet. If you skipped previous sections and want to use this example, remember to install - image_picker, file_picker and open_file. This is a drop-in example, everything should work if you had installed all the dependencies.
buildCustomMessage function to build whatever message you want. To store the data use a
metadata map of the
CustomMessage. You can have multiple different custom messages, you will need to identify them based on some property inside the
metadata and build accordingly.
To show user avatars & names use
showUserNames parameters. Can be used separately. By default, the chat will select one of 10 provided colors as an avatar background and name text color. Color is calculated based on the user's
id hash code, so it is unique in different rooms. To modify provided colors use
userAvatarNameColors parameter in theme. If you want to have one color for everyone, just pass this color as a single item in the