How to add prefix and suffix icon in composer using Flutter Chat?

In this article, we have explained how to add prefix and suffix icon in composer using Flutter Chat.

The composer is a customizable text editor designed for typing new messages. I have used the ChatComposer.builder to customize the composer. This builder allows you to specify any type of widget as the primary composer, making it versatile for integrating additional options alongside the text field, such as a microphone button and camera button. In this implementation, I added a TextField widget to allow users to enter text and added the send button as the suffixIcon within the InputDecoration property, which will add the entered text to the message list and the message will render in the conversation area.

The following steps will explain how to add prefix and suffix icon in composer using Flutter Chat.

Step 1: Import the required packages

Add the following dependency in your pubspec.yaml file to install the Syncfusion® Flutter Chat package, which is required for running the chat widget in your application.

dependencies:
  syncfusion_flutter_chat: ^xx.xx.x
  

Step 2: Initialize the SfChat widget

To create a SfChat sample, first initialize the SfChat widget with the required properties such as messages and outgoingUser as per the following code snippet.

List<ChatMessage> _messages= [];

  @override
  void initState() {
    super.initState();
    _messages = <ChatMessage>[
      ChatMessage(
        text: 'Hi Anderson, how are you?',
        time: DateTime.now().subtract(const Duration(minutes: 100)),
        author: const ChatAuthor(id: '1011', name: 'Jackson'),
      ),
      ChatMessage(
        text: 'I\'m good, thanks. How are you?',
        time: DateTime.now().subtract(const Duration(minutes: 97)),
        author: const ChatAuthor(id: '1010', name: 'Andreson'),
      ),
      ChatMessage(
        text:
            'I\'m okay. Thinking of doing something fun this weekend. Any ideas?',
        time: DateTime.now().subtract(const Duration(minutes: 95)),
        author: const ChatAuthor(id: '1011', name: 'Jackson'),
      ),
      ChatMessage(
        text:
            'That sounds good. Maybe we could go to the park or watch a movie?',
        time: DateTime.now().subtract(const Duration(minutes: 92)),
        author: const ChatAuthor(id: '1010', name: 'Andreson'),
      ),
      ChatMessage(
        text: 'I was thinking of going on a trip.',
        time: DateTime.now().subtract(const Duration(minutes: 89)),
        author: const ChatAuthor(id: '1011', name: 'Jackson'),
      ),
      ChatMessage(
        text: 'Oh, that\'s cool! Where are you thinking of going?',
        time: DateTime.now().subtract(const Duration(minutes: 86)),
        author: const ChatAuthor(id: '1010', name: 'Andreson'),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfChat(
        outgoingUser: '1010',
        messages: _messages,
      ),
    );
  } 
  

Output:

Step 3: Add text field using the composer builder

To add a text field to the composer using ChatComposer.builder, initialize the builder property in the chat and return the TextField widget. The minLines and maxLines properties are used to define the number of visible lines, allowing flexibility for both single and multi-line input. A text controller is added to the TextField to manage and preserve the text entered by the user.

Code snippet:

Widget _buildComposer() {
  return TextField(
    controller: _textController,
    minLines: 1,
    maxLines: 5,
    decoration: InputDecoration(
        hintText: 'Enter message here...',
    ),
  );
}
  
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: SfChat(
          messages: _messages,
          outgoingUser: '1010',
          composer: ChatComposer.builder(
            builder: (context) {
              return _buildComposer();
            },
          ),
        ),
      ),
    );
  }

Output:

Step 4: Add prefix widget in the composer

To add a prefix to the composer, use the prefixIcon property within the decoration property of the TextField widget. In this example, I have included an emoji icon as the prefix. The icon color will update dynamically, when text is entered into the composer, the icon turns grey, and it reverts to its default color when the text field is empty.

Code snippet:

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(
      Icons.emoji_emotions_outlined,
      color: hasText ? Colors.grey.shade500 : null,
    ),
  ),
);

Output:

Step 5: Add suffix widget in the composer

To add a suffix widget to the composer, use the suffixIcon property within the decoration property of the TextField widget. In this example, a row of camera and microphone icon buttons is displayed as the suffix when no text is entered in the text field. When text is entered, the row of widget is replaced with send button. The send button is used to add the text to the message list and render it in the conversation area.

Code snippet:

TextField(
   controller: _textController,
   minLines: 1,
   maxLines: 5,
   decoration: InputDecoration(
     hintText: 'Enter message here...',
     contentPadding:
        const EdgeInsets.symmetric(horizontal: 18, vertical: 16),
     prefixIcon: Icon(
        Icons.mic_none_outlined,
        color: hasText ? Colors.grey.shade500 : null,
     ),
     suffixIcon: hasText
         ? Padding(
             padding: const EdgeInsets.only(right: 10.0),
             child: IconButton(
               icon: Icon(
                 hasText
                     ? CupertinoIcons.paperplane_fill
                     : CupertinoIcons.paperplane,
                 color:
                     hasText ? Theme.of(context).colorScheme.primary : null,
               ),
               onPressed: _sendMessage,
             ),
           )
         : Row(
             mainAxisSize: MainAxisSize.min,
             children: [
               IconButton(
                 icon: const Icon(Icons.emoji_emotions_outlined),
                 onPressed: () {},
               ),
               IconButton(
                 icon: const Icon(Icons.camera_alt_outlined),
                 onPressed: () {},
               ),
               const SizedBox(width: 8),
             ],
           ),
     border: OutlineInputBorder(
       borderRadius: BorderRadius.circular(5),
     ),
   ),
 );

Output:

We have added the prefix and suffix icon to the composer in the sample by following these steps. The final user interface that incorporates all the above steps is displayed below.

View Sample in GitHub

Conclusion

I hope you enjoyed learning about how to add prefix and suffix in composer using Flutter Chat.

You can refer to our Flutter Chat feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our Flutter Chat example to understand how to create the chat widget.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!