SfChat class

The SfChat widget is a customizable chat interface designed for one-on-one or group conversations.

It provides extensive customization options, allowing developers to modify the appearance and behavior of chat bubbles, the input composer, action buttons, and more.

The SfChat includes the following elements and features:

• Outgoing User: This refers to the unique ID of the user sending the message. This ID distinguishes messages sent by the current user from those sent by others, ensuring accurate presentation of the chat.
• Messages: A list of ChatMessage objects that will be displayed in the chat interface as either incoming or outgoing messages based on the outgoingUser. Each ChatMessage includes details such as the message text, timestamp, and author information. Additionally, there is an option to extend this class to include more information about the chat message.
• Composer: This is the primary text editor where the user can compose new chat messages.
• Action Button: This represents the send button, which becomes enabled when the default text editor starts adding text. Pressing this action button invokes the ChatActionButton.onPressed callback with the text entered in the default ChatComposer.
• Placeholder Builder: The SfChat.placeholderBuilder allows you to specify a custom widget to display when there are no messages in the chat. This is particularly useful for presenting users with a relevant or visually appealing message indicating that the conversation is currently empty.
• Bubble Header Builder: The SfChat.bubbleHeaderBuilder allows you to specify a custom widget to display as a header for each chat bubble. This is particularly useful for displaying additional information such as the sender's name and the timestamp associated with each message.
• Bubble Avatar Builder: The SfChat.bubbleAvatarBuilder allows you to specify a custom widget to display as an avatar within each chat bubble. This feature is especially useful for showing user avatars or profile pictures within the chat interface.
• Bubble Content Builder: The SfChat.bubbleContentBuilder allows you to specify a custom widget to display as the content within each chat bubble. This is useful for customizing how the message content is presented, such as using different background colors, borders, or padding.
• Bubble Footer Builder: The SfChat.bubbleFooterBuilder allows you to specify a custom widget that will be displayed as a footer within each chat bubble. This is particularly useful for displaying timestamps or other additional information related to the message.

{@tool snippet} The following example demonstrates how to create a simple chat interface using the SfChat widget.

late List<ChatMessage> _messages;

@override
void initState() {
  _messages = <ChatMessage>[
    ChatMessage(
      text: 'Hello, how can I help you today?',
      time: DateTime.now(),
      author: const ChatAuthor(
        id: 'a2c4-56h8-9x01-2a3d',
        name: 'Incoming user name',
      ),
    ),
  ];
  super.initState();
}

@override
Widget build(BuildContext context) {
  return SfChat(
    messages: _messages,
    outgoingUser: '8ob3-b720-g9s6-25s8',
    composer: const ChatComposer(
      decoration: InputDecoration(
        hintText: 'Type a message',
      ),
    ),
    actionButton: ChatActionButton(
      onPressed: (String newMessage) {
        setState(() {
          _messages.add(ChatMessage(
            text: newMessage,
            time: DateTime.now(),
            author: const ChatAuthor(
              id: '8ob3-b720-g9s6-25s8',
              name: 'Outgoing user name',
            ),
          ));
        });
      },
    ),
  );
}

@override
void dispose() {
  _messages.clear();
  super.dispose();
}

{@end-tool}

{@tool snippet} The following example demonstrates how to create a chat interface with the builder properties of the SfChat widget.

late TextEditingController _textController;
late List<ChatMessage> _messages;

@override
void initState() {
  _textController = TextEditingController();
  _messages = <ChatMessage>[
    ChatMessage(
      text: 'Hello, how can I help you today?',
      time: DateTime.now(),
      author: const ChatAuthor(
        id: 'a2c4-56h8-9x01-2a3d',
        name: 'Incoming user name',
      ),
    ),
  ];
  super.initState();
}

