Skip to main content
Version: v7

Message Composer

A Widget For Controlling A Message Input

Find the documentation here


The StreamMessageInputController is a controller class that embed the business logic to compose a message. StreamMessageInputController is a parameter of the StreamMessageInput widget. Check the StreamMessageInput documentation to read more about that.

Basic Example

Building a custom message input is a common task. Here is an example of how to use the StreamMessageInputController to build a simple custom message input widget.

First of all we should create an instance of the StreamMessageInputController.

class MessageScreenState extends State<MessageScreen> {
final StreamMessageInputController messageInputController = StreamMessageInputController();

Make sure you call messageInputController.dispose() when the controller is no longer required.

void dispose() {

The StreamMessageInputController is basically a ValueNotifier that notifies you when the message being composed has changed. You can use a ValueListenableBuilder to build your UI depending on the latest message. For a very simple message input you could even pass the messageInputController.textEditingController to your TextField and set the onChanged callback.

padding: const EdgeInsets.all(8),
child: Row(
children: [
child: TextField(
controller: messageInputController.textFieldController,
onChanged: (s) => messageInputController.text = s,
decoration: const InputDecoration(
hintText: 'Enter your message',
clipBehavior: Clip.hardEdge,
child: InkWell(
onTap: () async {
if (messageInputController.message.text?.isNotEmpty ==
true) {
await channel.sendMessage(
if (context.mounted) {
child: const Padding(
padding: EdgeInsets.all(8),
child: Center(
child: Icon(
color: Colors.white,

Did you find this page helpful?