StreamMessageWidget
A Widget For Displaying Messages And Attachments
Find the pub.dev documentation here
#
BackgroundThere are several things that need to be displayed with text in a message in a modern messaging app: attachments, highlights if the message is pinned, user avatars of the sender, etc.
To encapsulate all of this functionality into one widget, the Flutter SDK contains a StreamMessageWidget
widget which provides these out of the box.
StreamMessageWidget
in StreamMessageListView
)#
Basic Example (Modifying Primarily, the StreamMessageWidget
is used in the StreamMessageListView
. To customize only a few properties
of the StreamMessageWidget
without supplying all other properties, the messageBuilder
builder supplies
a default implementation of the widget for us to modify.
class ChannelPage extends StatelessWidget {
const ChannelPage({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: StreamMessageListView(
messageBuilder: (context, details, messageList, defaultMessageWidget) {
return defaultMessageWidget.copyWith(
showThreadReplyIndicator: false,
);
},
),
);
}
}
#
Building A Custom AttachmentWhen a custom attachment type (location, audio, etc.) is sent, the MessageWidget also needs to know
how to build it. For this purpose, we can use the customAttachmentBuilders
parameter.
As an example, if a message has a attachment type 'location', we do:
StreamMessageWidget(
//...
customAttachmentBuilders: {
'location': (context, message, attachments) {
var attachmentWidget = Image.network(
_buildMapAttachment(
attachments[0].extraData['latitude'],
attachments[0].extraData['longitude'],
),
);
return WrapAttachmentWidget(
attachmentWidget: attachmentWidget,
attachmentShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
);
}
},
)
You can also override the builder for existing attachment types like image
and video
.
#
Show User Avatar For MessagesYou can decide to show, hide, or remove user avatars of the sender of the message. To do this, set
the showUserAvatar
property like this:
StreamMessageWidget(
//...
showUserAvatar = DisplayWidget.show,
)
#
Reverse the messageIn most cases, StreamMessageWidget
needs to be a different orientation depending upon if the sender is the
user or someone else.
For this, we use the reverse
parameter to change the orientation of the message:
StreamMessageWidget(
//...
reverse = true,
)