composer property

ChatComposer? composer
final

A primary text editor for composing outgoing messages.

The composer is a customizable text editor designed for typing new messages. It offers options to adjust the appearance and behavior of the text editor, including settings for the minimum and maximum number of lines, decoration, and text style.

By default, the text editor does not include hint text. Hint text can be added using the InputDecoration.hintText property within InputDecoration.

The actionButton becomes enabled when text is entered into the editor.

If the composer is disabled by setting InputDecoration.enabled to false, the actionButton will also be disabled.

If composer is null, the actionButton remains enabled.

{@tool snippet}

@override
Widget build(BuildContext context) {
  return SfChat(
    composer: ChatComposer(
      minLines: 1,
      maxLines: 3,
      decoration: InputDecoration(
        hintText: 'Type a message...',
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
        ),
      ),
    ),
  );
}

{@end-tool}

Builder

The ChatComposer.builder enables an option to create a custom composer.

It is useful for integrating additional features such as icons, buttons, or other widgets.

When ChatComposer.builder is used, the actionButton will always remain enabled.

{@tool snippet}

@override
Widget build(BuildContext context) {
  return SfChat(
    composer: ChatComposer.builder(
      builder: (BuildContext context) {
        return TextFormField(
          decoration: InputDecoration(
            hintText: 'Type a message...',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
            ),
            prefixIcon: IconButton(
              icon: Icon(Icons.attach_file),
              onPressed: () {
                // Handle attachment button click.
              },
            ),
            suffixIcon: IconButton(
              icon: Icon(Icons.mic),
              onPressed: () {
                // Handle mic button click.
              },
            ),
          ),
        );
      },
    ),
  );
}

{@end-tool}

See also:

Implementation

final ChatComposer? composer;