@override
Widget build(BuildContext context) {
  return SfChat(
    messages: _messages,
    outgoingUser: '8ob3-b720-g9s6-25s8',
    composer: ChatComposer.builder(
      builder: (BuildContext context) {
        return TextFormField(
          controller: _textController,
          decoration: InputDecoration(
            icon: const Icon(Icons.add),
            hintText: 'Type a message',
            border: const OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
            ),
            suffix: IconButton(
              onPressed: () {
                // Handle send button click.
              },
              icon: const Icon(Icons.send),
            ),
          ),
        );
      },
    ),
    actionButton: ChatActionButton(
      size: const Size(90, 40),
      backgroundColor: Colors.transparent,
      hoverColor: Colors.transparent,
      focusColor: Colors.transparent,
      onPressed: (String newMessage) {
        // Handle send button click.
      },
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          IconButton(
            constraints: BoxConstraints.tight(const Size(40, 40)),
            icon: const Icon(Icons.camera_alt_outlined),
            onPressed: () {
              // Handle camera button click.
            },
          ),
          const SizedBox(width: 5),
          IconButton(
            constraints: BoxConstraints.tight(const Size(40, 40)),
            icon: const Icon(Icons.mic_none),
            onPressed: () {
              // Handle mic button click.
            },
          ),
        ],
      ),
    ),
  );
}

@override
void dispose() {
  _textController.dispose();
  _messages.clear();
  super.dispose();
}

{@end-tool} See also:

• SfChatTheme and SfChatThemeData for information about controlling the visual appearance of the SfChat.

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatefulWidget
• SfChat

Constructors

SfChat({Key? key, required List<ChatMessage> messages, required String outgoingUser, ChatComposer? composer = const ChatComposer(), ChatActionButton? actionButton, WidgetBuilder? placeholderBuilder, ChatWidgetBuilder? bubbleHeaderBuilder, ChatWidgetBuilder? bubbleAvatarBuilder, ChatWidgetBuilder? bubbleContentBuilder, ChatWidgetBuilder? bubbleFooterBuilder, ChatBubbleSettings incomingBubbleSettings = const ChatBubbleSettings(), ChatBubbleSettings outgoingBubbleSettings = const ChatBubbleSettings()})

Creates an SfChat widget that displays the content of either incoming or outgoing messages based on the current user.

const

Properties

actionButton → ChatActionButton?

Represents a send button.

final

bubbleAvatarBuilder → ChatWidgetBuilder?

A callback function creates a widget to display as an avatar within each chat bubble.

final

bubbleContentBuilder → ChatWidgetBuilder?

A callback function creates a widget to display as the content of each chat bubble.

final

bubbleFooterBuilder → ChatWidgetBuilder?

A callback function creates a widget to display as a footer within each chat bubble.

final

bubbleHeaderBuilder → ChatWidgetBuilder?

A callback function creates a widget to serve as a header for each chat bubble.

final

composer → ChatComposer?

A primary text editor for composing outgoing messages.

final

hashCode → int

The hash code for this object.

no setter, inherited

incomingBubbleSettings → ChatBubbleSettings

Options for changing the appearance and behavior of incoming chat bubbles.

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

messages → List<ChatMessage>

A list of ChatMessage objects that will be displayed in the chat interface.

final

outgoingBubbleSettings → ChatBubbleSettings

Options for changing the appearance and behavior of outgoing chat bubbles.

final

outgoingUser → String

The distinct identifier of the user who is sending the message.

final

placeholderBuilder → WidgetBuilder?

A callback function creates a widget to display when there are no messages in the chat.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

Methods

createElement() → StatefulElement

Creates a StatefulElement to manage this widget's location in the tree.

inherited

createState() → State<SfChat>

Creates the mutable state for this widget at a given location in the tree.

override

debugDescribeChildren() → List<DiagnosticsNode>

Returns a list of DiagnosticsNode objects describing this node's children.

inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

inherited

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String

A string representation of this object.

inherited

toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String

Returns a string representation of this node and its descendants.

inherited

toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a one-line detailed description of the object.

inherited

toStringShort() → String

A short, textual description of this widget.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited