How to customize the theme support for SfChat widget?

This article explains how to customize theme support in a Flutter Chat using the SfChat widget. The SfChatThemeData makes it easy to change the appearance of the SfChat widget. It allows adjustments to important parts of the chat interface, such as message bubbles, text styles, and the action button. For example, the colors of incoming and outgoing messages can be modified, their shape can be adjusted, and borders can be added. Text styles like font size, weight, and color can also be changed to make the messages clear and visually consistent.

In addition to message bubbles, SfChatThemeData provides options to modify the action button, including its icon, color, and overall design. The input area can also be customized by setting a different background color and adjusting how the placeholder text looks, making it more clear and easy to use.

The following steps outline how to customize theme support in a Flutter Chat.

Step 1: Import Required Packages

import 'package:syncfusion_flutter_chat/chat.dart';
import 'package:syncfusion_flutter_core/theme.dart';

Step 2: Add Messages and Initialize State

In the initState method, load the chat messages with a delay. This simulates a chat conversation where messages are added gradually.

final List<ChatMessage> displayedMessages = [];

@override
void initState() {
  super.initState();
  if (mounted) {
    _loadMessagesWithTimeDelay();
  }
}

void _loadMessagesWithTimeDelay() {
  for (int i = 0; i < messages.length; i++) {
    Future.delayed(Duration(seconds: i * 2), () {
      if (mounted) {
        setState(() {
          displayedMessages.add(messages[i]);
        });
      }
    });
  }
}

Step 3: Define Theme Customizations

We define the theme customization for the SfChat using the SfChatThemeData. This allows us to style different parts of the chat interface, such as the action button, message bubbles, and text styles. Each style can be individually customized.

SfChatThemeData(
  // Action Button Customization
  actionButtonForegroundColor: Colors.white,
  actionButtonBackgroundColor: Colors.purple,
  actionButtonDisabledForegroundColor: Colors.grey,
  actionButtonDisabledBackgroundColor: Colors.grey[300],
  actionButtonElevation: 4.0,
  actionButtonFocusElevation: 6.0,
  actionButtonHoverElevation: 5.0,
  actionButtonHighlightElevation: 12.0,
  actionButtonDisabledElevation: 2.0,
  actionButtonFocusColor: Colors.indigo,
  actionButtonSplashColor: Colors.orangeAccent,
  actionButtonHoverColor: const Color(0xffFF7F3E),
  actionButtonMouseCursor: SystemMouseCursors.click,
  actionButtonShape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8.0),
  ),
  
  // Editor TextStyle Customization
  editorTextStyle: _buildTextStyle(
    _textTheme.bodyLarge!,
    color: Colors.blueGrey[800],
    fontStyle: FontStyle.italic,
    fontSize: 16.0,
  ),
  
  // Incoming Message Customization
  incomingMessageBackgroundColor: const Color(0xffA1D6CB),
  incomingContentTextStyle: _buildTextStyle(
    _textTheme.bodyLarge!,
    color: Colors.black,
    fontSize: 13.0,
    fontWeight: FontWeight.w600,
  ),
  incomingPrimaryHeaderTextStyle: _buildTextStyle(
    _textTheme.bodyMedium!,
    color: Colors.indigo,
    fontSize: 12.0,
    fontWeight: FontWeight.bold,
  ),
  incomingSecondaryHeaderTextStyle: _buildTextStyle(
    _textTheme.bodySmall!,
    color: Colors.blueGrey[900],
    fontSize: 11.0,
  ),
  incomingMessageShape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
  ),
  
  // Outgoing Message Customization
  outgoingMessageBackgroundColor: const Color(0xffFF7F3E).withOpacity(0.8),
  outgoingContentTextStyle: _buildTextStyle(
    _textTheme.bodyLarge!,
    color: Colors.white,
    fontSize: 13.0,
    fontWeight: FontWeight.w500,
  ),
  outgoingPrimaryHeaderTextStyle: _buildTextStyle(
    _textTheme.bodyMedium!,
    color: const Color(0xffAA5486).withOpacity(0.9),
    fontSize: 12.0,
    fontWeight: FontWeight.bold,
  ),
  outgoingSecondaryHeaderTextStyle: _buildTextStyle(
    _textTheme.bodySmall!,
    color: Colors.black,
    fontSize: 11.0,
  ),
  outgoingMessageShape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(40),
  ),
),

Step 4: Build chat UI

The SfChat builds the core chat interface, combining elements like messages, composer, and actionButton. The messages property displays chat messages, outgoingUser distinguishes the current user’s messages, composer defines the input field, and actionButton sends the messages.

child: SfChat(
  messages: displayedMessages,
  outgoingUser: '1-002',
  composer: const ChatComposer(
    decoration: InputDecoration(
      prefixIcon: Icon(
        Icons.emoji_emotions_outlined,
        color: Colors.blueGrey,
      ),
      hintText: 'Type your message here.....',
    ),
  ),
  actionButton: buildActionButton(),
),

Step 5: Create Action Button

The actionButton lets users send new messages. When pressed, the message is added to the list of displayed messages.

ChatActionButton buildActionButton() {
  return ChatActionButton(
    onPressed: (String newMessage) {
      setState(() {
        displayedMessages.add(ChatMessage(
          text: newMessage,
          time: DateTime.now(),
          author: const ChatAuthor(id: '1-002', name: 'Smith'),
        ));
      });
    },
  );
}

By following the provided code snippets, you can customize theme support in a Flutter Chat.

View the GitHub sample here

Conclusion

I hope you enjoyed learning about how to customize theme support in a Flutter Chat

You can refer to our Flutter Treemap feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.

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!